首頁 > web前端 > js教程 > 主體

基於javascript實作動態顯示目前系統時間_javascript技巧

WBOY
發布: 2016-05-16 15:17:19
原創
1887 人瀏覽過

本文實例講解了javascript實作動態顯示目前系統時間的詳細程式碼,具體內容如下

  • (1)時間日期信息,應該在一個
    中來顯示
  • (2)計時器:每隔一秒再次存取系統時間,window物件的setTimeout()
  • (3)時鐘顯示的時機(事件):網頁載入完成後才顯示,事件onload
  • (4)如何將 時間日期資訊 寫入指定的
    中,DOM物件中的innerHTML屬性

    效果圖:

    具體代碼:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript">
    
    
    //定义函数:构建要显示的时间日期字符串
    function showTime()
    {
     //创建Date对象
     var today = new Date();
     //分别取出年、月、日、时、分、秒
     var year = today.getFullYear();
     var month = today.getMonth()+1;
     var day = today.getDate();
     var hours = today.getHours();
     var minutes = today.getMinutes();
     var seconds = today.getSeconds();
     //如果是单个数,则前面补0
     month  = month<10  &#63; "0"+month : month;
     day  = day <10  &#63; "0"+day : day;
     hours  = hours<10  &#63; "0"+hours : hours;
     minutes = minutes<10 &#63; "0"+minutes : minutes;
     seconds = seconds<10 &#63; "0"+seconds : seconds;
     
     //构建要输出的字符串
     var str = year+"年"+month+"月"+day+"日 "+hours+":"+minutes+":"+seconds;
     
     //获取id=result的对象
     var obj = document.getElementById("result");
     //将str的内容写入到id=result的<div>中去
     obj.innerHTML = str;
     //延时器
     window.setTimeout("showTime()",1000);
    }
    </script>
    <style type="text/css">
    #result{
     width:500px;
     border:1px solid #CCCCCC;
     background:#FFFFCC;
     margin:50px auto;
     font-size:24px;
     color:#FF0000;
     padding:20px;
    }
    </style>
    </head>
    
    <body onload="showTime()">
    <div id="result"></div>
    </body>
    </html>
    
    登入後複製

    希望本文所述對大家的javascript程式設計有所幫助。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板