美文网首页
初探js之练习js定时器的使用

初探js之练习js定时器的使用

作者: gzp1124 | 来源:发表于2016-03-28 21:36 被阅读64次
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script>
    //window.onload = function(){showTime();}
    setInterval("showTime()",1000);
    //setTimeout("showTime()",1000);
    function showTime(){
        var myDate=new Date();
        var str = ""+toD(myDate.getHours())+toD(myDate.getMinutes())+toD(myDate.getSeconds());
        var aImgs = document.getElementsByTagName("img");
        for(var a = 0;a<aImgs.length;a++){
            aImgs[a].src="image/"+str.charAt(a)+".png";
        }
    }
    //处理时分秒为一位数时情况
    function toD(time){
        time = ""+time;
        if(time.length<2){
            return "0"+time;
        }else{
            return time;
        }
    }
</script>
</head>

<body>

<div>
<img src="image/0.png" />
<img src="image/1.png" />
:
<img src="image/0.png" />
<img src="image/2.png" />
:
<img src="image/1.png" />
<img src="image/3.png" />
</div>

</body>
</html>

用到的知识点:
1.document.getElementsByTagName获取所有的标签
2.setInterval("todo",1000);//每1秒执行一次
3.setTimeout("todo",1000);//1秒之后执行,只执行一次
4.aImgs[a].src="image/"+str.charAt(a)+".png";//用"="直接给控件设置属性值
5.window.onload=function(){...}页面加载后执行

相关文章

网友评论

      本文标题:初探js之练习js定时器的使用

      本文链接:https://www.haomeiwen.com/subject/ywojlttx.html