原生JS实现动态日历:
思路分析:
1.手写对页面进行布局
2.创建时间
3.动态的改变标签中的内容
4.实现动态日历
源代码如下:
<!DOCTYPE html>
<html lang="en">
<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>效果图:（通过JS实现的日历是动态更新日期的）
