ホームページ > 記事 > ウェブフロントエンド > jsはカウントダウンと時間オブジェクトを実装します

jsはカウントダウンと時間オブジェクトを実装します

高洛峰オリジナル: 2017-01-04 09:45:531403ブラウズ

カウントダウン効果を実装する JS コードは次のとおりです。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>h
<style>
#box {
 width: 100%;
 height: 400px;
 background: black;
 color: #fff;
 font-size:40px;
 line-height:400px;
 text-align:center;
}
</style>
<script>
window.onload = function(){
 var oBox = document.getElementById(&#39;box&#39;);
 var oDate = new Date();//获取当前时间;
 oDate.setFullYear(2016,11,31);//自动进位；
 oDate.setHours(0,0,0,0);
 
 function countDown(){
  //未来时间戳减去现在时间的时间戳;
  var ms = oDate.getTime() - new Date().getTime();
 
  //毫秒转换成秒
  var oSec = parseInt(ms/1000);
 
  //秒转换成天
  var oDay = parseInt(oSec/86400);
 
  //不到一天剩下的秒数;
  oSec%=86400;
 
  //转换成小时
  var oHour = parseInt(oSec/3600);
 
  //不到一小时剩下的秒数;
  oSec%=3600;
 
  //转换成分钟
  var oMin = parseInt(oSec/60);
 
  //不到一分钟剩下的秒数;
  oSec%=60;
 
  oBox.innerHTML = &#39;距离2016年12月31日还有:&#39;+oDay+&#39;天&#39;+oHour+&#39;时&#39;+oMin+&#39;分&#39;+oSec+&#39;秒&#39;;
 } 
 countDown();
 setInterval(countDown,1000);
}
</script>
</head>
 
<body>
<div id="box">距离2016年12月31日还有:xx天xx时xx分xx秒</div>
</body>
</html>

実装効果は次のとおりです。

jsはカウントダウンと時間オブジェクトを実装します

タイムスタンプ: 1970 年 1 月からのミリ秒数: oDate.getTime();なぜ今が 1970 年 1 月なのか聞いてください。百度に行ってみよう！
時間オブジェクト:

取得時間:

var oDate = new Date();
oYear = oDate.getFullYear();
oMon = oDate.getMonth();
oDay = oDate.getDate();
oHou = oDate.getHours();
oMin = oDate.getMinutes();
oSec = oDate.getSeconds();
oWeek = oDate.getDay();

設定時間:

oDate.setFullYear(年,月,日);
oDate.setMonth(月);
oDate.setDate(日);
oDate.setHours(时,分,秒,毫秒);
时间会自动进位;

以上です。まだまだ足りないところがたくさんありますので、皆様からもっと貴重なご意見をいただければ幸いです。お互いから学びましょう！お互いから学びましょう！

カウントダウンと時間オブジェクトの js 実装に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：json オブジェクトのプロパティを走査し、プロパティを動的に追加する実装次の記事：json オブジェクトのプロパティを走査し、プロパティを動的に追加する実装

続きを見る

jsはカウントダウンと時間オブジェクトを実装します

関連記事