日历 

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .box{
 8             width: 150px;
 9             height: 180px;
10             background-color: #369;
11             margin: 100px auto;
12             text-align: center;
13         }
14         .box p {
15             line-height: 60px;
16             font-size:12px;
17             color: #fff;
18         }
19         .box span{
20             display: block;
21             width: 75px;
22             height: 75px;
23             margin: 0 auto;
24             font-size:50px;
25             background-color: yellowgreen;
26             line-height: 75px;
27         }
28     </style>
29     <script>
30         window.onload = function(){
31            var box = document.getElementById("box");
32             var boys = box.children; //childNodes不建议使用因为会包括空白文档对象
33              //日期函数
34             var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
35              var date = new Date();   // 声明日期函数
36              boys[0].innerHTML = date.getFullYear()+"年"+ (date.getMonth()+1) +
37              "月" + date.getDate() + "日" + "  " + arr[date.getDay()];
38              boys[1].innerHTML = date.getDate();  // 今天的日子
39         }
40     </script>
41 </head>
42 <body>
43 <div class="box" id="box">
44     <p></p>
45     <span></span>
46 </div>
47 </body>
48 </html>
posted @ 2019-12-20 18:16  杨小越  阅读(192)  评论(0)    收藏  举报