第一次用js实现window10日历----动态的哟!
以下自己!!纯手工!!一个一个敲出来的!!!(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>
代码加了很详细的注释,其中三个函数封装了两次根据大家喜欢的命名不同而定.但功能都是一样的!
