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 相关文章推荐
基于jquery的表格排序
Sep 11 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
给ListBox添加双击事件示例代码
Dec 02 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
复杂的javascript窗口分帧解析
Feb 19 Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 Javascript
微信小程序 绘图之饼图实现
Oct 24 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
angular.JS实现网页禁用调试、复制和剪切
Mar 31 Javascript
微信小程序 共用变量值的实现
Jul 12 Javascript
使用vue制作滑动标签
Sep 21 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 Javascript
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
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
ucenter通信原理分析
2015/01/09 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
基于JS实现EOS隐藏错误提示层代码
2016/04/25 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
详解Python中的join()函数的用法
2015/04/07 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
详解python多线程之间的同步(一)
2019/04/03 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
Apache部署Django项目图文详解
2019/07/30 Python
python 实现单例模式的5种方法
2020/09/23 Python
html如何对span设置宽度
2019/10/30 HTML / CSS
如何写一个自定义标签
2012/12/28 面试题
大四自我鉴定范文
2013/10/06 职场文书
博士学位自我鉴定范文
2013/12/26 职场文书
《母鸡》教学反思
2014/02/25 职场文书
仓库规划计划书
2014/04/28 职场文书
求职信怎么写范文
2014/05/26 职场文书
工程承包协议书范本
2014/09/29 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
MySQL派生表联表查询实战过程
2022/03/20 MySQL