Home > Web Front-end > JS Tutorial > How to use js to achieve a simple calendar effect

How to use js to achieve a simple calendar effect

王林
Release: 2020-03-30 11:23:39
forward
2626 people have browsed it

How to use js to achieve a simple calendar effect

Introduction to knowledge points:

1. Introduce my toolkit

2. Use JavaScript built-in object Date

Let’s take a look at the running effect first:

As shown in the picture:

How to use js to achieve a simple calendar effect

(Recommended tutorial: js tutorial)

Directly upload the code:

<!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(&#39;load&#39;,function (ev) {
   setInterval(function () {
    myTool.$(&#39;year&#39;).innerText = myTool.getTime().year;
    myTool.$(&#39;month&#39;).innerText = myTool.getTime().month < 10 ? &#39;0&#39; + myTool.getTime().month : myTool.getTime().month;
    myTool.$(&#39;day&#39;).innerText = myTool.getTime().day < 10 ? &#39;0&#39; + myTool.getTime().day : myTool.getTime().day;
    myTool.$(&#39;week&#39;).innerText = myTool.getTime().week ;
    myTool.$(&#39;hour&#39;).innerText = myTool.getTime().hour < 10 ? &#39;0&#39; + myTool.getTime().hour : myTool.getTime().hour;
    myTool.$(&#39;minute&#39;).innerText = myTool.getTime().minute < 10 ? &#39;0&#39; + myTool.getTime().minute : myTool.getTime().minute;
    myTool.$(&#39;second&#39;).innerText = myTool.getTime().second < 10 ? &#39;0&#39; + myTool.getTime().second : myTool.getTime().second;
   },1000);
 
  },false);
 </script>
</body>
</html>
Copy after login

More cool CSS3, html5, javascript special effect codes, all in: js special effects collection

The above is the detailed content of How to use js to achieve a simple calendar effect. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
js
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Issues
Where is js written?
From 1970-01-01 08:00:00
0
0
0
js file code not found
From 1970-01-01 08:00:00
0
0
0
js addClass not working
From 1970-01-01 08:00:00
0
0
0
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template