当前位置:首页 >> JavaScript>>正文

Jquery实现简单的自定义时间倒计时器

栏目:JavaScript时间:2017-12-21热度:

今天写了一个能够自定义选择时间的倒计时器,开始打算自己写下拉菜单选择时间的,但是要做到万年日历菜单联动太复杂了,想着网上应该能够找到这样的时间选择器插件,尝试了几个以后最终选定了这个名为“layDate”的时间选择插件。用起来还是很简单的,想详细了解的可以去研究研究。

原理:

getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。通过计算用户自定义时间的getTime()和当前时间的getTime()之差就能获取这两个时间相差的毫秒数,再经过简单运算后就可以获取到具体的天、小时、分、秒。

知识点:

new Date()

.getTime()

样式:

<style>
body{padding:0;margin:0px;}
.main{width:440px;margin:80px auto 0;border:1px solid #dfdfdf;padding:30px;overflow:hidden;}
.main h2{width:440px;text-align:center;line-height:30px;height:30px;margin:0 0 25px 0;}
.layui-input{width:300px;padding-left: 10px; height: 38px; min-width: 262px; line-height: 38px; border: 1px solid #e6e6e6;  background-color: #fff;  border-radius: 2px;margin:0 auto 10px;clear:both;display:block;}
#star{clear:both;display:block;margin:0 auto;}
#dao{width:440px;margin:30px 0 0;overflow:hidden;}
#dao .dao-t{float:left;text-align:center;width:100%;margin-bottom:20px;}
#dao .dao-n{float:left;clear:left;color:red;font-size:30px;text-align:center;width:100%;font-weight:bolder;}
</style>

网页元素:

<div class="main">
<h2>请选择要倒计时的时间</h2>
<input type="text" class="layui-input" id="myTime" placeholder="yyyy-MM-dd HH:mm:ss">
<input type="button" value="开始" id="star">
<div id="dao" style="display:none;">
<span class="dao-t"></span>
<span class="dao-n"></span>
</div>
</div>

js代码:

<script>
$(document).ready(function(){
laydate.render({elem:'#myTime',type:'datetime',format:'yyyy-MM-dd H:m:s'});//引入外置的时间选择器,语法以插件为准
var dao=$('#dao');
$('#star').click(function(){
//判断用户选择的时间是否为空
if($('#myTime').val()==""){
alert("请选择要倒计时的时间");
}
else{
dao.css("display","block");
sh=setInterval(FreshTime,1000);
}
});
function FreshTime()
{
  var myTime = new Date($('#myTime').val()).getTime();//将字符串转化为date格式
  var nowtime = new Date();
  var lefttime=parseInt((myTime-nowtime.getTime())/1000); 
  d=parseInt(lefttime/3600/24);
  h=parseInt((lefttime/3600)%24);
  m=parseInt((lefttime/60)%60);
  s=parseInt(lefttime%60);
  dao.find('.dao-t').html("距离您选择的 "+$('#myTime').val()+" 还有:");
  dao.find('.dao-n').html(d+"天"+h+"小时"+m+"分"+s+"秒");
  if(lefttime<=0){
  dao.find('.dao-t').html("倒计时已经结束!");
  clearInterval(sh);
}
}
})
</script>


效果演示


相关文章

热门标签