实现移动端万年历

来源：互联网发布：vscode开发reactjs 编辑：程序博客网时间：2024/06/07 09:44

本文实例讲述了JS简单实现移动端日历功能。分享给大家供大家参考，具体如下：

只是一个初步的简单的日历，有是否显示上月和下月部分的选项

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable"content="yes">
  <meta name="apple-mobile-web-app-status-bar-style"content="black">
  <meta name = "format-detection"content = "telephone=no">
  <title>移动端日历</title>
  <style type="text/css">
    table{
      width: 100%;
      border-collapse: collapse;
    }
    td {
      padding: 0;
      margin: 0;
      vertical-align: middle;
      text-align: center;
      font-size: .7rem;
      height: 1.5rem;
    }
    .none{
      display: none;
    }
  </style>
</head>
<body>
  <div class="calendar">
    <table class="calendar_day">
      <tr>
        <td>星期日</td>
        <td>星期一</td>
        <td>星期二</td>
        <td>星期三</td>
        <td>星期四</td>
        <td>星期五</td>
        <td>星期六</td>
      </tr>
    </table>
    <table class="calendar_date">
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </div>
  <script type="text/javascript">
  vardate = newDate();
  calendar(date,{lastandnext:true})
  functioncalendar (setDate,options){
    if(!options) {
      options = {};
    }
    options.lastandnext = options.lastandnext || false;
    // 星期几部分
    varcalendar_days = document.getElementsByClassName('calendar_day')[0];
    vardays = calendar_days.getElementsByTagName('td');
    vardate = newDate(setDate);
    vary = date.getFullYear();
    varm = date.getMonth();
    vard = date.getDate();
    // 本月
    // 该月的第一天是星期几
    varfirstDay = newDate(y,m,1).getDay();
    // console.log(firstDay);
    // 该月一共多少天
    varlastData = newDate(y,m+1,0).getDate();
    // console.log(lastData)
    // 该月的最后一天是星期几
    varlastDay = newDate(y,m+1,0).getDay();
    // console.log(firstDay)
    varcalendar_date = document.getElementsByClassName('calendar_date')[0];
    vartds = calendar_date.getElementsByTagName('td');
    // console.log(tds)
    vared = firstDay;
    for(vari = firstDay; i < lastData+firstDay; i++) {
      // console.log(i-firstDay+1)
      tds[i].innerHTML= i-(firstDay)+1;
    }
    if(options.lastandnext){
      // // 上月
      varlastMonthData = newDate(y,m,0).getDate();
      for(vari = firstDay-1; i >= 0; i--){
        tds[i].innerHTML= lastMonthData-(firstDay-i-1);
      }
      // 下月
      vark = 0;
      for(vari = lastData+firstDay; i < tds.length; i++){
        k++;
        tds[i].innerHTML= k;
      }
    }
  }
  </script>
  <!-- 适配 -->
  <script type="text/javascript">
    ;(function(win, doc){
      functionchange(){
        doc.documentElement.style.fontSize=20*doc.documentElement.clientWidth/360+'px';
      }
      change();
      win.addEventListener('resize', change, false);
    })(window, document);
  </script>
</body>
</html>

PS：这里再为大家分享几款本站的在线日期工具供大家参考：

在线万年历日历：
http://tools.jb51.net/bianmin/wannianli

网页万年历日历：
http://tools.jb51.net/bianmin/webwannianli

在线万年历黄历flash版：
http://tools.jb51.net/bianmin/flashwnl

阅读全文

0 0