買い占めカウントダウンの実現
13817 ワード
<html>
<head>
<meta charset="utf-8">
<style>
.timebox {
border: 1px pink solid;
width: 300px;
height: 50px;
text-align: center;
margin: 0 auto;
font-size: 20px;
line-height: 50px;
}
style>
head>
<body>
<div class="timebox">
：
<span>-- ：-- ：--span>
div>
body>
<script>
let timebox = document.querySelector(".timebox"),
timespan = document.querySelector("span");
function addZero(val) {
return val < 10 ? '0' + val : val;
}
/*
computeTime:
@params:[String timeStr]
@return：
*/
let computeTime = function (timeStr) {
if (typeof timeStr === "undefined") {
// let ， ；
var nowTime = new Date(); // ，
} else {
// ，
console.log(1);
}
let endTime = new Date('2019/8/16 18:00:00'),
diffTime = endTime - nowTime;
if (diffTime >= 0) {
let hours = Math.floor(diffTime / (1000 * 60 * 60));
diffTime = diffTime - hours * 3600000;
let minute = Math.floor(diffTime / (1000 * 60));
diffTime = diffTime - minute * 60000;
let second = Math.floor(diffTime / 1000);
timespan.innerHTML = `${addZero(hours)}:${addZero(minute)}:${addZero(second)}`;
return;
}
timespan.innerHTML = ' ';
};
setInterval(computeTime,1000);
script>
html>サーバによる時間取得の考え方:
1.リクエストヘッダの時間情報をAJAXリクエストで初めて取得し(xhr.readyState==2で、リクエスト全体の完了を待たずに)、グローバル変数で保存します.
2.次に要求を再度サーバに送信せず,computeTime関数を実行するたびに,サーバが返す時間であれば手動で行う時間の増加であるか否かを判断する.