JS實現(xiàn)簡單日歷特效
更新時間：2020年01月03日 08:37:53 作者：KaiSarH
這篇文章主要為大家詳細介紹了JS實現(xiàn)簡單日歷特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(xiàn)簡單日歷特效的具體代碼，供大家參考，具體內容如下
知識點
1.引入我的工具包
2.運用JavaScript內置對象 Date
運行效果
代碼
<!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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了JavaScript的變量聲明與聲明提前用法,結合實例形式分析了JavaScript變量聲明與聲明提前相關原理、用法及操作注意事項,需要的朋友可以參考下2019-11-11
基于Web標準的UI組件 — 樹狀菜單(2)...2006-09-09
這篇文章主要介紹了js實現(xiàn)鼠標點擊左上角滑動菜單效果代碼,涉及JavaScript基于鼠標事件動態(tài)變換頁面元素樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
面試題是招聘公司和開發(fā)者都非常關心的話題，公司希望通過它了解開發(fā)者的真實水平和細節(jié)處理能力，而開發(fā)者希望能夠最大程度地展示自己的水平（甚至超常發(fā)揮）。本文提供了眾多前端開發(fā)面試題，無論是招聘方還是應聘方都值得一看2016-02-02
我不知道是否有什么標準規(guī)定不允許修改id屬性，或者不建議修改id屬性，總之IE對此支持不佳。2008-09-09
js獲取TreeView控件選中節(jié)點的Text和Value值的方法
在實際項目中，遇到一個問題，首先彈出一個新窗口，新窗口中放了一個TreeView控件，現(xiàn)在要解決的是，如何單擊TreeView中一個節(jié)點，返回Text和Value到父頁面并關閉該新窗口,本文將詳細介紹此方法的實現(xiàn)2012-11-11
本篇文章主要介紹了微信小程序三級聯(lián)動地址選擇器的實例代碼，具有一定的參考價值，有興趣的可以了解一下2017-07-07
這篇文章主要介紹了jQuey中的return false作用，以及解決jquery中的return false不起作用的方法，感興趣的小伙伴們可以參考一下2015-12-12
下面小編就為大家?guī)硪黄狫S原生輪播圖的簡單實現(xiàn)(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
addEventListener是JavaScript中的一個方法,用于向一個元素添加事件監(jiān)聽器,本文給大家介紹JS中addEventListener的使用示例代碼,感興趣的朋友跟隨小編一起看看吧2023-10-10