这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 js 代码实现点击按钮出现 60 秒倒计时, 需要的朋友可以参考下
比如,一些网站上的手机短信认证的功能,有类似实现点击按钮后,倒计时 60 秒才能再次点击发送的效果。
此例子用 Javascript 实现点击按钮后,倒计时 60 秒才能再次点击发送验证码的功能。
例子 1:Javascript 实现 点击按钮 倒计时 60 秒方可再次点击发送的效果
- <input type="button" id="btn" value="免费获取验证码" />
- <script type="text/javascript">
- var wait = 60;
- function time(o) {
- if (wait == 0) {
- o.removeAttribute("disabled");
- o.value = "免费获取验证码";
- wait = 60;
- } else {
- o.setAttribute("disabled", true);
- o.value = "重新发送(" + wait + ")";
- wait--;
- setTimeout(function() {
- time(o)
- },
- 1000)
- }
- }
- document.getElementById("btn").onclick = function() {
- time(this);
- }
- </script>
例子 2:点击按钮出现 60 秒倒计时 js 代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- 无标题文档
- </title>
- <script type="text/javascript" src="js/jquery.js">
- </script>
- </head>
- <body>
- <input type="button" id="btn" value="免费获取验证码" onclick="settime(this)"
- />
- <script type="text/javascript">
- var countdown = 60;
- function settime(val) {
- if (countdown == 0) {
- val.removeAttribute("disabled");
- val.value = "免费获取验证码";
- countdown = 60;
- } else {
- val.setAttribute("disabled", true);
- val.value = "重新发送(" + countdown + ")";
- countdown--;
- }
- setTimeout(function() {
- settime(val)
- },
- 1000)
- }
- </script>
- </body>
- </html>
例子 3:点击按钮后,60 秒倒计时后才能继续可以点击,按钮上还能显示倒计时
预想的效果图:
这是微信公众平台上的代码
- function E() {
- var e = $("#mobile"),
- t = (new Date).getTime(),
- n = Math.floor((t - b) / 1e3);
- g && clearTimeout(g),
- n >= 60 ? (e.prop("readonly", !1), y = !0, $("#sendmobile").html("发送验证码").attr("disabled", !1).removeClass("btn_disabled")) : (e.prop("readonly", !0), y = !1, $("#sendmobile").attr("disabled", !0).addClass("btn_disabled").html("%s秒后可重发".sprintf(60 - n)), g = setTimeout(E, 1e3));
- }
- function S() {
- function e() {
- if (!y) return;
- var e = $.trim(n.val());
- l.mobile(e) ? t.attr("disabled", !1).removeClass("btn_disabled") : t.attr("disabled", !0).addClass("btn_disabled");
- }
- var t = $("#sendmobile"),
- n = $("#mobile");
- n.keyup(e).blur(e),
- e(),
- t.click(function() {
- var e;
- t.attr("disabled") !== "disabled" && (e = "+86" + $.trim(n.val()), b = (new Date).getTime(), E(), o.post({
- url: w ? "/cgi-bin/formbyskey": "/acct/formbyticket",
- data: {
- form: "mobile",
- action: "set",
- f: "json",
- mobile: e
- },
- mask: !1
- },
- function(e) {
- var t = e.BaseResp.Ret;
- if (t == 0) u.suc("验证码已经发送");
- else {
- switch (t) {
- case - 13 : u.err("登录超时,请重新登录");
- break;
- case - 35 : u.err("该手机已经登记过2次,请使用别的手机号进行用户信息登记");
- break;
- default:
- u.err("验证码发送失败");
- }
- b = 0;
- }
- }));
- });
- }
这段代码小编就是不知道怎么才能调用到自己的代码上来,经过高人指点有了一些头寻。
高人的解题思路:如果严格的话,这个还要结合后台获取时间的,要不然别人刷新一下就行了。 如果不严格,用个 cookie 也可以。
- <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js">
- </script>
- <script src="http://yukon12345.com/yukon12345.com/js/jquery.cookie.js">
- </script>
- <script>
- time1 = $.cookie("time1") || 60;
- time2 = $.cookie("time2") || 60;
- dis1 = $.cookie("dis1") dis2 = $.cookie("dis2") function countDown($obj) {
- var time;
- if ($obj.attr("id") == "b1") {
- time = --time1;
- $.cookie("time1", time, {
- "expires": 1
- });
- if (time <= 0) {
- time1 = 60;
- $obj[0].disabled = !$obj[0].disabled clearInterval(inter1) $obj.text("点击发送") $.cookie("dis1", "") return
- }
- }
- if ($obj.attr("id") == "b2") {
- time = --time2;
- $.cookie("time2", time, {
- "expires": 1
- });
- if (time <= 0) {
- time1 = 60;
- $obj[0].disabled = !$obj[0].disabled clearInterval(inter2) $obj.text("点击发送") $.cookie("dis2", "") return
- }
- }
- $obj.text(time + "秒后重新发送")
- }
- $(function() {
- if (dis1 = "dis") {
- $("#b1")[0].disabled = 'disabled'inter1 = setInterval(function() {
- countDown($("#b1"))
- },
- 1000)
- }
- if (dis2 = "dis") {
- $("#b2")[0].disabled = 'disabled'inter2 = setInterval(function() {
- countDown($("#b2"))
- },
- 1000)
- }
- $(".cd").bind("click",
- function() {
- $this = $(this);
- //没有被禁用时禁用并执行倒计时
- if (!$this[0].disabled) {
- $this[0].disabled = 'disabled';
- if ($this.attr("id") == "b1") {
- $.cookie("dis1", "dis", {
- "expires": 1
- }) inter1 = setInterval(function() {
- countDown($this)
- },
- 1000)
- }
- if ($this.attr("id") == "b2") {
- $.cookie("dis2", "dis", {
- "expires": 1
- }) inter2 = setInterval(function() {
- countDown($this)
- },
- 1000)
- }
- }
- })
- })
- </script>
- <button id="b1" class="cd">
- 点击发送
- </button>
- <br>
- <button id="b2" class="cd">
- 点击发送
- </button>
- <br>
大家通过这三个例子讲解有没有点思路了,那就动手实现一下吧,希望对大家学习 javascript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0624/267993.html