js实现简单的获取验证码按钮效果


Posted in Javascript onMarch 03, 2017

效果图:

js实现简单的获取验证码按钮效果

图(1)初始图

js实现简单的获取验证码按钮效果

图(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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
Nov 16 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
javascript为下拉列表动态添加数据项
May 23 Javascript
JavaScript声明变量名的语法规则
Jul 10 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 Javascript
javascript 通过键名获取键盘的keyCode方法
Dec 31 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
jQuery获取Table某列的值(推荐)
Mar 03 #Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 #Javascript
js正则表达式验证密码强度【推荐】
Mar 03 #Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 #Javascript
jQuery简单实现MD5加密的方法
Mar 03 #Javascript
详解angular2封装material2对话框组件
Mar 03 #Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 #Javascript
You might like
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
js常用正则表达式集锦
2019/05/17 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
JS中async/await实现异步调用的方法
2019/08/28 Javascript
JS如何生成动态列表
2020/09/22 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
python实现从ftp上下载文件的实例方法
2020/07/19 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
python中pop()函数的语法与实例
2020/12/01 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
学习交流会主持词
2014/04/01 职场文书
创先争优个人承诺书
2014/08/30 职场文书
车辆年检委托书范本
2014/10/14 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL
Mysql案例刨析事务隔离级别
2021/09/25 MySQL