首页 > 其他分享> > 第一次用js实现window10日历----动态的哟!

第一次用js实现window10日历----动态的哟!

2020-12-02 09:01:07 作者：互联网

以下自己!!纯手工!!一个一个敲出来的!!!(cs-code) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="http://at.alicdn.com/t/font_2178195_lffnsozrkrr.css"> <style> /* 页面布局 */ *{ margin: 0; padding: 0; box-sizing: border-box; } .calendar{ width:450px ; height:900px ; background-color: #252525; opacity: 0.7; margin: auto; } .content1{ width: 100%; height:135px ; border-bottom:1px dashed white ; padding: 30px; } .content2{ width: 100%; height:430px ; border-bottom:1px dashed white ; padding: 25px; } .content3{ width: 100%; height:335px ; padding: 25px; color: white; }

/* 日期 */ .content1 .clock{ font-size: 45px; color: white; font-weight:200; } .content1 .dateBox{ font-size: 20px; color: #59d5ff; font-weight:200; } /* 日历 */ .tips { display: flex; justify-content: space-around; } .center,.right,.left{ font-size: 30px; color: white; } .zong ul{ display: flex; flex-wrap: wrap; } .zong ul li{ width: calc(100% / 7); height: 40px; color: white; list-style: none; /* border: 1px dashed white; */ text-align: center; line-height: 40px; } .zong ul li:hover{ background-color: #59d5ff; } /* 行程 */ .ri{ font-size: 20px; } .jia{ font-size: 30px; /* margin-left: 250px; */ float: right; } .tishi{ margin-top: 15px; } .tishi .iconfont{ font-size: 30px; color: white; } .tishi span{ font-size:18px ; margin-left: 30px; } .content3 button{ display: block; width:270px ; height: 40px; line-height: 40px; font-size: 18px; background-color: #28a3cc; margin: 30px auto; color: white; } </style> </head> <body> <div class="calendar">  <div class="content1"> <div class="clock"></div> <div class="dateBox"></div> </div>  <div class="content2"> <div class="zong"> <div class="tips"> <div class="center">2020年9月</div> <div class="left"><</div> <div class="right">></div> </div>  <ul > <li>一</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li> <li>六</li> <li>日</li> </ul> <ul class="showRl"> </ul> </div> </div>  <div class="content3"> <span class="ri"></span> <span class="jia">+</span> <div class="tishi"> <i class="iconfont icon-rili"></i> <span>设置日历以查看你的日程安排</span> </div> <button>开始</button> </div> </div> </body> <script>

// 传入一个日期返回该月的第一天是星期几 function firstDayIsWeek(date){ var newdate=new Date(date); newdate.setDate(1); return newdate.getDay() ; }

// 传入一个日期返回上个月的有多少天 function lastMonthDay(date){ var newdate=new Date(date); newdate.setDate(0); return newdate.getDate() ; }

// 传入一个日期返回该月的有多少天 function MonthDay(date){ var newdate=new Date(date); newdate.setDate(1); //防止31号,连跳两个月的情况! var month=newdate.getMonth()+1 newdate.setMonth(month); newdate.setDate(0); return newdate.getDate() ; }

function getFirstDayWeek(date) { date = new Date(date); // 得到一个与原日期相同的新日期 => 不影响原日期 date.setDate(1); return date.getDay() }

function getLastMonthDays(date) { date = new Date(date); date.setDate(0); // console.log(date.getDate()); return date.getDate(); }

function getThisMonthDays(date) { date = new Date(date); // date.setMonth(date.getMonth() + 1); 造成的问题 => 只是月份向后加一, 日期在(31=> 30 , 31,30=> 28/29 日期会超出最大临界值向后换算 ) // 2021-10-31 => 2021-11-31(超出最大临界值) => 2021-12-1 (后面的全都错了) // 2021-1-31 => 2021-2-31 (超出最大临界值) => 2021-3-3 (后面的全都错了)

// 怎么解决? 经分析起始日期是几号对此方法没有任何影响,我们可以提前将日期设置为1 => 这样的话就不可能超出了 date.setDate(1);

date.setMonth(date.getMonth() + 1); // 将月份设置为下个月 date.setDate(0); // console.log(date.getDate()); return date.getDate(); }

// 封装三个函数 (函数独立,不影响传入的原日期 => 得到一个与原日期相同的新日期) // 传入一个日期返回该月的第一天是星期几 function firstDayIsWeek(date){ var newdate=new Date(date); newdate.setDate(1); return newdate.getDay() ; } // var a=new Date(); // console.log(a) // var c=firstDayIsWeek(a) // console.log(c) // 传入一个日期返回上个月的有多少天 function lastMonthDay(date){ var newdate=new Date(date); newdate.setDate(0); return newdate.getDate() ; } // var a=new Date(); // console.log(a) // var c=lastMonthDay(a) // console.log(c) // 传入一个日期返回该月的有多少天 function MonthDay(date){ var newdate=new Date(date); newdate.setDate(1); //防止31号,连跳两个月的情况! var month=newdate.getMonth()+1 newdate.setMonth(month); newdate.setDate(0); return newdate.getDate() ; } // var a=new Date(); // console.log(a) // var c=MonthDay(a) // console.log(c)

window.onload = function () { var clock = document.getElementsByClassName("clock")[0]; var dateBox = document.getElementsByClassName("dateBox")[0]; var ri = document.getElementsByClassName("ri")[0]; var ri1 = document.getElementsByClassName("ri1")[0]; var center=document.getElementsByClassName("center")[0]; var left = document.getElementsByClassName("left")[0]; var right = document.getElementsByClassName("right")[0]; // 加载时调用 clockGet();

// 之后每隔一秒执行一次 setInterval(clockGet, 1000);

function clockGet() { var now = new Date(); // console.log(now);

// 获取年月日时分秒毫秒星期 var year = now.getFullYear(); //年 // console.log(year);

// 设置日期是月份-1 // 获取时(0-11) 月份+1 var month = now.getMonth() + 1; // 月 ` // console.log(month);

var day = now.getDate(); //日期 // console.log(day);

// now.getDay() 返回星期几 (国外星期日是第一天(0) 0-6 ) var week = now.getDay(); var weekList = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];

// 小时 var hour = now.getHours(); hour = beautify(hour); // console.log(hour);

// 分钟 var minute = now.getMinutes(); minute = beautify(minute); // console.log(minute);

var second = now.getSeconds(); second = beautify(second); // console.log(second);

clock.innerHTML = `${hour}:${minute}:${second}`; dateBox.innerHTML = `${year}年${month}月${day} ${weekList[week]}`; ri.innerHTML=`${month}月${day} ${weekList[week]}` }

// 日历的生成 var showRl = document.getElementsByClassName("showRl")[0]; var date = new Date(); createRl(); //向上翻页 left.onclick = function () { date.setDate(1); date.setMonth(date.getMonth() - 1); createRl() }

//向下翻页 right.onclick = function () { date.setDate(1); date.setMonth(date.getMonth() + 1); createRl(); }

function createRl() { // 日期对应的年和月 var year = date.getFullYear(); var month = date.getMonth() + 1; center.innerHTML = `${year}年${month}月`;

// 1. 找到本月的第一天是星期几 var week = getFirstDayWeek(date); week = week == 0 ? 7 : week; // console.log(week);

var lastMonthDays = getLastMonthDays(date); // console.log(lastMonthDays);

var thisMonthDays = getThisMonthDays(date); // console.log(thisMonthDays);

// date => 切换时的日期 // year => 切换时的日期对应的年份 // month => 切换时的日期对应的月份

var now = new Date(); // 今天的日期 var nowYear = now.getFullYear(); //今天的年 var nowMonth = now.getMonth() + 1; //今天的月 var nowDate = now.getDate(); //今天的日期

var html = "";

// 上个月 for (var i = lastMonthDays - (week - 1) + 1; i <= lastMonthDays; i++) { html += `<li style="color:#333;">${i}</li>` }

// 当前月 for (var i = 1; i <= thisMonthDays; i++) { if (year == nowYear && month == nowMonth && i == nowDate) { //今天 html += `<li style="box-shadow:0px 0px 20px 2px inset rgba(255,0,0,0.8)">${i}</li>` // html += `<li style="background:red;">${i}</li>` } else { html += `<li>${i}</li>` }

}

// 下个月 for (var i = 1; i <= 42 - (week - 1) - thisMonthDays; i++) { html += `<li style="color:#333;">${i}</li>` }

showRl.innerHTML = html; }

function beautify(num) { if (num < 0 || num % 1 != 0) { //小于0 小数 var err = new Error("Please enter the correct range of parameters"); throw err; } return num < 10 ? "0" + num : num; }

}

</script> </html> 代码加了很详细的注释,其中三个函数封装了两次根据大家喜欢的命名不同而定.但功能都是一样的!

标签：console,log,js,----,var,new,date,newdate,window10
来源： https://www.cnblogs.com/yujiawen/p/14071859.html