您的當前位置：首頁 js與jQuery實現(xiàn)的用戶注冊協(xié)議倒計時功能實例【三種方法】

js與jQuery實現(xiàn)的用戶注冊協(xié)議倒計時功能實例【三種方法】

來源：九壹網(wǎng)

本文實例講述了js與jQuery實現(xiàn)的用戶注冊協(xié)議倒計時功能。分享給大家供大家參考，具體如下：

方法一：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>www.gxlcms.com 注冊倒計時</title>
 <script type="text/javascript">
 //用戶有十秒鐘的時間看協(xié)議，超過十秒鐘，“同意”按鈕將生效
 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 = "請仔細閱讀協(xié)議還剩下【" + 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>

運行效果：

方法二：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>www.gxlcms.com 注冊倒計時</title>
 <script src="jquery-1.7.2.min.js"></script>
</head>
<body>
 <form action="http://www.gxlcms.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>

運行效果：

方法三：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>www.gxlcms.com 注冊倒計時</title>
</head>
<body>
 <form action="http://www.gxlcms.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>

運行效果：

PS：這里再為大家推薦幾款時間及日期相關工具供大家參考使用：

在線秒表工具：
http://tools.jb51.net/bianmin/miaobiao

在線日期/天數(shù)計算器：
http://tools.jb51.net/jisuanqi/date_jisuanqi

在線日期天數(shù)差計算器：
http://tools.jb51.net/jisuanqi/onlinedatejsq

Unix時間戳(timestamp)轉(zhuǎn)換工具：
http://tools.jb51.net/code/unixtime

更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題：《JavaScript時間與日期操作技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)算用法總結(jié)》

希望本文所述對大家JavaScript程序設計有所幫助。

成熟丰满熟妇高潮XXXXX,人妻无码AV中文系列久久兔费 ,国产精品一国产精品,国精品午夜福利视频不卡麻豆

js與jQuery實現(xiàn)的用戶注冊協(xié)議倒計時功能實例【三種方法】