使用js实现简单日历效果方法

今天分享一个使用js实现简单日历效果方法。知识点介绍:1、引入我的工具包2、运用JavaScript内置对象Date先来看一下运行效果:如

今天分享一个使用js实现简单日历效果方法。

知识点介绍:

1、引入我的工具包

2、运用JavaScript内置对象 Date

先来看一下运行效果:

如图:

WordPress主题下载,WordPress免费主题下载,网站源码模板下载

直接上代码:

<!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="https://www.wpmee.com/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>

以上就是使用js实现简单日历效果的详细内容。


下载说明:
1. 本站所有资源来源于网络和用户上传,如有侵权请联系站长
2. 本站分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

本站的资源均来自于互联网,仅为资源共享、学习参考之目的,其版权均归原作者及其网站所有,如有侵权请留言联系:admin,转转请注明出处:http://zhanmr.com/6219.htm

发表评论

电子邮件地址不会被公开。 必填项已用*标注