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 EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 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中调用JAVA
2006/10/09 PHP
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
php实现图片压缩处理
2020/09/09 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
2016/10/09 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
2019/09/27 Javascript
详解Python中的__init__和__new__
2014/03/12 Python
python绘图方法实例入门
2015/05/19 Python
Python的re模块正则表达式操作
2016/05/25 Python
Python爬虫之pandas基本安装与使用方法示例
2018/08/08 Python
对Python 内建函数和保留字详解
2018/10/15 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
英国绿色商店:Natural Collection
2019/05/03 全球购物
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
最新党员的自我评价分享
2013/11/04 职场文书
毕业生个人投资创业计划书
2014/01/04 职场文书
初一地理教学反思
2014/01/16 职场文书
人力资源管理专业自荐书范文
2014/02/10 职场文书
企业宣传标语
2014/06/09 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
民政局离婚协议书范本
2014/10/20 职场文书