search

Home >Web Front-end >JS Tutorial >JS implements countdown (days, hours, minutes, seconds)

JS implements countdown (days, hours, minutes, seconds)

高洛峰
高洛峰Original
2016-12-06 15:42:092299browse

The example in this article analyzes the detailed process of implementing countdown in JS for your reference. The specific content is as follows

Note:
parseInt() function can parse a string and return an integer.
Syntax:
parseInt(string, radix)

Example: 

parseInt("10"); //返回 10
parseInt("19",10); //返回 19 (10+9)
parseInt("11",2); //返回 3 (2+1)
parseInt("17",8); //返回 15 (8+7)
parseInt("1f",16); //返回 31 (16+15)
parseInt("010"); //未定：返回 10 或 8

Implement countdown code

html code: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>JS实现倒计时(天数,时,分,秒)</title>
  
</head>
<body onload="leftTimer()">
  
<h2>剩余时间:</h2>
<div id="timer"></div>
</body>
</html>

javascript code: 

<script language="javascript" type="text/javascript">
function leftTimer(year,month,day,hour,minute,second){
 var leftTime = (new Date(year,month-1,day,hour,minute,second)) - (new Date()); //计算剩余的毫秒数
 var days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10); //计算剩余的天数
 var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //计算剩余的小时
 var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟
 var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
 days = checkTime(days);
 hours = checkTime(hours);
 minutes = checkTime(minutes);
 seconds = checkTime(seconds);
 setInterval("leftTimer(2016,11,11,11,11,11)",1000);
 document.getElementById("timer").innerHTML = days+"天" + hours+"小时" + minutes+"分"+seconds+"秒";
}
function checkTime(i){ //将0-9的数字前面加上0，例1变为01
 if(i<10)
 {
  i = "0" + i;
 }
 return i;
}
  
</script>

Achieved effect:

JS implements countdown (days, hours, minutes, seconds)

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Removal and retention of iframe scroll bars in JavaScriptNext article：Removal and retention of iframe scroll bars in JavaScript

Related articles

See more