js实现简单的获取验证码按钮效果
更新时间：2017年03月03日 14:06:35 作者：曾阿牛
本文主要介绍了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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
今天小编就为大家分享一篇关于js中事件对象和事件委托的介绍，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。本文将用Three.js实现3D三棱锥立体特效，感兴趣的可以了解一下2022-06-06
本篇文章主要介绍了用ES6的class模仿Vue写一个双向绑定的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要为大家详细介绍了Bootstrap基本组件学习笔记之面板,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
JavaScript使用 for...in 、 for...of 或者 forEach() 遍历元素的示例
for...in 、 for...of 和 forEach 都是用于循环遍历集合元素的方法,但它们之间有一些重要的区别,本文通过实例代码介绍JavaScript使用 for...in 、 for...of 或者 forEach() 遍历元素的相关知识,感兴趣的朋友一起看看吧2023-09-09
下面小编就为大家带来一篇自定义事件解决重复请求BUG的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
js中的函数可以通过几种方式创建，具体创建方法通过实例代码给大家介绍的非常详细，文中通过例子给大家介绍了函数声明和表达式之间的差别，感兴趣的朋友跟随小编一起看看吧2019-12-12
指定区域的图片自动按比例缩小的js代码（防止页面被图片撑破）
有时候我们更新的内容，有很多的大图片，就会导致页面变形或看不到全图。一般情况我们用css的max-width控制，但有些浏览器不支持，我们也可以用js做个补充2014-02-02
这篇文章主要为大家详细介绍了如何利用原生js实现分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
点击按钮时，弹出B窗口（模态）。在B窗口中添加数据，提交后，要求B窗口自关闭，然后刷新A窗口（父），需要的朋友可以了解下2012-12-12
最新评论