1:先在HTML中放三个div盒子,分别用来装小时,分钟,秒,如果你想让他们变得华丽一点的话,可以在css样式中设置一下,比如他们的宽,高,边框,背景图片等等,你想怎么弄就怎么弄;
2:再通过正则表达式分割当前时间(参考“在MVC中通过正则表达式分割获得时间”),然后通过“:”进行分割通过正则表达式得到的时间,就能得到当前时间的小时,分钟,秒,再赋值给三个div盒子页面,
具体代码截图:
3:接下来启动一下看看效果是否成功
浏览器效果截图:
4:每当我们刷新浏览器时,上面的数字也会变成当前时间的数字,但是它是没有我们这个时钟的效果的;所以我们再去封装一个方法,并传递一个参数,在这个方法里面写时钟效果的代码,先获取到各个页面的数字并定义变量,并且还要获取div盒子的ID和定义变量。然后在这个方法里面再写一个方法,并且最后要调用这个方法,如果秒大于等于0并且小于等于59,那么秒就等于当前的秒加上传递的参数,再每1秒执行这个方法,然后让秒的div盒子的页面等于重新定义的秒,这样就能秒的效果就出来了,具体每秒加几就是通过你那个参数来决定了,当秒大于59时,那么再在这个方法的方法里面再写一个方法,接下来就是分钟了,具体的操作也是差不多的,分钟设置完再设置小时
具体代码:
function func(off) {
var miao = sj[2];
var djs3 = document.getElementById(“djs3”);
var fz = sj[1];
var djs2 = document.getElementById(“djs2”);
var xs = sj[0];
var djs1 = document.getElementById("djs1");
function go() {
if (miao >= 0&&miao<=59) {
miao =parseInt(miao) + off;
setTimeout(go, 1000);
djs3.innerHTML = miao;
} else{
function tono() {
if (fz >= 0 && fz <= 59) {
fz = parseInt(fz) + off;
djs2.innerHTML = fz;
djs3.innerHTML = 0;
miao = djs3.innerHTML;
fz = djs2.innerHTML;
go();
} else{
function twon() {
if (xs >= 0 && xs <= 23) {
xs = parseInt(xs) + off;
djs1.innerHTML = xs;
djs2.innerHTML = 0;
djs3.innerHTML = 0;
miao = djs3.innerHTML;
fz = djs2.innerHTML;
xs = djs1.innerHTML;
go();
tono();
} else if (xs = 24) {
xs = 0;
go();
tono();
twon();
}
}
twon();
}
}
tono();
}
}
}