思路：
1、将每个时间的id都获取到，因为有零所以一个时间要有两个id。
2、先让后面的递增，之后判断递增多少后，前面的+1。
3、用innerHTML改变他的HTML元素(也就是把时间输出在HTML中)。
HTML+CSS代码:
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>js计时</title>
<style>
body {
text-align: center;
background: url(https://api.xfyun.club/cos.php) no-repeat;
background-size: cover;
color: white;
}
.xf {
width: 80%;
height: 500px;
border: 3px solid black;
border-radius: 30px;
background-color: rgba(71, 71, 71, 0.383);
margin: 100px auto;
font-size: 30px;
font-family: '微软雅黑', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.xf-2 {
margin-top: 10%;
}
#data {
font-weight: 100;
font-size: 19px;
}
.de {
font-family: "楷体";
margin-top: 5%;
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body id="body">
<div class="xf">
<div class="xf-2">
从你进来已经过了<span id="d">0</span><span id="dd">0</span> 天
<span id="h">0</span><span id="hh">0</span> 时
<span id="m">0</span><span id="mm">0</span> 分
<span id="s">0</span><span id="ss">0</span> 秒
<div class="de">现在时间为: <span id="data"></span></div>
</div>
</div>
<script type="text/javascript">
var d = document.getElementById('d'),
dd = document.getElementById('dd'),
h = document.getElementById('h'),
hh = document.getElementById('hh'),
m = document.getElementById('m'),
mm = document.getElementById('mm'),
s = document.getElementById('s'),
ss = document.getElementById('ss'),
data = document.getElementById('data'),
wz = document.getElementById('wz');
data.innerHTML = new Date();
setInterval(function () {
ss.innerHTML++;
if (ss.innerHTML >= 10) {
s.innerHTML++;
ss.innerHTML = 0;
}
if (s.innerHTML >= 6) {
mm.innerHTML++;
s.innerHTML = 0;
}
if (mm.innerHTML >= 10) {
m.innerHTML++;
mm.innerHTML = 0;
}
if (m.innerHTML >= 6) {
hh.innerHTML++;
m.innerHTML = 0;
}
if (hh.innerHTML >= 9) {
h.innerHTML++;
hh.innerHTML = 0;
}
if (h.innerHTML >= 2 && hh.innerHTML >= 4) {
dd.innerHTML++
h.innerHTML = 0;
hh.innerHTML = 0;
}
if (dd.innerHTML >= 9) {
d.innerHTML++;
dd.innerHTML = 0
}
}, 1000);
</script>
</body>
</html>js代码:
🎉 恭喜你发现了宝藏导航！>>点此前往<<
👋 感谢您的观看，对您有用就分享出去吧 ！
如您有好的资源/素材，可参与创作者激励计划享投稿分成。分成介绍 投稿成功收录，即可获得1-10 元/篇奖励。（重复内容无奖励）
本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负！
© 版权声明
THE END
文章不错？点个赞呗
![CleanMyMac X 4.13.4 强大的Mac系统清理优化工具[一键安装免激活]-懒人Blog(资源素材网)](https://www.lanrenn.cn/wp-content/uploads/2023/07/20230701163051907.png)
相关推荐
随机看看好帖需要善于发现
热门圈子总有聊不完的话题
标签云
-
685
文章数目
-
1026
注册用户
-
0
本周发布
-
1247
稳定运行
-
497916
总访问量
X
X
暂无评论内容