`
momo.
  • 浏览: 4881 次
  • 性别: Icon_minigender_2
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论
阅读更多

第一张卡完成以后大致知道了使用party_bid的流程,haml编写页面,js控制后台,css引入样式。由于处理信息那部分不太懂,所以先做活动报名页面开始按钮的变化部分,在这一块遇到的问题是:

一开始我在js里给start_button设置了初值

 $scope.start_end="start"(按钮为“开始”)
 $scope.button_disable=false(可点状态)

 补充一下,start_button 我用ng-switch来实现功能的

.header-right(ng-switch="start_end")
   %button.btn.btn-4(ng-tap ='start_sign_up()' ng-switch-when='start'ng-disabled="button_disable")开始
   %button.btn.btn-4(ng-tap ='end_sign_up()' ng-switch-when='end' ng-disabled="button_disable")结束

 所以,通过if语句判断条件来显示“开始”按钮可点,“开始”按钮不可点,“结束”按钮可点三种状态,

function judge_sign_up_event_name(){
        var sign_up_event_name=localStorage.sign_up_event_name(取存储在localstorage里的正在报名页面的名称)
        var list_now=localStorage.list_now(取存储在localstorage里的进入活动页面的活动名称的名称)

       if(!sign_up_event_name)(判断为空、undefined、false)
       {
            $scope.start_end="start"
            $scope.button_disable=false
            return;
        }

        if(sign_up_event_name!=list_now){
            console.log(sign_up_event_name,1)
            $scope.start_end="start"
            $scope.button_disable=true
            return;
       }
        else{

            $scope.start_end="end"
            $scope.button_disable=false
        }

    }

 因为之前用不是特别明白getItem()及setItem()的使用方法使得多次存放sign_up_event_name 为undefined的值,所以一直实现不了其功能,getItem()得到数据库中的value,但并不改变它,

var sign_up_event_name=localStorage.sign_up_event_name(取字符串)
var user_messages=JSON.parse(localStorage.getItem("user_messages"))(取数组)

setItem()当数据库中value改变后在存进库中

localStorage.setItem("user_messages",JSON.stringify(user_messages));(存数组)
localStorage.setItem("user_messages",user_messages);(存字符串)

 删除多余的setItem()后,又删去了默认的初始值(“开始”按钮可点状态)就不存在刷新页面所有的状态都还原为(“开始”按钮可点状态)。

状态解决之后是活动列表页面的正在报名的活动背景颜色为黄色问题,只是自己在index里写了个class然后引用了一下。

在处理报名信息这一部分,首先用到了正则表达式(当检索某个文本时,可以使用它来描述要检索的容),由于没有接触过,在w3c里面学习了一下

i	执行对大小写不敏感的匹配。
g	执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m	执行多行匹配。
\w	查找单词字符。
\W	查找非单词字符。
\d	查找数字。
\D	查找非数字字符。
\s	查找空白字符。
\S	查找非空白字符。
\b	匹配单词边界。
\B	匹配非单词边界。
\0	查找 NUL 字符。
\n	查找换行符。
\f	查找换页符。
\r	查找回车符。
\t	查找制表符。
\v	查找垂直制表符。
\xxx	查找以八进制数 xxx 规定的字符。
\xdd	查找以十六进制数 dd 规定的字符。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

 而且由于在电脑上用console.log()的方法接收信息,所以事先给了一条短信,其格式是哈希,需要剥开它

找到需要的报名人姓名以及联系电话

notify_message_received({"messages":[{"create_date":"Tue Jan 15 15:28:44 格林尼治标准时间+0800 2013","message":" b m 仝键","phone":"18733171780"}]})

"messages"是一个key,后面{}包着的是它的value[{"create_date":"Tue Jan 15 15:28:44 格林尼治标准时间+0800 2013","message":" b m 仝键","phone":"18733171780"}]一个数组,

数组里有包了一个哈希{"create_date":"Tue Jan 15 15:28:44 格林尼治标准时间+0800 2013","message":" b m 仝键","phone":"18733171780"}:

create_date,message,phone是key;Tue Jan 15 15:28:44 格林尼治标准时间+0800 2013, b m 仝键,18733171780是各自的value.

 

得到有用的信息后就是把它显示到报名页面上,之前写了个很长的for循环

if(user_messages!=null&&sign_up_event_name!=list_now){
   for(i=0;i<user_messages.length;i++){
      if(user_messages[i].one_event_name==list_now){
         var this_sign_up_messages=JSON.parse(localStorage.getItem("this_sign_up_messages")) || []
         this_sign_up_messages.push(user_messages[i]);
         localStorage.setItem("this_sign_up_messages",JSON.stringify(this_sign_up_messages));
           }
  }

 后来发现特别的麻烦,而且是加载页面时就运行,每刷新一次页面的内容就多被遍历一次,所以改用_.filter

 var start_this_page_messages= _.filter(user_messages, function(user_messages)
             {return user_messages.one_event_name==list_now; });//var 名字=_.filter(数组或localstorage,function(与前面的相同){return 条件})

这是用到了 underscore 里的内容,下次用到其他的方法再继续学习。

 

 

 

 

 

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    SDK2000视频卡

    2. 在安装第二张卡时,避免与第一张卡的PCI插槽相邻,以防信号干扰。 3. 安装第二张卡的驱动程序时,确保选择不同的设备ID,以免操作系统将两张卡视为同一设备。这通常可以在驱动安装过程中手动配置。 4. 更新或调整...

    微信小程序实现卡片层叠滑动效果

    主要为大家详细介绍了微信小程序实现卡片层叠滑动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    stack-in-card:将多张卡分组为一张无边界的卡

    它允许将多张卡分组为一张没有边界的卡。 默认情况下,它将垂直堆叠所有内容。 选项 如果堆栈中的卡定义了--keep-background CSS样式,则不会替换背景。 例如,这对于很有用。 您还可以使用定义此CSS变量。 名称 ...

    斑马英语100张闪读卡点读包小达人

    斑马英语100张闪读卡点读包小达人点读包

    cascades:Joe Conard为Decktet设计的单人纸牌游戏

    第二行,以及(对于王冠和可选的A,Pawns和Courts),在所有三行中都出现第一张之前,不能将第二张卡添加到第一行。版本号1.0.1 不再将游戏限制在3个回合内,再加上布局修复(2021)。1.0.0 初始版本(2016/2020)。...

    第四届 蓝桥杯 竞赛试题题目 C/C++高职高专组

    第四届“蓝桥杯”全国软件专业人才设计与创业大赛选拔赛 C/C++高职高专组 1、题目标题: 猜年龄 美国数学家维纳(N.Wiener)智力早熟,11岁就上了大学。他曾在1935~1936年应邀来中国清华大学讲学。 一次,他参加...

    基于51单片机读韦根读头-数据.doc

    BIT1: 第2—13位的偶校验位 BIT2-9: 对应与电子卡HID码的低8位 BIT10-25: 应电子卡的PID号码 BIT26: 第14-25位的奇校验位 HID号码即Hidden ID code 隐含码,PID号码即Public ID code 公开码。 PID很容易在读出...

    BlackJack-Optimizer:可以为您赢得比赛的21点优化器

    键入:[经销商卡] [您的第一张卡] [第二张卡],以便随时开始新游戏。 键入:“帮助”以获取命令 为未来: *创建一个GUI,*保存历史记录,*询问是否允许使用Double *使用Serializable只执行一次init()。 *创建...

    MTG-Toolbox:帮助改善Magic:The Gathering游戏的应用

    MTG工具箱 有助于改善Magic:The Gathering的应用程序随意重用代码,或者更好地对其进行改进,并告诉我! ... 主页 使用户可以使用8个按钮对...第二张卡的设置号 结果页面 在此,按顺序提供了指向存储在Google云端硬盘中的

    JAVA纸牌程序

    纸牌程序,适合初学java学习,可以自学,也可以请教别人,有助于课余JAVA的学习

    ms2:Code Institute的第二个里程碑项目-JavaScript中的模式匹配内存游戏

    这个网站是我在Code Institute创建的第二个里程碑项目。该网站将展示到目前为止学习到的语言和工具,包括HTML5,CSS3和JavaScript。 描述 xxx 用户体验 xxx 战略 xxx 人口统计: xxx 用户故事: xxx 业务目标: ...

    樊登小读者会员体系.pdf

    2万代理是樊登小读者会员体系中的基础级别代理,需要一次性缴纳2万元获得代理权,同时获得100张卡(总价值38800元)。以后每卖出一张卡,获得150元利润。2万代理仅可推荐2万级别代理,推荐成功即一次性获得50%现金...

    auto-opencv.zip_Auto Tracking_gun_opencv 十字

    电脑上连接一个摄像头,启动程序后在视频窗口中就会 有两个跳动的黄色小球作为你...还要在当前目录下放置一副320×240的命名为gun.bmp的图,我用的就是图中的这张卡,通过它来决定你能用什么颜色的物体操 纵你的准星)

    猫池驱动

    该设备标准名称是GSM MODEM池,内置8/16个无线模块,可插入8/16张SIM卡,可以同时使用8张或者16张卡发送短信,发送速度是1端口的8倍。它采用MTK模块开发,220V电源供电,能长时间稳定工作,外壳豪华大方。 主要特点...

    使用多GPU训练模型.md

    使用多GPU训练模型.md

    PHP商铺会员卡充值消费系统

    项目描述 编写一个商铺充值系统,修改后可以直接使用,适合任何商铺,主要分为...(2)数据库信息的修改 在源码文件下面的dao目录下面找到database.php和DataBaseDao.php文件修改数据库名、登录名和密码 database.php:

    card:这张卡是我顺风顺水学习过程的一部分; 使用HTML,CSS和JS构建

    2. CSS选择器与布局:理解如何选择和操作HTML元素,以及如何设置颜色、字体、边距等样式属性。还要学习CSS布局技术,如盒模型、Flexbox或Grid布局。 3. JavaScript基础:学习变量、数据类型、条件语句、循环、函数等...

    中正返现网

    小涛返现网V2.0 增加会员系统,可登记多张卡 小涛返现网V2.1 增加3种玩法,排队、抽奖、积分 小涛返现网V2.2 增加单卡登记收款信息 小涛返现网V2.3 增加多队伍、多入口排队代理版 小涛返现网V3.0 全新的排队算法...

    react-blackjack-app:React应用程序会自动从52张卡组中为您发两张卡

    总的来说,"react-blackjack-app"项目涵盖了React的基础和进阶应用,包括组件化开发、状态管理、事件处理、数据流以及可能的第三方库集成。这个项目对于学习和提升React技能来说是一个很好的实践案例。

    memory-game:记忆游戏项目

    重复第二张卡。 查看它们是否匹配。 重复直到所有卡都匹配为止。 最后,您的评分,动作和完成时间将显示在屏幕上。 使用的代码: HTML,CSS和JavaScript。 Udacity提供的入门代码-一些HTML,CSS和随机播放功能 ...

Global site tag (gtag.js) - Google Analytics