JS之偶然发现一个挺好玩的JS倒计时程序
JS进入页面开始计时#
一天看见了网上某个表白网中间部分有个计时器，自己就琢磨，愣了下想了想好像挺简单的，做个出来玩玩。 好了，话不多说进入正题。
思路： 1、将每个时间的id都获取到，因为有零所以一个时间要有两个id。 2、先让后面的递增，之后判断递增多少后，前面的+1。 3、用innerHTML改变他的HTML元素(也就是把时间输出在HTML中)。
js代码:
var d=document.getElementById('d'), //获取天数的ID
dd=document.getElementById('dd'),
h=document.getElementById('h'),//获取小时的ID
hh=document.getElementById('hh'),
m=document.getElementById('m'),//获取分钟的ID
mm=document.getElementById('mm'),
s=document.getElementById('s'),//获取秒数的ID
ss=document.getElementById('ss'),
data=document.getElementById('data'),//获取当前时间
wz=document.getElementById('wz');//获取DIV
data.innerHTML=new Date(); //将时间写入在该span中
setInterval(function(){ //启动定时器且无限循环
ss.innerHTML++; //秒数开始递增
if(ss.innerHTML>=10){ //当后一个秒数递增到>=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);//1秒后执行html+css代码:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计时</title>
<style>
body{
background:#FD938B;
}
.wz{
width:600px;
height:300px;
margin:100px auto;
font-size:30px;
font-family: 幼圆
}
@font-face{
font-family: 幼圆;
src:url('幼圆.TTF');
}
#data{
font-size:19px;
}
.de{
font-size:19px;
}
</style>
</head>
<body id="body">
<div class="wz">
从你进来已经过了<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> 秒
<br/><br/>
<span class="de">现在时间为:</span><span id="data"></span>
</div>
</body>
</html>总结：这个小例子算是比较简单的，综合的来说复杂程度不高，主要是要理清思绪，我这个还不算太好，有些东西可以省略的，有兴趣的朋友可以用自己的方法做做看。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019-01-11 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录