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(),以保证时间不停在走,这是一个定时器很常用的写法,就是回调自己这个本身的函数,来获取到循环执行某段代码;