JavaScript代码实现简单日历效果

时间：2021-05-26

本文实例为大家分享了JavaScript实现简单日历效果的具体代码，供大家参考，具体内容如下

效果如下：

代码：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } #box { width: 400px; height: 502px; border: 2px solid orange; margin: 50px auto; font-size: 48px; text-align: center; } #ym { height: 100px; line-height: 100px; } #d { height: 200px; line-height: 200px; background-color: orange; font-size: 72px; } #w { height: 100px; line-height: 100px; } #hms { height: 100px; line-height: 100px; } </style></head><body> <div id="box"> <div id="ym"></div> <div id="d"></div> <div id="w"></div> <div id="hms"></div> </div> <script> //调用 getDateAndTime方法 getDateAndTime(); //启动定时器，调用 getDateAndTime方法 window.setInterval(getDateAndTime, 1000); function getDateAndTime() { //获取系统当前的日期时间 var date = new Date(); //提取日期时间构成的元素 var year = date.getFullYear(); var month = date.getMonth() + 1; var day = date.getDate(); var week = date.getDay(); var hour = date.getHours(); var minute = date.getMinutes(); var second = date.getSeconds(); //处理week的格式 switch (week) { case 0: week = '星期日'; break; case 1: week = '星期一'; break; case 2: week = '星期二'; break; case 3: week = '星期三'; break; case 4: week = '星期四'; break; case 5: week = '星期五'; break; case 6: week = '星期六'; break; } //定义函数处理时分秒的格式 function formatHMS(time) { if (time < 10) { return '0' + time; } else { return time; } } //获取页面元素 var ym = document.getElementById('ym'); var d = document.getElementById('d'); var w = document.getElementById('w'); var hms = document.getElementById('hms'); //将日期时间写入到页面 ym.innerHTML = year + '年' + month + '月'; d.innerHTML = day; w.innerHTML = week; hms.innerHTML = hour + '时' + minute + '分' + second + '秒'; } </script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章