个人中心
gpt4 book ai didi

JS实现简易日历效果

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 34 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章JS实现简易日历效果由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

本文实例为大家分享了JS实现简易日历效果的具体代码，供大家参考，具体内容如下 。

JS实现简易日历效果

JS实现简易日历效果

css 。

?
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
* {
   margin : 0 ;
   padding : 0 ;
   list-style : none ;
  }
 
  #box {
   width : 280px ;
   height : 360px ;
   margin : 50px auto ;
   background-color : black ;
   color : aliceblue;
   line-height : 40px ;
  }
 
  #header {
   height : 40px ;
   color : aliceblue;
   line-height : 40px ;
  }
 
  #header span {
   float : left ;
   text-align : center ;
   margin-top : 10px ;
   line-height : 40px ;
  }
 
  #prev,
  #next {
   width : 20% ;
   line-height : 40px ;
   cursor : pointer ;
  }
 
  #current {
   width : 60% ;
   line-height : 40px ;
  }
 
  #week li {
   width : 40px ;
   text-align : center ;
   float : left ;
   line-height : 40px ;
  }
 
  #content li {
   width : 40px ;
   text-align : center ;
   float : left ;
   line-height : 40px ;
}

html 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
< div id = "box" >
  < div id = "header" >
   < span id = "prev" >上</ span >
   < span id = "current" ></ span >
   < span id = "next" >下</ span >
  </ div >
  < ul id = "week" >
   < li >日</ li >
   < li >一</ li >
   < li >二</ li >
   < li >三</ li >
   < li >四</ li >
   < li >五</ li >
   < li >六</ li >
  </ ul >
  < ul id = "content" >
   <!-- <li>31</li>
     <li>1</li>
     <li>2</li> -->
  </ ul >
</ div >```

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
var current = document.querySelector( '#current' ); //月份name
  var prev = document.querySelector( '#prev' ); // 上个月
  var next = document.querySelector( '#next' ); // 下个月
  var content = document.querySelector( '#content' ); // 日期内容
 
  // 上个月要显示的天数
  // 求出本月第一天是星期几
  // 求出上个月最大的天数 把日期设为0
  function getPrevDays(date) {
   var date = new Date(date);
   // 把日期设为第一天，为了获取第一天是星期几
   date.setDate(1);
   var week = date.getDay();
   // 把日期设为0，为了得到上个月的最后一天
   date.setDate(0);
   var maxDay = date.getDate();
   var list = [];
   // 遍历红色日期的范围 push进数组
   for ( var i = maxDay - week + 1; i <= maxDay; i++) {
   list.push(i);
   }
   return list;
  }
 
 
  // 求本月的天数
  // 月份推到下个月
  // 日期设为0
  function getNowDays(date) {
   var date = new Date(date);
   date.setMonth(date.getMonth() + 1);
   date.setDate(0);
   var maxDay = date.getDate();
   // console.log(maxDay)
   var list = [];
   //
   for ( var i = 1; i <= maxDay; i++) {
   list.push(i)
   }
   return list;
  }
 
 
 
  // 下个月要显示的天数
  function getNextDays(prevDays, nowDays) {
   var list = [];
   // 一页日历42天，42 - 上月天数 - 这个月天数 = 最后显示剩余的下个月天数
   for ( var i = 1; i <= 42 - prevDays - nowDays; i++) {
   list.push(i)
   }
   return list
  }
 
  var x = 1;
  // 封装输出日期内容
  // x记录点击月份 根据月份 上面数组自动获取当月要显示的时间
  function output(x) {
   arr1 = getPrevDays( '2021-' + x);
   arr2 = getNowDays( '2021-' + x);
   arr3 = getNextDays(arr1.length, arr2.length);
   // console.log(arr2);
   var res = '' ;
   for ( var i = 0; i < arr1.length; i++) {
   res += '<li style="color:red;">' ;
   res += arr1[i];
   res += '</li>' ;
   }
 
   for ( var i = 0; i < arr2.length; i++) {
   res += '<li>' ;
   res += arr2[i];
   res += '</li>' ;
   }
 
   for ( var i = 0; i < arr3.length; i++) {
   res += '<li style="color:red;">' ;
   res += arr3[i];
   res += '</li>' ;
   }
   // 三个数组输出结果拼接起来 输出
   return content.innerHTML = res;
  }
 
 
 
 
  // 输出月份显示
  var date = new Date();
  current.innerHTML = showMonth( new Date());
  // 月份
  function showMonth(date) {
   var date = new Date(date);
   date.setMonth(date.getMonth());
   var mon = date.getMonth();
   // var year = date.getFullyear();
   return (mon + 1) + '月' ;
  }
 
  output(x);
  // 下个月
  next.onclick = function () {
   x++;
   // console.log(x);
   if (x > 12) {
   x = 1;
   output(x);
   } else {
   current.innerHTML = showMonth( '2021-' + x);
   output(x);
   }
  }
 
  // 上个月
  prev.onclick = function () {
   x--;
   console.log(x);
   if (x < 1) {
   x = 12;
   current.innerHTML = showMonth( '2021-' + x);
   output(x);
   } else {
   current.innerHTML = showMonth( '2021-' + x);
   output(x);
   }
  }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.

原文链接：https://blog.csdn.net/hs1219462412/article/details/113032805 。

最后此篇关于JS实现简易日历效果的文章就讲到这里了,如果你想了解更多关于JS实现简易日历效果的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

34 4 0
文章推荐： JavaScript中clientWidth,offsetWidth,scrollWidth的区别
文章推荐： vue keep-alive的简单总结
文章推荐： javascript代码实现简易计算器
文章推荐： js简单粗暴的发布订阅示例代码
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com