时间正序
<body>
<div id="date"></div>
<script>
function addZero(num) {
return num < 10 ? "0" + num : num;
}//判断，若数字小于10则在开头加上0
function Time() {
var oDate = new Date();
var date = document.getElementById("date");
var str =
oDate.getFullYear() +
"年" +
addZero(oDate.getMonth() + 1) +
"月" +
addZero(oDate.getDate()) +
"日 " +
addZero(oDate.getHours()) +
":" +
addZero(oDate.getMinutes()) +
":" +
addZero(oDate.getSeconds());
date.innerHTML = str;
}
setInterval(Time, 1000);
</script>
</body>
时间跳动
时间倒序
<body>
<div id="date"></div>
<script>
function addZero(num) {
return num < 10 ? "0" + num : num;
}
function decTime(time) {
let date = document.getElementById("date");
let nDate = new Date(); //now 现在时间
let eDate = new Date(time); //end 目标时间
let decrease = eDate.getTime() - nDate.getTime();
let day, hour, min, s, result;
if (decrease >= 0) {
// Math.floor 对数进行下舍入 %取余数
day = addZero(Math.floor(decrease / 1000 / 60 / 60 / 24));
hour = addZero(Math.floor((decrease / 1000 / 60 / 60) % 24));
min = addZero(Math.floor((decrease / 1000 / 60) % 60));
s = addZero(Math.floor((decrease / 1000) % 60));
result = day + "天" + hour + "时" + min + "分" + s + "秒";
} else {
result = "时间已过";
}
date.innerHTML = "距目标时间还有：" + "<br>" + result;
}
// 在JS中无论是setTimeout还是setInterval，在使用函数名作为调用句柄时都不能带参数
setInterval(function () {
decTime("2020-12-28 8:00:00");//填入目标时间
}, 1000);
</script>
</body>
倒计时
数字改图片
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
img{
width: 50px;
}
</style>
</head>
<body>
<div id="date"></div>
<script>
function addZero(num) {
return num < 10 ? "0" + num : num;
}
// 数字改图片
function numPic(num) {
let result = String(num),
str = '';
for (let i = 0; i < result.length; i++) {
//charAt() 方法可返回指定位置(下标值)的字符。
switch (+result.charAt(i)) {
case 0:
str += '<img src="./images/0_002.png" />';
break;
case 1:
str += '<img src="./images/1_002.png" />';
break;
case 2:
str += '<img src="./images/2_002.png" />';
break;
case 3:
str += '<img src="./images/3_002.png" />';
break;
case 4:
str += '<img src="./images/4_002.png" />';
break;
case 5:
str += '<img src="./images/5_002.png" />';
break;
case 6:
str += '<img src="./images/6_002.png" />';
break;
case 7:
str += '<img src="./images/7_002.png" />';
break;
case 8:
str += '<img src="./images/8_002.png" />';
break;
case 9:
str += '<img src="./images/9_002.png" />';
break;
}
}
return str;
}
function decTime(time) {
let date = document.getElementById("date");
let nDate = new Date(); //now 现在时间
let eDate = new Date(time); //end 目标时间
let decrease = eDate.getTime() - nDate.getTime();
let day, hour, min, s, result;
if (decrease >= 0) {
// Math.floor 对数进行下舍入 %取余数
day = addZero(Math.floor(decrease / 1000 / 60 / 60 / 24));
hour = addZero(Math.floor((decrease / 1000 / 60 / 60) % 24));
min = addZero(Math.floor((decrease / 1000 / 60) % 60));
s = addZero(Math.floor((decrease / 1000) % 60));
result = numPic(day) + "天" + numPic(hour) + "时" + numPic(min) + "分" + numPic(s) + "秒";
} else {
result = "时间已过";
}
date.innerHTML = "距目标时间还有：" + "<br>" + result;
}
// 在JS中无论是setTimeout还是setInterval，在使用函数名作为调用句柄时都不能带参数
setInterval(function () {
decTime("2020-12-28 8:00:00");
}, 1000);
</script>
</body>
</html>
数字改图片
