无需申请自动送彩金68_白菜送彩金网站大全[无需申请秒送彩金]
做最好的网站
来自 无需申请自动 2019-07-14 06:01 的文章
当前位置: 无需申请自动送彩金68 > 无需申请自动 > 正文

基于JavaScript实现手机短信按钮倒计时,Ace模板实

在淘宝等购物网站,我们都会看到一个发送短信倒计时的按钮,究竟是如何实现的呢?下面我就给大家提供一段代码很实用的。

倒计时效果有着广泛的应用,比如奥运会倒计时、高考倒计时和放假倒计时等,本章节分享一个比较美观且实用的倒计时效果。

本文分享了项目中使用Ace模板的菜单样式和基于iframe的Tab页效果。

废话不多说了,直接给大家贴js代码了。

代码实例如下:

一、效果展示

 /*
 120秒手机短信按钮倒计时
 */
 exports.sendmessage = function (name) {
  var second = 120;
  $(name).attr("disabled", true);
  var color = $(name).css('background-color');
  $(name).attr("style", "background-color : #c1c1c1");
  function update(num) {
   if (num == second) {
    $(name).attr("style", "background-color : " color);
    $(name).text("获取验证码");
    $(name).attr("disabled", false);
   }
   else {
    var printnr = second - num;
    $(name).text(printnr   "秒后获取");
   }
  }
  function uupdate(i) {
   return function () {
    update(i);
   }
  }
  for (var i = 1; i <= second; i  ) {
   setTimeout(uupdate(i), i * 1000);
  }
 }
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>倒计时效果代码</title>
<style type="text/css">
* {
 padding:0;
 margin:0;
}
.colockbox {
 width:250px;
 height:30px;
 overflow:hidden;
 color:#000000;
 background:url(mytest/jQuery/colockbg.png) no-repeat;
 margin:0px auto;
}
.colockbox span {
 float:left;
 display:block;
 width:40px;
 height:29px;
 line-height:29px;
 font-size:20px;
 font-weight:bold;
 text-align:center;
 color:#ffffff;
 margin-right:22px;
}
</style>
<script type="text/javascript" src="http://www.xiaoyawx.com/uploads/allimg/190714/0601133V4-0.jpg"></script>
<script type="text/javascript"> 
$(function(){ 
 countDown("2016/2/3 6:30:59","#colockbox1"); 
}); 
function countDown(time,id){ 
 var day_elem=$(id).find('.day'); 
 var hour_elem=$(id).find('.hour'); 
 var minute_elem=$(id).find('.minute'); 
 var second_elem=$(id).find('.second'); 
 var end_time = new Date(time).getTime();
 var sys_second = (end_time-new Date().getTime())/1000; 
 var timer = setInterval(function(){ 
  if(sys_second>1) { 
   sys_second-=1; 
   var day=Math.floor((sys_second/3600)/24); 
   var hour=Math.floor((sys_second/3600)$); 
   var minute=Math.floor((sys_second/60)`); 
   var second=Math.floor(sys_second`); 
   $(day_elem).text(day);
   $(hour_elem).text(hour<10?"0" hour:hour);
   $(minute_elem).text(minute<10?"0" minute:minute); 
   $(second_elem).text(second<10?"0" second:second);
  } 
  else { 
   clearInterval(timer); 
  } 
 }, 1000); 
} 
</script>
</head>
<body>
<div class="colockbox" id="colockbox1"> 
 00 
 00 
 00 
 00 
</div>
</body>
</html> 

折腾了好久,终于将菜单样式和Tab页的效果从项目中抽出来了。

以上代码是本文给大家介绍的JavaScript实现手机短信按钮倒计时的全部叙述,希望大家喜欢。

以上代码实现了我们的要求,可以实现秒到天的倒计时效果,下面就介绍一下实现过程。

1、初始加载出来的效果

您可能感兴趣的文章:

  • JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
  • 点击按钮出现60秒倒计时的简单js代码(推荐)
  • js代码实现点击按钮出现60秒倒计时
  • JS自动倒计时30秒后按钮才可用(两种场景)
  • js实现点击注册按钮开始读秒倒计时的小例子
  • JS HTML5实现获取手机验证码倒计时按钮

一.实现原理:

图片 1

原理比较简单,就是取得到期时间的时间戳减去当前时间的时间戳,就是两者之间相差的秒数,然后通过这个秒数除以3600就是相差的小时数,然后再除以24,然后使用Math.floor()函数进行下舍入,就是相差的天数,下面获取小时、分钟和秒都是此原理。使用定时器函数每隔一秒调用一次相应的函数就实现了倒计时的效果。

2、展开菜单(支持多级展开,后面代码介绍)

二.代码注释:

图片 2

1.$(function(){}),当文档结构完全加载完毕再去执行函数中的代码。
2.countDown("2016/2/3 6:30:59","#colockbox1"),调用函数,第一个参数是到期的时间,第二个是div的id属性值。
3.function countDown(time,id){},声明此函数。
4.var day_elem=$(id).find('.day'),获取div下class属性值为day的对象。
5.var hour_elem=$(id).find('.hour'),获取div下class属性值为hour的对象。
6.var minute_elem=$(id).find('.minute'),获取div下class属性值为minute的对象。
7.var second_elem=$(id).find('.second'),获取div下class属性值为second的对象。
8.var end_time=new Date(time).getTime(),获取到期事件的时间戳。
9.var sys_second=(end_time-new Date().getTime())/1000,获取到期时间和当前时间相差的秒数。
10.var timer=setInterval(function(){},1000),每隔一秒执行一次函数。
11.if(sys_second>1) ,如果相差的秒大于1。
12.sys_second-=1,秒减一。
13.var day=Math.floor((sys_second/3600)/24),获取相差的天数。
14.var hour=Math.floor((sys_second/3600)$),获取相差的小时数,注意后面是取模运算。
15.var minute=Math.floor((sys_second/60)`),获取相差的分钟数。
16.var second=Math.floor(sys_second`),获取相差的秒数。
17.$(day_elem).text(day),将天写入span元素。
18.$(hour_elem).text(hour<10?"0" hour:hour),将小时写入span,如果小时数小于10,前面加0,后面同样的道理。
19.clearInterval(timer),如果相差的秒数到0,就停止计时器函数setInterval的执行。

图片 3

以上内容是小编给大家分享的基于jQuery实现美观且实用的倒计时实例代码,希望本文分享能够给大家带来帮助。

3、点击子菜单,以Tab页的形式打开对应的页面

您可能感兴趣的文章:

  • jquery实现的判断倒计时是否结束代码
  • jquery实现倒计时功能
  • JQuery实现的按钮倒计时效果
  • jquery简单倒计时实现方法
  • jQuery倒计时代码(超简单)

图片 4

4、支持菜单折叠

图片 5

5、打开的菜单过多时自动换行显示,折叠后自适应

本文由无需申请自动送彩金68发布于无需申请自动,转载请注明出处:基于JavaScript实现手机短信按钮倒计时,Ace模板实

关键词: