js与jQuery实现的用户注册协议倒计时功能实例【三种方法】


Posted in jQuery onNovember 09, 2017

本文实例讲述了js与jQuery实现的用户注册协议倒计时功能。分享给大家供大家参考,具体如下:

方法一:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>3water.com 注册倒计时</title>
  <script type="text/javascript">
    //用户有十秒钟的时间看协议,超过十秒钟,“同意”按钮将生效
    var Seconds = 10;
    //计时器ID
    var setIntervalID;
    function ok() {
      var getid = document.getElementById("but");
      if (Seconds <= 0) {
        getid.value="同意";
        getid.disabled = false; //或者写成getid.disabled=""; 启用getid控件。
        //停止计时器
        clearInterval(setIntervalID);
      }
      else {
        getid.value = "请仔细阅读协议还剩下【" + Seconds + "】秒";
      }
      Seconds--;
    }
   setIntervalID=setInterval("ok()", 1000);
  </script>
</head>
<body>
<textarea cols="20" rows="8"></textarea><br />
<!--disabled="disabled" 默认submit表单是禁用的,也就是只读的,不能点击-->
<input type="submit" id ="but" value="同意" disabled="disabled" />
</body>
</html>

运行效果:

js与jQuery实现的用户注册协议倒计时功能实例【三种方法】

方法二:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>3water.com 注册倒计时</title>
  <script src="jquery-1.7.2.min.js"></script>
</head>
<body>
  <form action="https://3water.com/" method="post" name="agree">
    <input type="submit" class="button" value="" name="agreeb">
  </form>
</body>
</html>
<script>
  var secs = 5;
  var si;
  $(function () {
    $(".button").attr("disabled", "disabled");
    $(".button").val("请认真查看<服务条款和声明>(" + secs + ")")
    si = setInterval(a, 1000);
  })
  function a() {
    $(".button").val("请认真查看<服务条款和声明>(" + (secs-1) + ")");
    if (secs == 0) {
      clearInterval(si);
      $(".button").val("我同意" ).removeAttr("disabled");
    }
    secs--;
  }
</script>

运行效果:

js与jQuery实现的用户注册协议倒计时功能实例【三种方法】

方法三:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>3water.com 注册倒计时</title>
</head>
<body>
  <form action="https://3water.com/" method="post" name="agree">
    <input type="submit" class="button" value="请认真查看<服务条款和声明> (30)" name="agreeb">
  </form>
</body>
</html>
<script>
  var secs = 30;
  document.agree.agreeb.disabled = true;
  for (var i = 1; i <= secs; i++) {
    window.setTimeout("update(" + i + ")", i * 1000);
  }
  function update(num) {
    if (num == secs) {
      document.agree.agreeb.value = " 我 同 意 ";
      document.agree.agreeb.disabled = false;
    }
    else {
      var printnr = secs - num;
      document.agree.agreeb.value = "请认真查看<服务条款和声明> (" + printnr + ")";
    }
  }
</script>

运行效果:

js与jQuery实现的用户注册协议倒计时功能实例【三种方法】

jQuery 相关文章推荐
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
关于jQuery库冲突的完美解决办法
May 20 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
jQuery实现简单评论区功能
Oct 26 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 #jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 #jQuery
简单实现jquery隔行变色
Nov 09 #jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 #jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 #jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 #jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 #jQuery
You might like
PHP实现的比较完善的购物车类
2014/12/02 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
如何在标题栏显示框架内页面的标题
2007/02/03 Javascript
JavaScript 三种创建对象的方法
2009/10/16 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
jquery操作checkbox示例分享
2014/07/21 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
Vue+webpack项目基础配置教程
2018/02/12 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
python共享引用(多个变量引用)示例代码
2013/12/04 Python
python正则表达式match和search用法实例
2015/03/26 Python
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
以windows service方式运行Python程序的方法
2015/06/03 Python
python机器学习实战之K均值聚类
2017/12/20 Python
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
python tqdm库的使用
2020/11/30 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
施工工地安全标语
2014/06/07 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
幼儿园六一儿童节活动总结
2015/02/10 职场文书
法制主题班会教案
2015/08/13 职场文书
导游词之临安白水涧
2019/11/05 职场文书
MySQL视图概念以及相关应用
2022/04/19 MySQL