日历
实现的功能
- 能实时显示当前时间
- 能显示当天日期,并且可查看该月天数,星期几
- 可点击按钮查看任意年份月份的日期
代码展示
html
<div class="wrap">
<h1></h1>
<h2></h2>
<button class="l"> < </button>
<button class="r"> > </button>
<div class="head">
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</div>
<ul class="ul">
<li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
</div>
css样式
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
padding: 20px;
overflow: hidden;
background: #444444;
width: 385px;
margin: 52px auto;
position: relative;
}
li{
list-style: none;
width: 45px;
height: 45px;
color: white;
font-size: 12px;
float: left;
margin: 5px;
text-align: center;
line-height: 45px;
}
.today{
background: skyblue;
color: red;
}
.ul li:hover{
background: skyblue;
opacity: 0.5;
}
h2{
font-size: 12px;
color: skyblue;
line-height: 25px;
position: relative;
top: 10px;
font-weight: normal;
}
button{
width: 30px;
line-height: 25px;
text-align: center;
position: absolute;
top:15px;
background: transparent;
color: white;
border: none;
outline: none;
font-size: 20px;
cursor: pointer;
}
.l{
right: 80px;
}
.r{
right: 32px;
}
h1{
font-size: 20px;
color: skyblue;
}
</style>
js获取元素
var lis = document.querySelectorAll('.ul li');
var h = document.querySelector('h2');
var h1 = document.querySelector('h1');
var btnl=document.querySelector('.l');//获取按钮
var btnr=document.querySelector('.r');
封装一个获取日期的函数,返回一个对象
function getD(){
function doub(a){
if(a < 10){
a = '0' + a;
}
return a;
}
var dat=new Date();
var year=dat.getFullYear();
var mon=dat.getMonth()+1;
var day=dat.getDay();
var d=dat.getDate();
var hour = dat.getHours();
var min = dat.getMinutes();
var sec = dat.getSeconds();
hour = doub(hour);
min = doub(min);
sec = doub(sec);
var DATE = {
Year:year,
Mon:mon,
Day:day,
D:d,
Hour:hour,
Min:min,
Sec:sec
}
return DATE;
}
打印输出日期
function date(){
var DATE = getD();
var year = DATE.Year;
var mon = DATE.Mon;
var day = DATE.Day;
var d = DATE.D;
var hour = DATE.Hour;
var min = DATE.Min;
var sec = DATE.Sec;
h.innerText = year + ' 年 ' + mon + ' 月 ' + d + ' 日 ';
h1.innerText = year + ' 年 ' + mon + ' 月 ' + d + ' 日 ' + hour + ':' + min + ':' + sec;
setInterval(function(){
var DATE = getD();
h1.innerText = DATE.Year + ' 年 ' + DATE.Mon + ' 月 ' + DATE.D + ' 日 ' + DATE.Hour + ':' + DATE.Min + ':' + DATE.Sec;
},1000)
theDate(year,mon);
var firstDay = new Date(year,mon-1,1).getDay();//得出第一天星期几
var today = d + firstDay - 1
lis[today].style.color = 'red';
lis[today].className='today';//添加当天的样式
btnl.onclick = function(){
lis[today].className = '';//清除当天的样式
mon = mon - 1;//月份减一
if(mon <= 0){
mon = 12;
year = year - 1;
}
theDate(year,mon);
}
btnr.onclick = function(){
lis[today].className = '';//清除当天的样式
mon = mon + 1;
if(mon >= 13){
mon = 1;
year = year + 1;
}
theDate(year,mon);
}
function theDate(year,mon){
for(var j = 0; j < lis.length; j++){//先清空所有li里的内容
lis[j].innerText = '';
lis[j].style.color = 'white';
}
var s1 = new Date(year,mon,0);
var f=s1.getDate();//获取该月的天数
h.innerText = year + '年' + mon + '月';
var s2 = new Date(year,mon - 1,1);
var fir = s2.getDay();
for(var j = fir;j < fir + f; j++){
lis[j].innerText = j - fir + 1;
}
var lastMon = new Date(year,mon - 1,0).getDate();//获取前一个月天数
for(var i = fir - 1; i >= 0; i--){
lis[i].innerText = lastMon--;
lis[i].style.color = '#aaa'
}
for(var k = fir + f; k < lis.length; k++){//后一个月
lis[k].innerText = k - fir - f + 1;
lis[k].style.color = '#aaa'
}
}
}
date();
gitHub地址: https://github.com/yzsn123/js-game.git