| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- .right {
- float: right;
- width: 250px;
- height: 30px;
- font-size: 16px;
- line-height: 30px;
- background-color: blue;
- color: yellow;
- text-align: center;
- }
- </style>
- </head>
- <body>
- <div id="time" class="right"></div>
- <script>
- function showDateTime() {
- var array = ["日", "一", "二", "三", "四", "五", "六"];
- var date = new Date();
- var str = "";
- str += date.getFullYear() + "年"; // 年
- str += (date.getMonth() + 1) + "月"; // 月(0-11)
- str += date.getDate() + "日 "; // 日
- str += "星期" + array[date.getDay()] + " "; // 星期(0-6)
- var hour = date.getHours();
- str += hour < 10 ? "0" + hour : hour; // 时
- str += ":";
- var min = date.getMinutes();
- str += min < 10 ? "0" + min : min; // 分
- str += ":";
- var sec = date.getSeconds();
- str += sec < 10 ? "0" + sec : sec; // 秒
- // JavaScript = ECMAScript + BOM(window) + DOM(document)
- // document对象(DOM)代表整个HTML页面
- // 通过该对象的getElementById方法可以用ID来获取指定的元素(标签)
- // 通过获得的元素的textContent属性就可以修改标签体的文本内容
- var div = document.getElementById("time");
- // 如果放入元素中的内容又包含了标签或实体替换符(字符实体)
- // 那么就要将textContent属性换成innerHTML才能渲染标签和字符实体
- div.innerHTML = str;
- }
- showDateTime();
- // window对象(BOM)代表浏览器窗口
- // 通过该对象的setInterval方法可以设置计时器控制函数周期性执行
- setInterval(showDateTime, 1000);
- </script>
- </body>
- </html>
|