用JavaScript代码编写日历

来源：互联网发布：上海现代建筑知乎编辑：程序博客网时间：2024/06/06 01:15

一个简单的日历如下：这里主要用到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>

阅读全文

0 0