JavaScript发送短信

223 阅读1分钟
手机号码:<input type="number">
<button>发送</button>
<script>
  // 按钮点击之后,会禁用 disabled 为true
  // 同时按钮里面的内容会变化, 注意 button 里面的内容通过 innerHTML修改
  // 里面秒数是有变化的,因此需要用到定时器
  // 定义一个变量,在定时器里面,不断递减
  // 如果变量为0 说明到了时间,我们需要停止定时器,并且复原按钮初始状态
  var btn = document.querySelector('button')
  btn.addEventListener('click', function () {
    var time = 3
    btn.disabled = true
    // 延时解决方案:将函数写到外面,进而使的setinterval调用函数,然后将函数提前调用一次,也就是写在setInterval的前面,还不明白参考倒计时的做法
    fn()  // 先调用一次这个函数,就没有延迟了
    var timer = setInterval(fn, 1000)

    function fn () {
      if (time === 0) {
        // 清除定时器和复原按钮
        clearInterval(timer)
        btn.disabled = false
        btn.innerHTML = '发送'
      } else {
        btn.innerHTML = '还剩下' + time + '秒'
        time--
      }
    }
  })
</script>