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

互联网 20-3-30

知识点介绍：

1、引入我的工具包

先来看一下运行效果：

如图：

（推荐教程：js教程）

直接上代码：

<!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <title>Title</title>  <style>   *{    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;   }  </style> </head> <body>  <div id="box">   <div id="box_top">    <span id="year"></span>    <span>年</span>    <span id="month"></span>    <span>月</span>    <span id="day"></span>    <span>日</span>    <span id="week"></span>   </div>   <div id="box_bottom">    <span id="hour"></span>    <span>:</span>    <span id="minute"></span>    <span>:</span>    <span id="second"></span>   </div>  </div>  <script src="../../MyTools/MyTools.js"></script>  <script>   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);  </script> </body> </html>

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

以上就是如何使用js实现简单日历效果的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： js