正文
js学习笔记之：时间（三）
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
今天来学习一个简单的时间应用：时间的倒影，如图所示：
主要知识点： 1 获取系统的时间值；2 建立一个div的倒影
div的倒影主要利用css来控制，函数值为：filter:flipv()
步骤一（建立HTML和css样式）：
<body onload="init()">
<div id="time1" class="time" style="width:8; height:8; top:9; left:35;"></div>
<div id="time2" class="time" style="
filter:flipv()
alpha(opcity=30); font-style:italic";></div>
</body>
<style>
.time{font-family:"Comic Sans MS"; font-size:20pt; font-weight:bold; color:#OF808F; color:#F00;}
</style>
步骤二（编写js代码）：
function init(){
if(document.all){
var oTime1 = document.getElementById("time1");
var oTime2 = document.getElementById("time2");
oTime2.style.left = oTime1.style.posLeft;
oTime2.style.top = oTime2.style.posTop + oTime1.offsetHeight-5;
settimes();
}
}
function
settimes()
{
//获取时间值
var time = new Date();
hours = time.getHours();
mins = time.getMinutes();
secs = time.getSeconds();
if(hours <10){hours = "0" + hours;}
if(mins <10){mins = "0" + mins;}
if(secs <10){secs = "0" + secs;}
var oTime1 = document.getElementById("time1");
var oTime2 = document.getElementById("time2");
//将时间值插入div
oTime1.innerHTML = hours+":" + mins + ":" + secs;
oTime2.innerHTML = hours+":" + mins + ":" + secs;
circletimer = setInterval('settimes()',1000);
//获取方法本身，让时钟不停在走
}
有关时间的值的获取，想必大家都会，这里值得一说的是，使用了间隔型定时器 setInterval， 来触发调用自己： settimes() ，以保证时间不停在走，这是一个定时器很常用的写法，就是回调自己这个本身的函数，来获取到循环执行某段代码；
