网页前端之用JavaScript(JS)做一个简单的日历

Posted 訓言

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网页前端之用JavaScript(JS)做一个简单的日历相关的知识,希望对你有一定的参考价值。

效果图:

??技术图片

条件:1.有一点html和css基础(不需要太多,不是很懂也没关系)

           2.有一定逻辑语言基础

           3.用到3个js语句

思路:1.用js里面的math语句获得当前的日期时间(不懂可以百度);

技术图片

?2.输出顶部三排(较简单)

        利用document.getElementById(‘id‘).innerHTML=要输出的值

        顶部三排就做出来了。

3.输出底部的日历

        建一个二维数组,将星期和日期全部存进去

技术图片

?         利用循环遍历,把数组输出

分为两部分,当行数为一时,输出第一行

                       行数不是一时,全部输出

              tab+="<td style=‘background:red‘>"+(n[i][j])+"</td>"

        因为全部输出完之后再标红会多出一个,要是使用替换的话,抱歉不会。

         所以,在一个一个输出时,判断数组中的数是不是当天日期,是的话在生成的时候就直接标红,用条件判断语句

        最后输出成功后再简单调节一下css就完成了。

html代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>日历</title>
 6 </head>
 7 <body>
 8     <div class="box">
 9        <div  id="year_mouth_day"> </div> 
10        <div  id="week"> </div> 
11        <div  id="shizhong"> </div>
12        <div id="div1"></div>  
13    </div> 
14 <link rel="stylesheet" href="日历.css">
15 <script type="text/javascript" src="日历.js"></script>
16 </body>
17 </html>

css代码:

 1 .box {
 2     margin: 0;
 3     position: fixed;
 4     top:0%;
 5     left:0%;
 6     width: 400px;
 7     height: 400px;
 8     border: 2px;
 9     border-radius: 10px;
10     background-color: #8de695;
11     text-align: center;
12 }
13 #year_mouth_day {
14     font-size: 40px;  /* 宽度 */
15     font-weight: 10px;    /* 厚度 */
16 }
17 #week {
18     font-size: 20px;
19     font-weight: 10px;
20     margin: 10px 10px 10px 10px;
21 }
22 #shijian {
23 
24 }
25 table {
26     margin: auto;
27     border-spacing: 18px;
28     border: 2px;
29     border-radius: 10px;
30     background:rgba(0,255,0,0.4);
31     border-collapse: collapse;   /* 合并内边框 */
32 }
33 td {
34     padding: 0px;
35     margin: 0;
36     text-align: center; /* 文本居中 */
37     width: 40px;
38     height: 40px;
39     border-radius: 10px;
40     border:solid 2px #add9c0;
41 
42 }

js代码:

 1      function startTime() {
 2             var today = new Date()
 3             var year  = today.getFullYear()   //
 4             var mouth = today.getMonth()+1    //
 5             var day   = today.getDate()       //
 6             var week  = today.getDay()        //
 7             var h = today.getHours()          //
 8             var m = today.getMinutes()        //
 9             var s = today.getSeconds()        //
10             // add a zero in front of numbers<10 为了美观
11             var week_hanzi=[‘天‘,‘一‘,‘二‘,‘三‘,‘四‘,‘五‘,‘六‘,] //将数字周改为汉字
12             m = checkTime(m)
13             s = checkTime(s)
14             document.getElementById(‘year_mouth_day‘).innerHTML = year + "年" +mouth+"月"+day+"日"
15             document.getElementById(‘week‘).innerHTML = "星期   "+week_hanzi[week]
16             document.getElementById(‘shizhong‘).innerHTML = h + ":" + m + ":" + s
17             t = setTimeout(‘startTime()‘, 500)
18         
19         // add a zero in front of numbers<10 为了美观
20         function checkTime(i) {
21             if (i < 10) {
22                 i = "0" + i
23             }
24             return i
25             }
26 
27         var tab=‘<table>‘
28         var i,j;
29         var n=[[0,1,2,3,4,5,6],
30                 [0,0,0,1,2,3,4],
31                 [5,6,7,8,9,10,11],
32                 [12,13,14,15,16,17,18],
33                 [19,20,21,22,23,24,25],
34                 [26,27,28,29,30,31,0]];
35     
36         for( i=0;i<6;i++){
37             tab+=‘<tr>‘
38             for(j=0;j<7;j++){
39                 if(i==0){       //第一排星期
40                     if(n[0][j]==week)
41                         tab+="<td style=‘background:red‘>"+week_hanzi[j]+"</td>"
42                      else
43                         tab+="<td>"+week_hanzi[j]+"</td>"
44                 }
45                 else{           //其他排日期
46                     if(n[i][j]==day)
47                         tab+="<td style=‘background:red‘>"+(n[i][j])+"</td>"
48                     else
49                         tab+="<td >"+(n[i][j])+"</td>"
50                     //document.write(n[i][j]);
51                 }
52             }
53              tab+=‘</tr>‘
54         }    
55         tab+=‘</table>‘;
56         div1.innerHTML=tab
57   }
58 
59 startTime()
60 
61         /*if(week==7)
62            document.getElementById("Sun").id = ‘red‘;*/

 

以上是关于网页前端之用JavaScript(JS)做一个简单的日历的主要内容,如果未能解决你的问题,请参考以下文章

前端走向后台,node.js基本

前端JS基础

前端开发之用工作中的实例来教你切图

做网页必须要用PHP和js吗

ajax初探--实现简单实时验证

小白入门之前端网页技术JavaScript