倒计时按钮—获取手机验证码按钮

HTML:

<input type="button" value="获取验证码">

CSS:

 1 input[type=button] {
 2     width: 150px;
 3     height: 30px;
 4     background-color: #ff3000;
 5     border: 0;
 6     border-radius: 15px;
 7     color: #fff;
 8 }
 9 
10 input[type=button].on {
11     background-color: #eee;
12     color: #ccc;
13     cursor: not-allowed;
14 }

JavaScript:

 1     $("input[type='button']").click(btnCheck);
 2 
 3     /**
 4      * [btnCheck 按钮倒计时常用于获取手机短信验证码]
 5      */
 6     function btnCheck() {
 7 
 8         $(this).addClass("on");
 9 
10         var time = 5;
11 
12         $(this).attr("disabled", true);
13 
14         var timer = setInterval(function() {
15 
16             if (time == 0) {
17 
18                 clearInterval(timer);
19 
20                 $("input").attr("disabled", false);
21 
22                 $("input").val("获取验证码");
23 
24                 $("input").removeClass("on");
25 
26             } else {
27                 
28                 $('input').val(time + "秒");
29                 
30                 time--;
31 
32             }
33 
34         }, 1000);
35 
36     }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android中高级开发

首个hybird商业项目踩坑总结

该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列。该系列引用了《Android开发艺术探索...

15710
来自专栏影子

css伪类的说明以及使用(css事件)

转载请注明源地址:http://www.cnblogs.com/funnyzpc/p/7670959.html

23250
来自专栏王磊的博客

Spring Boot 最佳实践(一)快速入门

在开始了解Spring Boot之前,我们需要先了解一下Spring,因为Spring Boot的诞生和Spring是息息相关的,Spring Boot是Spr...

17310
来自专栏JadePeng的技术博客

使用.NET Core+Docker 开发微服务

.NET Core发布很久了,因为近几年主要使用java,所以还没使用过.NET Core,今天正好有一个c#写的demo,需要做成服务,不想再转成java来实...

90120
来自专栏王磊的博客

Spring Boot 最佳实践(四)模板引擎Thymeleaf集成

Thymeleaf是一种Java XML / XHTML / HTML5模板引擎,可以在Web和非Web环境中使用。它更适合在基于MVC的Web应用程序的视图层...

42120
来自专栏超然的博客

mpvue-小程序之蹲坑记

mpvue 是兼容微信小程序的生命周期与 vue 的生命周期,vue 实例会接管小程序 Page 实例的生命钩子,因此需要使用到小程序的生命周期钩子时,可将相应...

76820
来自专栏王磊的博客

Ubuntu 18.04.1 搭建Java环境和HelloWorld

官网地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html

21420
来自专栏C/C++基础

C++纯虚函数与抽象类

为什么说虚函数是C++最重要的特性之一呢,因为虚函数承载着C++中动态联编的作用,也即多态,可以让程序在运行时选择合适的成员函数。虚函数必须是类的非静态成员函数...

38120
来自专栏程序员同行者

解决tomcat启动慢问题

79220
来自专栏恰童鞋骚年

Java微服务之Spring Boot on Docker

本文学习前提:Java, Spring Boot, Docker, Spring Cloud

37440

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励