>以上是一个网页计时器

源代码如下:

HTML

1
2
3
<div id="timebox" class="">
<span id="time"></span>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
<style>
#timebox{
background-color: #d0f4ca;
width: 25em;
height:1.5em;
padding: 0.75em 0.75em 0.75em 1.75em;
border-radius: 20px;
transition: all .3s;
font-weight: 800;
color: #5f5f5f;
}
</style>

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
var t1="2021/05/20 00:00:00"; //起始日期
var dateBegin = new Date(t1);
var time=document.getElementById("time");
function getnewtime(){
let dateEnd = new Date();//现在日期
let dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
let dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
let leave1 = dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
let hours = (Array(2).join(0) + Math.floor(leave1/(3600*1000))).slice(-2)//计算出小时数
let leave2 = leave1%(3600*1000) //计算小时数后剩余的毫秒数
let minutes = (Array(2).join(0) + Math.floor(leave2/(60*1000))).slice(-2)//计算相差分钟数
let leave3 = leave2%(60*1000) //计算分钟数后剩余的毫秒数
let seconds = (Array(2).join(0) + Math.round(leave3/1000)).slice(-2)
time.innerText=("这片土地已经被尘埃覆盖了"+dayDiff+"天"+hours+"小时"+minutes+"分"+seconds+"秒");
}
window.onload=function(){
setInterval("getnewtime()",1000);
}
</script>

Blank doesn't mean nothing.
作者: 心尘