js倒计时展现实例,无视页面刷新

永利402com官方网站

话十分的少说,请看实例代码

永利402com官方网站,有关阅读:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js倒计时显示-细数逝去的过往</title>
<style type="text/css">
#clock {
font: bold 24pt sans;
background-color: #f5f5f5;
padding: 10px 15px;
border: 1px solid #ccc;
border-radius: 5px;
}
.demo {
position: absolute;
margin-left: 40%;
margin-top: 40%;
}
</style>
</head>
<body>
<div class="demo">
<center>
<h1>下班倒计时显示</h1>
</center>

</div>
<script>
function displayTime() {
var elt = document.getElementById("clock");
if(leftTime < 0) {
elt.innerHTML = "Over";
} else {
var endTime = new Date("2016/11/21 18:00:00");
var now = new Date();
var leftTime = endTime.getTime() - now.getTime();
var ms = parseInt(leftTime % 1000).toString();
leftTime = parseInt(leftTime / 1000);
var o = Math.floor(leftTime / 3600);
var d = Math.floor(o / 24);
var m = Math.floor(leftTime / 60 % 60);
var s = leftTime % 60;
elt.innerHTML = o + "小时:" + m + "分:" + s + "秒:" + ms.charAt(0);
setTimeout(displayTime, 100);
}
}
displayTime();
</script>
</body>
</html>

典故jQuery实现发送短信验证码后的倒计时功用(无视页面关闭)

以上就是本文的全体内容,希望本文的剧情对我们的学习大概办事能拉动一定的援救,同一时候也期望多多匡助脚本之家!

上边一段代码是小编给大家带来的js发送短信验证码后完成倒计时功用,代码轻松易懂。

您或许感兴趣的稿子:

  • JS达成倒计时(天数、时、分、秒)
  • PHP+JS达成的商品秒杀倒计时用法示例
  • js完结倒计时及时间对象
  • JS达成基于用户输入分钟举办倒计时效用
  • JS完毕用户注册时收获短信验证码和倒计时成效
  • js制作支付倒计时页面
  • JS达成表单验证功用(验证手提式有线电电话机号是不是存在,验证码倒计时)
  • 最完美的JS倒计时期码
  • js发送短信倒计时的归纳实现格局
  • 据说JS完毕殡葬短信验证码后的倒计时效用(无视页面刷新,页面关闭不开始展览倒计时功用)

具体代码如下所示:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>
<script src="http://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<!-- <script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>-->
</head>
<body>
<input id="phonenum" type="text" value="18518181818"/>
<input id="second" type="button" value="免费获取验证码" />
</body>
<script>
//发送验证码时添加cookie
function addCookie(name,value,expiresHours){ 
//判断是否设置过期时间,0代表关闭浏览器时失效
if(expiresHours>0){ 
var date=new Date(); 
date.setTime(date.getTime()+expiresHours*1000); 
$.cookie(name, escape(value), {expires: date});
}else{
$.cookie(name, escape(value));
}
} 
//修改cookie的值
function editCookie(name,value,expiresHours){ 
if(expiresHours>0){ 
var date=new Date(); 
date.setTime(date.getTime()+expiresHours*1000); //单位是毫秒
$.cookie(name, escape(value), {expires: date});
} else{
$.cookie(name, escape(value));
}
} 
//根据名字获取cookie的值
function getCookieValue(name){ 
return $.cookie(name);
}
$(function(){
$("#second").click(function (){
sendCode($("#second"));
});
v = getCookieValue("secondsremained");//获取cookie值
if(v>0){
settime($("#second"));//开始倒计时
}
})
//发送验证码
function sendCode(obj){
var phonenum = $("#phonenum").val();
var result = isPhoneNum();
if(result){
// doPostBack('${base}/login/getCode.htm',backFunc1,{"phonenum":phonenum});
addCookie("secondsremained",60,60);//添加cookie记录,有效时间60s
settime(obj);//开始倒计时
}
}
//开始倒计时
var countdown;
function settime(obj) { 
countdown=getCookieValue("secondsremained");
if (countdown == 0) { 
obj.removeAttr("disabled"); 
obj.val("免费获取验证码"); 
return;
} else { 
obj.attr("disabled", true); 
obj.val("重新发送(" + countdown + ")"); 
countdown--;
editCookie("secondsremained",countdown,countdown+1);
} 
setTimeout(function() { settime(obj) },1000) //每1000毫秒执行一次
} 
//校验手机号是否合法
function isPhoneNum(){
var phonenum = $("#phonenum").val();
var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; 
if(!myreg.test(phonenum)){ 
alert('请输入有效的手机号码!'); 
return false; 
}else{
return true;
}
}
</script>
</html>

如上所述是笔者给大家介绍的基于JS达成发送短信验证码后的倒计时作用(无视页面刷新,页面关闭不实行倒计时功用),希望对大家有着帮助,假设我们有别的疑问请给自己留言,作者会及时苏醒我们的。在此也非常谢谢大家对台本之家网址的补助!

您也许感兴趣的稿子:

  • 微信小程序注册60s倒计时成效使用JS完成登记60s倒计时功用
  • js完成短信发送倒计时成效(正则验证)
  • js实现5秒倒计时重新发送短信功能
  • JS达成用户注册时获得短信验证码和倒计时功效
  • js发送短信倒计时的简约完结格局
  • JavaScript兑现短信倒计时60s

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图