JS：阅读注册协议案例

最新推荐文章于 2024-07-29 13:58:45 发布

奋斗音音

最新推荐文章于 2024-07-29 13:58:45 发布

阅读量415

点赞数 9

分类专栏： JavaScript 文章标签： javascript 前端网络

本文链接：https://blog.csdn.net/Saala/article/details/136676556

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了一个JavaScript代码片段，演示了如何在用户阅读用户协议60秒后，按钮状态由禁用转为可点击，期间显示剩余秒数，当倒计时结束时显示同意，强调了前端交互设计中的动态效果实现。

摘要由CSDN通过智能技术生成

需求：按钮60秒之后才可以使用

分析：

1、先把（disabled)按钮禁用

2、获取属性

3、函数内处理逻辑

秒数开始减减，按钮里面的文字跟着一起变化，如果秒数等于0，停止定时器，里面文字变为同意 ->按钮可以点击

完成效果：

已经给出HTML部分代码：

 <textarea name="" id="" cols="30" rows="10">
    用户注册协议
    欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
    【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
</textarea>
  <br>
  <button class="btn" disabled>我已经阅读用户协议(5)</button>

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <textarea name="" id="" cols="30" rows="10">
    用户注册协议
    欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
    【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
</textarea>
  <br>
  <button class="btn" disabled>我已经阅读用户协议(5)</button>
</body>
<script>
  //获取元素
  const btn = document.querySelector('.btn')
  //定时器
  let i = 5
  let n = setInterval(function () {//用n获取id
    i--
    btn.innerHTML = `我已经阅读用户协议(${i})`

    if (i === 0) {
      clearInterval(n)//关闭定时器
      //定时器停则开启按钮
      btn.disabled = false
      btn.innerHTML = '同意'
    }
  }, 1000)
</script>

</html>