Heim >Web-Frontend >js-Tutorial >So erzielen Sie mit js einen einfachen Kalendereffekt
So erzielen Sie mit js einen einfachen Kalendereffekt
- 王林nach vorne
- 2020-03-30 09:28:242622Durchsuche
Einführung in Wissenspunkte:
1. Stellen Sie mein Toolkit vor
2. Verwenden Sie das in JavaScript integrierte Objekt Date
Werfen wir zunächst einen Blick auf den Laufeffekt:
Wie im Bild gezeigt:
(empfohlenes Tutorial: js-Tutorial)
Laden Sie den Code direkt hoch:
<!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>Weitere coole CSS3-, HTML5- und Javascript-Spezialeffektcodes finden Sie unter: js-Spezialeffektsammlung
Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit js einen einfachen Kalendereffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Dieser Artikel ist reproduziert unter:jb51.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen