这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍了 js 实现简单的获取验证码按钮加效果的实例,具有很好的参考价值。下面跟着小编一起来看下吧
效果图:
图(1)初始图
图(2)点击后
代码如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title>pro.html</title>
- <style type="text/CSS">
- .checkCode {
- cursor: pointer;
- border: 1px solid black;
- text-align: center;
- line-height: 26px;
- width: 115px;
- height: 35px;
- }
- </style>
- <script type="text/javascript">
- var sleep = 30, interval = null;
- window.onload = function ()
- {
- var btn = document.getElementById ('btn');
- btn.onclick = function ()
- {
- if (!interval)
- {
- this.style.backgroundColor = 'rgb(243, 182, 182)';
- this.disabled = "disabled";
- this.style.cursor = "wait";
- this.value = "重新发送 (" + sleep-- + ")";
- interval = setInterval (function ()
- {
- if (sleep == 0)
- {
- if (!!interval)
- {
- clearInterval (interval);
- interval = null;
- sleep = 30;
- btn.style.cursor = "pointer";
- btn.removeAttribute ('disabled');
- btn.value = "免费获取验证码";
- btn.style.backgroundColor = '';
- }
- return false;
- }
- btn.value = "重新发送 (" + sleep-- + ")";
- }, 1000);
- }
- }
- }
- </script>
- </head>
- <body>
- <input class="checkCode" type="button" id="btn" value="免费获取验证码" />
- </body>
- </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0630/327091.html