1. 程式人生 > >js顯示當前時間及其時鐘顯示

js顯示當前時間及其時鐘顯示

                         1.彈窗顯示,當前時間和日期:

main.js

    var box=new Date();
    alert("當前日期"+box.getFullYear()+"/"+box.getMonth()+"/"+box.getDay());
  alert("現在時間"+box.getHours()+":"+box.getMinutes()+":"+box.getSeconds());            

                        2.在網頁文字中靜態顯示當前時

main.js

var box=new Date();

   document.write("當前日期"+box.getFullYear()+"/"+box.getMonth()+"/"+box.getDay());
  document.write("現在時間"+box.getHours()+":"+box.getMinutes()+":"+box.getSeconds());


                                                                     3.仿照網頁,在規定區域顯示時間

在想要插入的區域,直接插入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS學習測試網頁</title>

</head>
<body>
<h1>123</h1>
<br>
<h1>123</h1>
<br>
<h1>123</h1>
<br>
<h1>123</h1>
<br>
<h1>123</h1>
<br>

<script type="text/javascript" src="test.js"></script>
</body>
</html>
可以·正確顯示,當時感覺是一種笨方法,也許可以使用定義Id的方式來靈活顯示

如果運用函式方法寫的話,var a=date();即可,不過此段必須在<script>裡面,是例項化來顯示。

                                                                          4.顯示時鐘:

main.js

function startTime(){
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();// 在小於10的數字錢前加一個‘0’
    m=checkTime(m);
    s=checkTime(s);
    document.getElementById('txt').innerHTML=h+":"+m+":"+s;
    t=setTimeout(function(){startTime()},500);
}
function checkTime(i){
    if (i<10){
        i="0" + i;
    }
    return i;
}
html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS學習測試網頁</title>
    <script type="text/javascript" src="test.js"></script>
</head>
<body onload="startTime()">
<!--<h1>123</h1>
<br>
<h1>123</h1>
<br>
<h1>123</h1>
<br>
<h1>123</h1>
<br>
<h1>123</h1>
<br>-->

<div id="txt"></div>
</body>
</html>
可以顯示成功。但是他說在body中以onload顯示
onload事件知識:

      1.onload 事件會在頁面或影象載入完成後立即發生。

      2.支援onload事件的標籤:

<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

支援該事件的js物件:
image, layer, window
在規定區域顯示時間:

只需要更改html程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS學習測試網頁</title>
    <script type="text/javascript" src="test.js"></script>
</head>
<body >
<!--<h1>123</h1>
<br>
<h1>123</h1>
<br>
<h1>123</h1>
<br>
<h1>123</h1>
<br>
<h1>123</h1>
<br>-->

<div id="txt" align="center"></div>
<script type="text/javascript">
    var clock = new startTime();
    clock.display(document.getElementById("txt"));
</script>
</body>
</html>

重新給個時間物件,讓其display顯示區域的Id即可