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

<!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前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 7,736评论 0 8
  • 第1章 认识JS JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 5,190评论 0 5
  • 以下是常用的代码收集,学习用。转自豪情博客园 1. PC - js 返回指定范围的随机数(m-n之间)的公式 re...
    自由加咖啡阅读 4,615评论 0 1
  • 第1章 系好安全带,准备启航 1.1让你认识JS 1.1.1 JavaScript能做什么?增强页面动态效果(...
    张中华阅读 5,247评论 4 10
  • JavaScript基础 JavaScript简介JavaScript对象 JavaScript简介 为什么使用j...
    廖少少阅读 3,550评论 0 4