js顯示當前時間及其時鐘顯示
阿新 • • 發佈:2019-02-05
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.仿照網頁,在規定區域顯示時間
在想要插入的區域,直接插入
可以·正確顯示,當時感覺是一種笨方法,也許可以使用定義Id的方式來靈活顯示<!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>
如果運用函式方法寫的話,var a=date();即可,不過此段必須在<script>裡面,是例項化來顯示。
4.顯示時鐘:
main.js
html: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; }
<!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即可