JS實(shí)現(xiàn)簡(jiǎn)單日歷特效
本文實(shí)例為大家分享了JS實(shí)現(xiàn)簡(jiǎn)單日歷特效的具體代碼,供大家參考,具體內(nèi)容如下
知識(shí)點(diǎn)
1.引入我的工具包
2.運(yùn)用JavaScript內(nèi)置對(duì)象 Date
運(yùn)行效果

代碼
<!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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 如何通過(guò)JS實(shí)現(xiàn)日歷簡(jiǎn)單算法
- 原生JS實(shí)現(xiàn)相鄰月份日歷
- JavaScript實(shí)現(xiàn)簡(jiǎn)單日歷效果
- 基于javascript實(shí)現(xiàn)日歷功能原理及代碼實(shí)例
- 原生js實(shí)現(xiàn)日歷效果
- js實(shí)現(xiàn)簡(jiǎn)單的日歷顯示效果函數(shù)示例
- 原生JavaScript實(shí)現(xiàn)日歷功能代碼實(shí)例(無(wú)引用Jq)
- JS實(shí)現(xiàn)帶陰歷的日歷功能詳解
- javascript實(shí)現(xiàn)考勤日歷功能
- 原生JS實(shí)現(xiàn)日歷組件的示例代碼
- js實(shí)現(xiàn)日歷
相關(guān)文章
JavaScript的變量聲明與聲明提前用法實(shí)例分析
這篇文章主要介紹了JavaScript的變量聲明與聲明提前用法,結(jié)合實(shí)例形式分析了JavaScript變量聲明與聲明提前相關(guān)原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2019-11-11
基于Web標(biāo)準(zhǔn)的UI組件 — 樹狀菜單(2)
基于Web標(biāo)準(zhǔn)的UI組件 — 樹狀菜單(2)...2006-09-09
js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊左上角滑動(dòng)菜單效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊左上角滑動(dòng)菜單效果代碼,涉及JavaScript基于鼠標(biāo)事件動(dòng)態(tài)變換頁(yè)面元素樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
動(dòng)態(tài)修改DOM 里面的 id 屬性的弊端分析
我不知道是否有什么標(biāo)準(zhǔn)規(guī)定不允許修改id屬性,或者不建議修改id屬性,總之IE對(duì)此支持不佳。2008-09-09
js獲取TreeView控件選中節(jié)點(diǎn)的Text和Value值的方法
在實(shí)際項(xiàng)目中,遇到一個(gè)問(wèn)題,首先彈出一個(gè)新窗口,新窗口中放了一個(gè)TreeView控件,現(xiàn)在要解決的是,如何單擊TreeView中一個(gè)節(jié)點(diǎn),返回Text和Value到父頁(yè)面并關(guān)閉該新窗口,本文將詳細(xì)介紹此方法的實(shí)現(xiàn)2012-11-11
微信小程序三級(jí)聯(lián)動(dòng)地址選擇器的實(shí)例代碼
本篇文章主要介紹了微信小程序三級(jí)聯(lián)動(dòng)地址選擇器的實(shí)例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下2017-07-07
學(xué)習(xí)jQuey中的return false
這篇文章主要介紹了jQuey中的return false作用,以及解決jquery中的return false不起作用的方法,感興趣的小伙伴們可以參考一下2015-12-12
JS原生輪播圖的簡(jiǎn)單實(shí)現(xiàn)(推薦)
下面小編就為大家?guī)?lái)一篇JS原生輪播圖的簡(jiǎn)單實(shí)現(xiàn)(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07

