example02.html 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style>
  7. .right {
  8. float: right;
  9. width: 250px;
  10. height: 30px;
  11. font-size: 16px;
  12. line-height: 30px;
  13. background-color: blue;
  14. color: yellow;
  15. text-align: center;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <div id="time" class="right"></div>
  21. <script>
  22. function showDateTime() {
  23. var array = ["日", "一", "二", "三", "四", "五", "六"];
  24. var date = new Date();
  25. var str = "";
  26. str += date.getFullYear() + "年"; // 年
  27. str += (date.getMonth() + 1) + "月"; // 月(0-11)
  28. str += date.getDate() + "日&nbsp;&nbsp;"; // 日
  29. str += "星期" + array[date.getDay()] + "&nbsp;&nbsp;"; // 星期(0-6)
  30. var hour = date.getHours();
  31. str += hour < 10 ? "0" + hour : hour; // 时
  32. str += ":";
  33. var min = date.getMinutes();
  34. str += min < 10 ? "0" + min : min; // 分
  35. str += ":";
  36. var sec = date.getSeconds();
  37. str += sec < 10 ? "0" + sec : sec; // 秒
  38. // JavaScript = ECMAScript + BOM(window) + DOM(document)
  39. // document对象(DOM)代表整个HTML页面
  40. // 通过该对象的getElementById方法可以用ID来获取指定的元素(标签)
  41. // 通过获得的元素的textContent属性就可以修改标签体的文本内容
  42. var div = document.getElementById("time");
  43. // 如果放入元素中的内容又包含了标签或实体替换符(字符实体)
  44. // 那么就要将textContent属性换成innerHTML才能渲染标签和字符实体
  45. div.innerHTML = str;
  46. }
  47. showDateTime();
  48. // window对象(BOM)代表浏览器窗口
  49. // 通过该对象的setInterval方法可以设置计时器控制函数周期性执行
  50. setInterval(showDateTime, 1000);
  51. </script>
  52. </body>
  53. </html>