js精確到天的倒數計時效果

admin發表於2017-04-16
JS

分享一段程式碼例項，它實現了倒數計時效果。

適合於比較長日期的倒數計時效果，比如高考倒數計時，或者家假日倒數計時。

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#content {
  width: 320px;
  height: 100px;
  line-height: 100px;
  background: #eee;
  text-align: center;
  margin: 0 auto;
}
</style>
<script type="text/javascript">
var d = new Date();
var week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
var weeks = week[d.getDay()];
var a = d.getFullYear() + '年' + (d.getMonth() + 1) + '月' + d.getDate() + '日' + weeks;
</script>
</head>
<body>
<div id="content"></div>
<script type="text/javascript">
var paper = document.getElementById("content");
function getchaTime(title, intime) {
  var bsDate = new Date(intime);
  var date = new Date();
  var start = bsDate.getTime() - date.getTime();
  var startday = Math.floor(start / (1000 * 60 * 60 * 24)) + 1;
  if (startday > 0) {
    paper.innerHTML = a + "距" + title + startday + "</span>天";
  }
  else { }
};
getchaTime("2018年元旦", "1/1/2018");
</script>
</body>
</html>

上面的程式碼實現了我們的要求，更多內容可以參閱相關閱讀。

相關閱讀:

（1）.getFullYear()可以參閱javascript getFullYear()一章節。

（2）.getMonth()可以參閱javascript getMonth()一章節。

（3）.getDate()可以參閱javascript getDate()一章節。

（4）.document.getElementById()可以參閱document.getElementById()一章節。

（5）.Date()可以參閱js Date()建構函式一章節。

（6）.getTime()可以參閱javascript getTime()一章節。

（7）.Math.floor()可以參閱javascript Math.floor()一章節。

（8）.innerHTML可以參閱innerHTML一章節。

相關文章