Javascript

【js效果】倒计时

本文主要是介绍【js效果】倒计时，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！


目录

  • 节日倒计时
    • 方法一
    • 方法二
  • 60s倒计时


节日倒计时

方法一

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>倒计时</title>
  <style>
    *{
      margin: 0;
      padding:0;
    }
    p {
      font-size: 80px;
      text-align: center;
    }
    p span {
      color: red;
    }
    p span.time {
      color: black
    }
    body{padding-top:200px;}
  </style>
</head>
<body>
<p>距离2021年还有</p>
<p><span></span></p>
<script>
  var oSpan = document.getElementsByTagName('span')[0];
  function tow(n) {
    return n >= 0 && n < 10 ? '0' + n : '' + n;
  }
  function getDate() {
    var oDate = new Date();//获取日期对象
    var oldTime = oDate.getTime();//现在距离1970年的毫秒数
    var newDate = new Date('2021/1/28 00:00:00');
    var newTime = newDate.getTime();//2021年距离1970年的毫秒数
    var second = Math.floor((newTime - oldTime) / 1000);//未来时间距离现在的秒数
    var day = Math.floor(second / 86400);//整数部分代表的是天；一天有24*60*60=86400秒 ；
    second = second % 86400;//余数代表剩下的秒数；
    var hour = Math.floor(second / 3600);//整数部分代表小时；
    second %= 3600; //余数代表 剩下的秒数；
    var minute = Math.floor(second / 60);
    second %= 60;
    var str = tow(day) + '<span class="time">天</span>'
        + tow(hour) + '<span class="time">小时</span>'
        + tow(minute) + '<span class="time">分钟</span>'
		+ tow(second) + '<span class="time">秒</span>';

		console.log( tow(day))
		if(tow(day) > 1){
			oSpan.innerHTML = str;
		}
		else if(tow(day) == 1){
			oSpan.innerHTML = '只有2天啦！'
		}
		else if(tow(day) == 0){
			oSpan.innerHTML = '只有1天啦！'
		}
		else{
			oSpan.innerHTML = '已经过了'
		}
    // oSpan.innerHTML = str;
  }
  getDate();
  setInterval(getDate, 1000);
</script>
</body>
</html>

方法二

参考：https://www.lanrenzhijia.com/others/10131.html

 <div class="timecounter">
     <span id="t_d"></span>
     <span id="t_h"></span>
     <span id="t_m"></span>
     <span id="t_s"></span>
</div>
<script type="text/javascript">
function getRTime() {
	var EndTime = new Date("2020/01/01 00:00:00"); //截止时间
	var NowTime = new Date();
	var t = EndTime.getTime() - NowTime.getTime();
	var d = Math.floor(t / 1000 / 60 / 60 / 24);
	var h = Math.floor(t / 1000 / 60 / 60 % 24);
	var m = Math.floor(t / 1000 / 60 % 60);
	var s = Math.floor(t / 1000 % 60);

	document.getElementById("t_d").innerHTML = d + " 天";
	document.getElementById("t_h").innerHTML = h + " 时";
	document.getElementById("t_m").innerHTML = m + " 分";
	document.getElementById("t_s").innerHTML = s + " 秒";
}
setInterval(getRTime, 1000);
</script>

60s倒计时

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>60s倒计时</title>
</head>

<body>
    <input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" />
    <script type="text/javascript">
        var countdown = 60;
        function settime(val) {
            if (countdown == 0) {
                val.removeAttribute("disabled");
                val.value = "免费获取验证码";
                countdown = 60;
            } else {
                val.setAttribute("disabled", true);
                val.value = "重新发送(" + countdown + ")";
                countdown--;
            }
            setTimeout(function () {
                settime(val)
            }, 1000)
        } 
    </script>
</body>

</html>
这篇关于【js效果】倒计时的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航