js实现发送验证码倒计时效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#btnyzm {
background: #31BCFF;
color: #fff;
font-size: 14px;
padding: 0;
line-height: 43px;
border-radius: 0;
border: 0;
width: 50%;
}
.btn_com:disabled {
background-color: #999999 !important;
}
</style>
</head>
<body>
<input type="button" class="btn_com" id="btnyzm" value="发送验证码">
<script type="text/javascript">
var wait=60;
function time(o) {
if (wait == 0) {
o.removeAttribute("disabled");
o.value="发送验证码";
wait = 60;
} else {
o.setAttribute("disabled", true);
o.value="(" + wait + ")后可重新发送";
wait--;
setTimeout(function() {
time(o)
}, 1000)
}
}
document.getElementById("btnyzm").onclick=function(){time(this);} </script> </body>
</html>
效果实现图
补充重点:
实现过程中发现pc和安卓手机上完美显示,但是iphone上却毫无反应,甚至没有任何波澜。(或者想告诉我它是多么的高冷?)
定位代码,发现问题出现在时间处理的方式上:
为了比较两个时间点的大小和控制距离,我用new Date().getTime()来获取毫秒数,比较毫秒数。
2012-2-22 06:23 这是我得到的时间格式,理所当然
new Date("2012-2-22 06:23 ").getTime();这样得到就是所指定时间的毫秒数,完美!
嗯,在pc上和安卓手机上一切正常,但是iphone上告诉我-----invalid Date
new Date("2012-2-22 06:23 ")返回的是invalid Date
难道是不支持这种日期格式?于是我就改为new Date("2012/2/22 06:23 "),
可以,很强。返回了正确的对象。
于是我试着这样 new Date("2012","2","22","06","23"),ok,没问题,返回了正确的对象。
这样 new Date(2012/2/22),ok,没问题,返回了丨
js实现发送验证码倒计时效果的更多相关文章
- jQuery实现的手机发送验证码倒计时效果代码分享
这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需 ...
- js&jq 发送验证码倒计时
<input type="text" name='' id="btn"> //发送验证码倒计时var wait=30; function t ...
- js实现发送验证码倒计时按钮
在写注册页面时,有时候需要发送注册邮件来获取验证码,但是为了防止多次重复发送邮件, 必须让按钮隔一段时间后才能再次使用. 代码如下: <html> <head> <met ...
- Andorid实现点击获取验证码倒计时效果
这篇文章主要介绍了Andorid实现点击获取验证码倒计时效果,这种效果大家经常遇到,想知道如何实现的,请阅读本文 我们在开发中经常用到倒计时的功能,比如发送验证码后,倒计时60s再进行验证码的获取 ...
- react native中的聊天气泡以及timer封装成的发送验证码倒计时
今天看来情书写的文章,研究了一下大佬写的文章,自己做一点总结. 其实,今天我想把我近期遇到的坑都总结一下:1.goBack的跨页面跳转,又两种方法,一可以像兔哥那样修改navigation源码,二可以 ...
- 原生 JS 实现手机验证码倒计时
可以使用 pointer-events 来阻止元素成为鼠标事件的 target.html5 新增操作元素 class 类名的方式 classList. classList 方法 add(value): ...
- js 发送验证码倒计时
首先写一个按钮: <input type="button" id="btn" value="免费获取验证码" onclick=&quo ...
- 手机验证 发送验证码倒计时js
html: <input name="Tel" class="weui-input" type="tel" placeholder=& ...
- 倒计时,短信发送后倒计时效果js
<div class="input-group-addon"><a style="width: 100%;height: 100%" href ...
随机推荐
- [.Net] 一句话Linq(递归查询)
功能查询起止日期范围内连续的月份列表. /* Period */ cbxPeriod.DataSource = Enumerable.Range(, ).Select(t => DateTime ...
- Python--对list、tuple、dict的操作
一.List(列表) 首先,创建一个简单的list: animal = ['cat','dog','lion','tiger'] (1) 用索引的方式访问list中的元素:animal[0] 当索引从 ...
- python第一天---我要入个门
""" 一个用户登录的案例 """ # 永远等待,直到用户输入值 # 变量 name_r = input("请输入用户名" ...
- EXCEL 快捷键大全
1.ctrl+tab :快速切换已打开的excel/ppt/word同样适用 2.shift+右上角的× :关闭所有excel/ppt/word 3.ctrl+d:快速复制非文本目标,对于文本是删除 ...
- 使用vue和drf后台进行登录页面和注册页面(本文大概的疏通一下前后台是怎么交互的)
注册页面 先从vue页面开始,下面是举例的vue页面截图 从上面的截图我们可以看到一些vue的指令:v-model和v-on(缩写成@) v-model是表单指令:就是获取属性值,在这里就是这些输入框 ...
- SQL 多并发 多人取号,防止重复取号SQL 办法
BEGIN TRAN SELECT * from 表明 WITH(HOLDLOCK) UPDATE 表名 SET 值=1 WHERE 字段=@carrierNo; ...
- python之爬取小说
继上一篇爬取小说一念之间的第一章,这里将进一步展示如何爬取整篇小说 # -*- coding: utf- -*- import urllib.request import bs4 import re ...
- kvm第五章--虚拟迁移
- 【转载】Sqlserver使用Right函数从最右边向前截取固定长度字符串
在SQL语句查询过程中,Sqlserver支持使用LEFT().RIGHT().SUBSTRING()等几个函数对字符串进行截取操作,其中Left函数表示从开始字符向后截取多少个字符,Right函数表 ...
- element table中使用el-select
效果: 然后看代码: 注意事项: el-select的v-model要和option的value值对应,注意是string还是number类型哦- 此文转载别人