JS效果----时钟显示
技术小白今天学习了使用JS效果在浏览器上面完成时钟效果。首先我们先来看一下效果：
事实上，图片上的数字全部是用的事先准备好的图片，如图：
所以此时时间滚动的原理就是用JS效果来让图片切换。
话不多说，我们先完成HTML的布局部分：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body style="background:black;color:white;font-size:50px"> <img src="images/0.png" width="25" height="37" border="0" alt=""> <img src="images/0.png" width="25" height="37" border="0" alt=""> : <img src="images/0.png" width="25" height="37" border="0" alt=""> <img src="images/0.png" width="25" height="37" border="0" alt=""> : <img src="images/0.png" width="25" height="37" border="0" alt=""> <img src="images/0.png" width="25" height="37" border="0" alt=""> </body> </html>
此时我们运行代码可以看到，浏览器显示的是00:00:00这样的静态时间，为了让时间可以动起来，我们就开始来写JS部分。首先我们来观察一下，HTML部分我们一共插入了6张图片，全部是0.png，所在的路径为根目录下images文件夹下。此时我们的任务就是将此处6个图片不停的来变换。首先我们先将原理来运行一遍
我们先将6个显示图片的位置取出来，然后使用一个定死的数字来看一下：
window.onload=function(){
var aImg=document.getElementsByTagName('img')
str='123456'
for(var i=0;i<aImg.length;i++)
{
aImg[i].src='images/'+str[i]+'.png' //第i张图片的地址为：images/字符串i所对应的数字.png；此时时钟会显示12:34:56
}
}
可以看见，此时数字时钟显示的就是字符串str的内容，要让时间变换，不难想到，我们需要修改str的内容，如何让str的内容动起来呢？这时候我们就要使用到JS中的一个重要属性：Date属性。我们创建一个Date对象，然后调用对象中的函数
<script type="text/javascript">
window.onload=function(){
var aImg=document.getElementsByTagName('img')
var oDate =new Date();
var str=oDate.getHours()+oDate.getMinutes()+oDate.getSeconds()
alert(str) //此时弹出的字符串并不是6位数字，而是6位数字相加的结果，并且随之而来的问题是当时间为06点时会显示6而不是06，如何保证正好是6位数字呢？
for(var i=0;i<aImg.length;i++)
{
aImg[i].src='images/'+str[i]+'.png'
}
}
正如上述注释，此时JS并不是将字符串当成字符串显示，而是将数字相加，并且随之而来的问题是我们如何保证时间刚好是六位？这时候我们需要做一个判断：
function ToDue(n){
if(n<10)
{
return '0'+n;
}
else
{
return ''+n;
}
然后将我们之前的代码带入其中即可：
window.onload=function(){
function ToDue(n){
if(n<10)
{
return '0'+n
}
else
{
return ''+n
}
}
var aImg=document.getElementsByTagName('img')
var oDate =new Date();
var str=ToDue(oDate.getHours())+ToDue(oDate.getMinutes())+ToDue(oDate.getSeconds())
alert(str)
for(var i=0;i<aImg.length;i++)
{
aImg[i].src='images/'+str[i]+'.png'
}
}
这时候基本上就完成了时间的显示，我们看到，数字时钟的显示已经同步我们系统的时间了，接下来的问题是此时的时钟只有刷新的时候才会动，我们如何能够让他自己能够动起来？这时候我们的setInterval就登场了
最终JS部分代码为：
window.onload=function(){
function ToDue(n){
if (n<10)
{
return'0'+n
}
else{return ''+n}
}
function tick(){
var aImg=document.getElementsByTagName('img')
var oDate=new Date()
var str=ToDue(oDate.getHours())+ToDue(oDate.getMinutes())+ToDue(oDate.getSeconds());
for(var i=0;i<aImg.length;i++){
aImg[i].src='images/'+str.charAt(i)+'.png' //str[i]含义是在i位的字符串对应的数字，aImg[i]的含义是第i张图片，最大为6
}}
setInterval(tick,1000)
tick()
}
</script>
谢谢大家的观看，希望有问题的朋友能够和我一起交流，共同探讨！
浙公网安备 33010602011771号