JS实现之用户注册协议倒计时

• 要求：按钮显示5秒倒计时，5秒前禁点，5秒后可以点击按钮
• 运行结果：
  5秒前
  

5秒后

• 思路
  • 开启禁用按钮属性disabled
  • 获取按钮元素
  • 开启倒计时函数setInterval
  • 调用函数，函数里包括变量自减，使用DOM对象修改时间，关闭按钮禁用属性
• HTML代码：首先禁用按钮属性

    <textarea name="" id="" cols="30" rows="10">
        用户注册协议
        欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意.
    </textarea>
    <br>
    <!-- 设置禁用属性，开启按钮禁用 -->
    <button class="btn" disabled="true">我已经阅读用户协议(5)</button>

• JS代码：
  注意：
  倒计时函数的调用函数两种方式，如果需要传参，可以在匿名函数里嵌套一个传参的函数，如果不需要传参，使用匿名函数更方便，这里的time是全局变量，函数里可以直接访问，所以可以不传参

写法1：这里演示的是需要传参时使用嵌套函数的写法

   <!-- 先获取元素，改变文字内容 -->
    <script>
        const btn = document.querySelector('.btn')
        let time = 5

        function daojishi(a) {
            // 用户一打开页面就要进行倒计时，注意书写顺序
            time--
            btn.innerHTML = `我已经阅读用户协议(${time})`

            //JS是单线程执行代码，会等待当前代码块执行完毕才会去执行其他任务。所以外部的 if 语句不会立即执行，因此不会检测到 time 值的变化。
            //因此将 if 语句放在函数内部，这样每次执行都会检查 time 值
            if (time===0) {
            //关闭倒计时
            clearInterval(tme) 
            btn.innerHTML = `我已经阅读用户协议` 
            //关闭禁用属性
            btn.disabled=false 
            }
        }
	
		// 倒计时函数写法1
        let tme = setInterval(function(){
            daojishi(time)
        }, 1000)

写法2：直接用匿名函数的写法
因为time在这里是全局变量，不需要传参，所以直接用匿名函数即可

        let tme = setInterval(function(){
            time--
            btn.innerHTML = `我已经阅读用户协议(${time})`
            if (time===0) {
            //关闭倒计时
            clearInterval(tme) 
            btn.innerHTML = `我已经阅读用户协议` 
            //关闭禁用属性
            btn.disabled=false 
        }}, 1000)

• 注意：
  if语句写在函数外面，（倒计时函数后）没有反应
  JS是单线程执行代码，会等待当前代码块执行完毕才会去执行其他任务。外部的 if 语句不会立即执行，因此不会检测到 time 值的变化所以将 if 语句放在函数内部，这样每次执行都会检查 time 值