JavaScript代码实现简单日历效果

本文实例为大家分享了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>

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