美文网首页
初探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