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>
总结：这个小例子算是比较简单的，综合的来说复杂程度不高，主要是要理清思绪，我这个还不算太好，有些东西可以省略的，有兴趣的朋友可以用自己的方法做做看。
288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
