初探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閱讀 2,790評論 0 8
  • 第1章 認識JS JavaScript能做什么?1.增強頁面動態效果(如:下拉菜單、圖片輪播、信息滾動等)2.實現...
    mo默22閱讀 1,319評論 0 5
  • 以下是常用的代碼收集,學習用。轉自豪情博客園 1. PC - js 返回指定范圍的隨機數(m-n之間)的公式 re...
    自由加咖啡閱讀 1,014評論 0 1
  • 第1章 系好安全帶,準備啟航 1.1讓你認識JS 1.1.1 JavaScript能做什么?增強頁面動態效果(...
    張中華閱讀 1,394評論 4 10
  • JavaScript基礎 JavaScript簡介JavaScript對象 JavaScript簡介 為什么使用j...
    廖少少閱讀 558評論 0 4