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 ...
随机推荐
- 多线程(11) — NIO
Java NIO是new IO的简称,是一种可以替代Java IO的一套新的IO机制.它提供了一套不同于Java标准IO的操作机制,严格来说,NIO与并发并无直接关系,但是使用NIO技术可以大大提高线 ...
- WUSTOJ 1307: 校门外的树(Java)
题目链接:
- golang开发:环境篇(五)实时加载工具gin的使用
gin 工具是golang开发中非常有用且有效的工具,有效的提高了开发调试go程序的效率. 为什么要使用gin 我们知道golang是编译型语言,这就表示go程序的每次改动,如果需要查看改动结果都必须 ...
- 使用winsw将springboot打包的jar注册系统本地服务
1.下载winsw 下载地址:https://github.com/kohsuke/winsw/releases 我这里下载的是2.3.0版. 下载sample-minimal.xml和WinSW.N ...
- springMVC关于异常优先级的处理
优先级 既然在SpringMVC中有两种处理异常的方式,那么就存在一个优先级的问题: 当发生异常的时候,SpringMVC会如下处理: (1)SpringMVC会先从配置文件找异常解析器Handler ...
- Thread.interrupt()源码跟踪
1 JDK源码跟踪 // java.lang.Thread public void interrupt() { if (this != Thread.currentThread()) checkAcc ...
- winserver2012远程桌面进入只有CMD窗口,无桌面解决方法
原因:.net framework4.5是Windows server图形化界面的基础,系统还原时只装了核心模式core,系统没有了图形界面当然只有cmd了 解决方法:使用dism命令需要将核心模 ...
- Python查看模块
1.查看Python所有内置模块 按以下链接打开,每个模块有介绍,可以选择不同的版本 https://docs.python.org/3.6/library/index.html 2.查看Python ...
- java第一次笔试+面试总结
今天是自己第一次java笔试和面试,总体感觉比预期好一点. 笔试题第一面是问答题,主要考查java基础,一共有18题,我有6道题没有写出来.第二面主要是算法题,一共有8道题,我大概写出来4道题,第三面 ...
- Android NDK 学习之在C中抛出异常
本博客主要是在Ubuntu 下开发,且默认你已经安装了Eclipse,Android SDK, Android NDK, CDT插件. 在Eclipse中添加配置NDK,路径如下Eclipse-> ...