JavaScript實(shí)現(xiàn)簡(jiǎn)單日期特效
JavaScript之日期特效的具體代碼,供大家參考,具體內(nèi)容如下
直接上代碼:
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <style type='text/css'>*{ padding: 0; margin: 0;}#date{ width: 450px; height: 300px; background-color: darkorange; border-radius: 10px; margin: 100px auto;}#nowDate{ width: 450px; height: 60px; line-height: 60px; text-align: center; color: #fff; font-size: 26px;}#day{ width: 200px; height: 200px; line-height: 200px; background-color: orchid; margin: 0 auto; text-align: center;} </style></head><body> <div id='date'><p id='nowDate'></p><p id='day'></p> </div> <script type='text/javascript'>// 獲取標(biāo)簽var nowDate = document.getElementById('nowDate');var day = document.getElementById('day');// 用定時(shí)器 更新時(shí)間的變化setInterval(nowNumTime,1000);nowNumTime();function nowNumTime(){ var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); var temp = ’’ + (hour>12 ? hour-12:hour); var year = now.getFullYear(); var month = now.getMonth(); var d = now.getDate(); var week = now.getDay(); console.log(week); //索引 var weeks = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六']; // console.log(temp); if (hour ===0){temp = ’12’; } temp = temp + (minute <10 ? ’:0’:':'+minute); temp = temp + (second <10 ? ’:0’:':'+second); temp = temp + (hour>=12 ? ’ P.M.’:’ A.M.’); temp = `${year}年${month}月$rbxvvhb日 ${temp}${weeks[week]}`; // console.log(temp); nowDate.innerHTML = temp;} </script></body></html>
實(shí)現(xiàn)效果圖:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. ASP 信息提示函數(shù)并作返回或者轉(zhuǎn)向2. windows服務(wù)器使用IIS時(shí)thinkphp搜索中文無(wú)效問(wèn)題3. PHP設(shè)計(jì)模式中工廠模式深入詳解4. 淺談python出錯(cuò)時(shí)traceback的解讀5. .NET中l(wèi)ambda表達(dá)式合并問(wèn)題及解決方法6. Python importlib動(dòng)態(tài)導(dǎo)入模塊實(shí)現(xiàn)代碼7. python matplotlib:plt.scatter() 大小和顏色參數(shù)詳解8. Ajax實(shí)現(xiàn)表格中信息不刷新頁(yè)面進(jìn)行更新數(shù)據(jù)9. 利用promise及參數(shù)解構(gòu)封裝ajax請(qǐng)求的方法10. JSP數(shù)據(jù)交互實(shí)現(xiàn)過(guò)程解析
