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实现frame之间互通的方法
Jun 26 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 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
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
JavaScript基本编码模式小结
2012/05/23 Javascript
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
详解Python的Django框架中的模版继承
2015/07/16 Python
Python实现k-means算法
2018/02/23 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
使用python实现简单五子棋游戏
2019/06/18 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
Python函数递归调用实现原理实例解析
2020/08/11 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
用HTML5制作数字时钟的教程
2015/05/11 HTML / CSS
HTML5实现签到 功能
2018/10/09 HTML / CSS
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
努比亚手机官网:nubia
2016/10/06 全球购物
教师先进工作者事迹材料
2014/05/01 职场文书
新教师培训方案
2014/06/08 职场文书
办公楼租房协议书范本
2014/11/25 职场文书
党员活动总结
2015/02/04 职场文书
企业承诺书格式范文
2015/04/28 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android