一个简单的日历如下:这里主要用到JavaScript中的
new
Date();
属性。
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin: 0; padding: 0;} #cal { width: 200px; height: 220px; background-color: blue; margin: 80px auto; padding-top: 10px; } #cal > div { padding: 0 10px; color: #fff; } p { width: 100px; height: 100px; line-height: 100px; text-align: center; font-size: 36px; background-color: green; margin: 40px auto } </style> </head> <body> <div id="cal"> <div id="topDiv"></div> <p id="day"></p> </div> <script type="text/javascript"> //2017年10月6日 星期五 var date = new Date(); var year = date.getFullYear(); var month = date.getMonth(); var day = date.getDate(); var weekday = date.getDay(); var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; var str = year+"年"+(month+1)+"月"+day+"日 "+arr[weekday]; var cal = document.getElementById("cal"); // 给第一个孩子div设置内容 cal.children[0].innerHTML = str; // 给第二个孩子p设置内容 cal.children[1].innerHTML = day; </script> </body> </html>