用html与js实现简单日历,如何使用js实现简单日历效果

知识点介绍：

1、引入我的工具包

2、运用JavaScript内置对象 Date

先来看一下运行效果：

如图：

(推荐教程：js教程)

直接上代码：

Title

*{

margin: 0;

padding: 0;

}

#box{

width: 250px;

height: 300px;

background-color: orangered;

margin: 100px auto;

padding: 30px;

}

#box_top{

font-size: 22px;

color: #fff;

margin-bottom: 40px;

display: flex;

justify-content: space-around;

}

#box_bottom{

width: 90%;

height: 70%;

margin: 0 auto;

background-color: orange;

font-size: 50px;

color:#fff;

display: flex;

justify-content: center;

align-items: center;

}

年

月

日

:

:

window.addEventListener('load',function (ev) {

setInterval(function () {

myTool.$('year').innerText = myTool.getTime().year;

myTool.$('month').innerText = myTool.getTime().month < 10 ? '0' + myTool.getTime().month : myTool.getTime().month;

myTool.$('day').innerText = myTool.getTime().day < 10 ? '0' + myTool.getTime().day : myTool.getTime().day;

myTool.$('week').innerText = myTool.getTime().week ;

myTool.$('hour').innerText = myTool.getTime().hour < 10 ? '0' + myTool.getTime().hour : myTool.getTime().hour;

myTool.$('minute').innerText = myTool.getTime().minute < 10 ? '0' + myTool.getTime().minute : myTool.getTime().minute;

myTool.$('second').innerText = myTool.getTime().second < 10 ? '0' + myTool.getTime().second : myTool.getTime().second;

},1000);

},false);

更多炫酷CSS3、html5、javascript特效代码，尽在：js特效大全