直接上代码
<!DOCTYPE html>
<html lang="zh-CN">
<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>
* {
padding: 0;
margin: 0;
}
div {
width: 138px;
margin: 100px auto;
}
span {
display: inline-block;
width: 40px;
height: 50px;
margin-right: 6px;
font-size: 20px;
color: rgb(255, 255, 255);
background-color: black;
border-radius: 4px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div>
<span class="shi">1</span><span class="fen">2</span><span class="miao">3</span>
</div>
<script>
// 获取时分秒的盒子
let shi = document.querySelector('.shi');
let fen = document.querySelector('.fen');
let miao = document.querySelector('.miao');
let inputTime = +new Date('2021-10-25 00:00:00'); //用户输入的
function daojishi() {
let nowTime = +new Date(); //得到现在的秒
let timer = (inputTime - nowTime) / 1000; //还有多少秒
let h = parseInt(timer / 60 / 60 % 24);//得到剩余的小时数
h = h < 10 ? '0' + h : h;
let m = parseInt(timer / 60 % 60); //得到剩余的分钟
m = m < 10 ? '0' + m : m;
let s = parseInt(timer % 60); //得到剩余的秒
s = s < 10 ? '0' + s : s;
shi.innerHTML = h;
fen.innerHTML = m;
miao.innerHTML = s;
}
// setInterval(daojishi, 1000);
daojishi();
setInterval(daojishi, 1000);
</script>
</body>
</html>
chrome显示效果
safari显示效果
找了半天,不知道是什么原因导致,希望各位大哥能帮帮忙解答一下,谢谢。
safari 不支持这种带
-
的格式:2021-10-25
改成:
2021/10/25
就可以