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組件 — 樹(shù)狀菜單(2)
基于Web標(biāo)準(zhǔn)的UI組件 — 樹(shù)狀菜單(2)...2006-09-09js實(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-09js獲取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-12JS原生輪播圖的簡(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