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树插件zTree使用方法详解
May 02 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
JQuery animate动画应用示例
May 14 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 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若干单维数组遍历方法的比较
2011/09/20 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
PHP实现单例模式最安全的做法
2014/06/13 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
Add Formatted Text to a Word Document
2007/06/15 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
javascript实现全角与半角字符的转换
2015/01/07 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
Django自定义用户认证示例详解
2018/03/14 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
高性能装备提升营地:Kammok
2019/02/27 全球购物
二手书店创业计划书
2014/01/16 职场文书
火车来了教学反思
2014/02/11 职场文书
2014年城管工作总结
2014/11/20 职场文书
高三英语复习计划
2015/01/19 职场文书
英语邀请函范文
2015/02/02 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
小学班主任工作随笔
2015/08/15 职场文书