原生JS實作動态月曆:
思路分析:
1.手寫對頁面進行布局
2.建立時間
3.動态的改變标簽中的内容
4.實作動态月曆
源代碼如下:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>JS實作動态月曆</title>
<style>
*{
margin: 0;padding: 0;
}
#box{
width: 250px;height: 300px;background-color: orangered;margin:100px auto;padding: 20px;
}
#box_top{
font-size:23px;color:#fff;padding-bottom: 40px;
}
#box_bottom{
width: 90%;height: 70%;background-color: yellow;margin: 0 auto;color: #fff;font-size: 100px;
/*伸縮布局*/
display: flex;justify-content: center;align-items: center;
}
</style>
</head>
<body>
<div id="box">
<div id="box_top"></div>
<div id="box_bottom"></div>
</div>
<script>
window.onload = function(){
/*1.擷取時間*/
var date = new Date();
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
var week = date.getDay();
var weeks = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
/*2.擷取标簽動态改變内容*/
$('box_top').innerText = y + '年' + m + '月' + d +'日' + weeks[week];
$('box_bottom').innerText = d;
};
/*封裝*/
function $(id) {
return typeof id === 'string' ? document.getElementById(id) : null;
}
</script>
</body>
</html>
原文:https://blog.csdn.net/FengyCoder/article/details/84030944