前端获取验证码的方式

web端页面js简单的逻辑代码
这里我采用的是div方式并不是传统的button按钮
pointerEvents：none 阻止当前元素相关事件

 // 获取验证码的点击

    var code = function () {
        var temp = {
            countdown: 60,
        }
        var settime = function () {
            if (temp.countdown != 0) {
                $("#Code").text(temp.countdown + "秒")
                temp.countdown--;
                setTimeout(settime, 1000);
            } else {
                $("#Code").text("重新发送")
                $("#Code").css({
                    pointerEvents: "auto",
                    background: "#443F56",
                })
            }
        };
        $("#Code").css({
            pointerEvents: "none",
            background: "#999999",
        });
        settime();
    };


    $("#Code").click(code);

小程序前端获取验证码
因为不能获取DOM节点，这里采用传统的button方式，小程序是数据绑定
disabled属性值决定botton按钮是否能被点击；

<button class='Code' style='background:{{background}}' disabled='{{disabled}}' data-id="2" bindtap="getBtn">{{time}}</button>

data: {

    time:'获取验证码',
    currentTime:'60',
    background:'#00a8fe',
    disabled:false,

  },
/*-----验证码的js-----*/
  getBtn: function (options) {
    var that = this;
    var currentTime = that.data.currentTime;
    that.setData({
      time: currentTime + '秒',
      background:'#f2f2f2',
      disabled:true,
    })

/*setInterval(表达式，时间)：页面载入后，每经过指定毫秒值后执行指定表达式，是间隔多次执行的
setTimeout(表达式，时间)：页面载入后，经过指定毫秒值后执行指定表达式，只执行一次*/
    var interval = setInterval(function () {
      that.setData({
        time: (currentTime - 1) +
          '秒'
      })
      currentTime--;
      if (currentTime <=
        0) {
        clearInterval(interval)
        that.setData({
          time: '获取验证码',
          currentTime: 60,
          background: '#00a8fe',
          disabled:false,
        })
      }
    }, 1000)
  }

这样有一个缺点，就是页面刷新脚本代码就会被重置——
无论怎样，其逻辑原理是一样的——