小案例【倒计时+checkbox选中+全选触发】

倒计时

• DOM

    

         

            距离活动开始还有
             0
             天
             0
             时
             0
             分
             0
             秒
         
     

• JS

做秒杀或者倒计时活动，最好使用服务器时间，
js： new Date()  获取的是客户端时间
 console.log('header-time')
 console.log(res.header.Date)
 console.log(new Date(res.header.Date).getTime() + 3600 * 8)
可以通过请求头中的时间来同步服务器时间，但是请求头中的时间是GMT时间，与正常时间相差8个小时时差


        $(function(){
            var activeTimer = setInterval("timerCount(2017,03,16)", 1000);
        });

        function timerCount(year,month,day) {
            // 距离开始还有多长时间
            var end = new Date(year+'/'+month+'/'+day).getTime();
                now = new Date().getTime(),
                timeObj = {};
            var lessTime = end - now;
            if(lessTime <= 0){
                $("#timer_day").text(0);
                $("#timer_hour").text(0);
                $("#timer_minute").text(0);
                $("#timer_second").text(0);
            }else{
                timeObj.day = Math.floor(lessTime / 1000 / 60 / 60 / 24);
                dayTime = timeObj.day * 24 * 3600 * 1000;
                timeObj.hour = Math.floor(lessTime / 1000 / 60 / 60 % 24);
                hourTime = timeObj.hour * 3600 * 1000;
                timeObj.minute = Math.floor(lessTime / 1000 / 60 % 60);
                minuteTime = timeObj.minute * 60 * 1000;
                timeObj.second = Math.floor(lessTime / 1000 % 60);
                secondTime = timeObj.second * 1000;

                $("#timer_day").text(timeObj.day);
                $("#timer_hour").text(timeObj.hour);
                $("#timer_minute").text(timeObj.minute);
                $("#timer_second").text(timeObj.second);
            }         
        }

验证码倒计时

{{capStr}}
{{capStr}}
data(){
  return {
      capStr: '发送验证码',
      capNum: 0,
  }
}
// 获取验证码
    getCaptcha() {
      let num = 5,
        str = ''
      this.capNum = 1
      let t = setInterval(() => {
        if (num > 1) {
          num--
          str = '重发(' + num + 's)'
          this.capStr = str
          console.log(str)
        } else {
          this.capStr = '发送验证码'
          this.capNum = 0
          clearInterval(t)    //记得清除倒计时
        }
      }, 1000)
    }

获取checkbox选中值

• 获取所有被选中的checkbox值，并返回数组

        var chks = "";
        $("input[name=chkBox]:checked").each(function(i){
            chks += (","+$(this).parents("tr").attr("data-productid"));
        });
        console.log(chks);
        chks = chks.split(",");     //字符串转化为数组

全选触发与反触发（jQuery版本）

• 定义DOM【一个全选按钮，其余的为checkbox单选组】

        
全选

        
单选
        
单选
        
单选
        
单选
        
单选
    

• 首先实现：点击全选之后，单选组全部选中
  注意要用prop()函数，checked用attr函数好像不太奏效

function checkAll(obj,subSel){
    $(subSel).each(function(){ 
        $(subSel).prop("checked",$(obj).prop("checked"));      //让单选组跟随全选框的状态变化
    });
}

• 现在来实现单选组里面的某一个没有选中的时候，全选按钮就取消选中

var ocheckOne = $(".checkOne");   //单选
var ocheckAll = $(".checkAll");     //全选
ocheckOne.click(function(){
    if(!$(this).prop("checked")){   //如果当前的单选不选中，则全选不选中
        ocheckAll.prop("checked",false);
    }
    var flag = true;
    ocheckOne.each(function(){     //点击单选按钮的时候，遍历观察所有的单选按钮
      if(!$(this).prop("checked")){    //如果有一个按钮没有选中，将标志值置为false
          flag = false;
      }
    });
    if(flag){
        ocheckAll.prop('checked',true);
    }
});

多个输入框输入4位数字，输完一个自动跳到下一个

image.png

 // 设置聚焦弹窗键盘
    onFocus: function(e) {
        console.log('onFocus...', e)
        var that = this;
        that.setData({ isFocus: true });
    },

    // 设置值给input框
    setValue: function(e) {
        var that = this;
        that.setData({ iptValue: e.detail.value });
        console.log('setValue:', e.detail.value, typeof(e.detail.value), 'iptvalue:', this.data.iptValue, typeof(this.data.iptValue))
    },