2020-3-22

放羊的星星，，

于 2020-03-23 03:12:48 发布

阅读量104

点赞数

本文链接：https://blog.csdn.net/weixin_44849258/article/details/105040299

版权

题目一：
JavaScript 天小时分钟和秒倒计时
代码与解析：

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css">
*{
  margin:0;
  padding:0;
  list-style:none;
}
body{
  font-size:18px;
  text-align:center;
}
.time{
  height:30px;
  padding:200px;
}
</style>
<script type="text/javascript">
function GetRTime(){//此函数实现了倒计时效果。
  var EndTime= new Date('2022/3/20 09:03:00');
  var NowTime = new Date();
  var t =EndTime.getTime() - NowTime.getTime();//获取终点时间和当前时间的毫秒差距。
  var d=0;//声明一个变量并初始化为0，用来标识倒计时剩余的天，下面几个变量也是同样的道理。
  var h=0;
  var m=0;
  var s=0;
  if(t>=0){//判断毫秒差是否大于等于0，如果是，则继续倒计时效果。
    d=Math.floor(t/1000/60/60/24);//获取剩余的天数。
    h=Math.floor(t/1000/60/60%24);//获取剩余的小时，当然这里所说的剩余的小时并不是总的剩余的小时数，而是在分钟这个时间单位上的小时整数，下面的分钟秒等也是同样的道理。
    m=Math.floor(t/1000/60%60);
    s=Math.floor(t/1000%60);
  }
  else{
    clearTimeout(timer);//如果倒计时结束，那么就结束定时器函数的执行，并跳出此函数。
    return;
  }
  document.getElementById("t_d").innerHTML = d + "天";//显示倒计时相关的内容，下面也是同样的道理。
  document.getElementById("t_h").innerHTML = h + "时";
  document.getElementById("t_m").innerHTML = m + "分";
  document.getElementById("t_s").innerHTML = s + "秒";
  var timer=setTimeout(GetRTime,1000);//利用回调的方式不断调用GetRTime函数本身。
}
window.onload=function(){
  GetRTime()
}
</script>
</head>
<body>
<div class="time"> 
  <span id="t_d">00天</span> 
  <span id="t_h">00时</span> 
  <span id="t_m">00分</span> 
  <span id="t_s">00秒</span> 
</div>
</body>
</html>

相关知识：
Math.floor()可以对一个数字进行下舍入操作。返回值是小于等于参数，并与之最接近的整数。

getTime方法返回指定时间日期的时间戳。

setTimeout 此方法可以延迟指定时间再去执行规定的代码。
格式：setTimeout(code,interval)
参数解析:
（1）.code：必需，延迟指定时间后要执行的代码。
（2）.interval：必需，规定要延迟的时间，单位是毫秒。

放羊的星星，，

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-3-22

题目一：JavaScript 天小时分钟和秒倒计时代码与解析：<!DOCTYPE html><html><head><meta charset=" utf-8"><style type="text/css">*{ margin:0; padding:0; list-style:none;}body{ f...
复制链接

扫一扫