一、程序代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>发送短信验证码倒计时案例</title><style type="text/css">#demo {margin-top: 200px;text-align: center;}</style>
</head><body><div id="demo"><input type="text" name="code" id="code"><button id="sendCode" onclick="sendCode()">获取验证码</button></div><script type="text/javascript">var btn = document.querySelector("#sendCode");var interval;var times = 10;function sendCode() {interval = setInterval(function () {if (times > 0) {btn.disabled = true;btn.innerText = ((times < 10 ? "0" + times : times) + "s后重新获取");times--;} else {clearInterval(interval);btn.disabled = false;btn.innerText = "获取验证码";}}, 1000);}</script>
</body></html>

二、预览展示

利用JS实现短信验证码倒计时案例相关推荐

js开发实例 —— 发送短信验证码倒计时5S钟之后自动跳转页面
十九.发送短信验证码倒计时思路: ① 按钮点击之后,会禁用disabled为true. ② 同时按钮里面的内容会变化,注意button里面的内容通过innerHTML修改. ③ 里面秒数是有变化的, ...
获取短信验证码倒计时，非常简单
<!doctype html><html lang="en"> <head><meta charset="UTF-8" ...
android 获取短信验证码倒计时
android 获取短信验证码倒计时 public class MainActivity extends Activity { private Button submit; privat ...
jquery短信验证码倒计时
jquery短信验证码倒计时 1. 演示点击前: 点击后: 2. 代码 1. HTML代码 <input type="button" value="获取验证码&q ...
短信验证码倒计时代码
功能:点击获取验证码,开始倒计时,按钮不能点击,倒计时结束后,恢复原来的样子,可以继续点击. html代码: <div class="input-item"><i ...
短信验证码接口测试案例
简单的验证码登录接口实例,用于初步窥探接口自动化测试,短信验证码与语音验证码能够成功,每一步都增加了必要的print信息,在控制台可以进行校验. 代码为实际某应用登录案例,实际情况以接口信息改变相应参 ...
安卓CountDownTimer实现全民夺宝抢购倒计时和短信验证码倒计时
在sina里看到了什么全民夺宝的链接,然后忍不住1元的诱惑被坑了10多块,什么都没有抽到,但是还是有人抽到了不知道是不是坑爹的,然后也就动手做一下倒计时的功能. 先看全民夺宝: 说起这个功能是不是感觉 ...
「实操」用node.js开发短信验证码登录的功能
今天给大家操作如何给网站增加短信验证码登录功能,实际操作非常简单,对照文档15分钟就可以完成接入. 需要准备资料有:登录页面(html页面).短信接口参数.服务端特别说明:因为闪速码接口支持个人.企 ...
android 验证码短信验证码,Android短信验证码倒计时验证的2种常用方式
前言本文主要介绍的是短信验证码功能,这里总结了两种常用的方式,可以直接拿来使用. 看图计时器说明:这里的及时从10开始,是为了演示的时间不要等太长而修改的. 方法如下 1.第一种方式:Time ...

利用JS实现短信验证码倒计时案例

一、程序代码

二、预览展示

利用JS实现短信验证码倒计时案例相关推荐

最新文章

热门文章