<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>计时器</title>
<style>
#wrap{
width: 300px;
height: 100px;
margin:50px auto;
background: red;
}
.red{
color: red;
}
.green{
color: green;
}
#time_clover{
font-size:26px;
}
h5{
margin:0;
padding:0;
font-weight:normal;
}
</style>
</head>
<body>
<div style="width:100%;text-align:center;">
<div id="wrap"></div>
<p id="time_clover">
</p>
</div>
</body>
</html>
<script>
let tc = 8, th = 18, tm = 16, ts =20;
let el = document.getElementById('time_clover');
let wrap = document.getElementById('wrap');
function startTime(control_ti,control_h,control_m,control_s){
let today = new Date();
let y = today.getFullYear();
let mo = today.getMonth()+1;
let d = today.getDate();
let h = today.getHours();
let m = today.getMinutes();
let s = today.getSeconds();
let ms = today.getMilliseconds();
let ti = Math.floor(ms/100);
h = checkTime(h);
m = checkTime(m);
s = checkTime(s);
el.innerHTML= `
<h5>${y}-${mo}-${d}</h5>
<h5>${h}-${m}-${s}</h5>
<h5>${ti}</h5>
`
if(ti===control_ti&&h===control_h&&m===control_m&&s<control_s){
el.classList.add("green");
el.classList.remove("red");
wrap.style.background = "green";
}
if(h===control_h&&m===control_m&&s>=control_s){
el.classList.remove("green");
el.classList.add("red");
wrap.style.background = "red";
}
setInterval(()=>{
startTime(tc,th,tm,ts);
},100)
}
function checkTime(i){
if(i<10){
i = 0+i;
}
return i
}
startTime(tc,th,tm,ts);
</script>
网友评论