js如何实现简易倒计时效果

红太狼 2020-06-06 19:11 850阅读 0赞

js如何实现简易倒计时效果

实现倒计时功能首先是得到目标时间,然后用当前时间减去目标时间,最后将时间差传化为天数、时、分、秒。由于得到的时间不能直接运算,可以采用object.getTime()方法转化成相同类型进行运算。

相关说明:

如果想要显示界面好看些,可以添加一下样式。

  1. <script>
  2. function show(){
  3. //获取目的日期
  4. var myyear=document.getElementById("year").value;
  5. var mymonth=document.getElementById("month").value-1;
  6. var myday=document.getElementById("day").value;
  7. var myhour=document.getElementById("hour").value;
  8. var myminute=document.getElementById("minute").value;
  9. var mysecond=document.getElementById("second").value;
  10. var time=Number(new Date(myyear,mymonth,myday,myhour,myminute,mysecond));
  11. // var time=new Date(myyear,mymonth,myday,myhour,myminute,mysecond).getTime();
  12. //获取当前时间
  13. var nowTime=Date.now();
  14. // var nowTime=new Date().getTime();
  15. //获取时间差
  16. var timediff=Math.round((time-nowTime)/1000);
  17. //获取还剩多少天
  18. var day=parseInt(timediff/3600/24);
  19. //获取还剩多少小时
  20. var hour=parseInt(timediff/3600%24);
  21. //获取还剩多少分钟
  22. var minute=parseInt(timediff/60%60);
  23. //获取还剩多少秒
  24. var second=timediff%60;
  25. //输出还剩多少时间
  26. document.getElementById("1").innerHTML=day;
  27. document.getElementById("2").innerHTML=hour;
  28. document.getElementById("3").innerHTML=minute;
  29. document.getElementById("4").innerHTML=second;
  30. setTimeout(show,1000);
  31. if(timediff==0){return;}
  32. }
  33. </script>

  1. <head>
  2. <meta charset="UTF-8">
  3. <title>Document</title>
  4. <style>
  5. input{width:50px;height: 20px;border:1px solid black;}
  6. .time1 span{display:inline-block;width:40px;height: 20px;}
  7. </style>
  8. </head>
  9. <body>
  10. <form>目的日期:
  11. <input type="text" id="year"><span></span>
  12. <input type="text" id="month"><span></span>
  13. <input type="text" id="day"><span></span>
  14. <input type="text" id="hour"><span></span>
  15. <input type="text" id="minute"><span></span>
  16. <input type="text" id="second"><span></span>
  17. <input type="button" value="确定" οnclick="show()">
  18. </form>
  19. <div class="time1">还剩时间:
  20. <span id="1"></span>
  21. <span id="2"></span>
  22. <span id="3"></span>
  23. <span id="4"></span>
  24. </div>

倒计时的难点主要是时间格式和数字格式的转换,转换时除了object.getTime()方法还有Number(object)方法。

发表评论

表情:
评论列表 (有 0 条评论,850人围观)

还没有评论,来说两句吧...

相关阅读

    相关 js如何实现简易计时效果

    js如何实现简易倒计时效果 实现倒计时功能首先是得到目标时间,然后用当前时间减去目标时间,最后将时间差传化为天数、时、分、秒。由于得到的时间不能直接运算,可以采用obje...