JavaScript代碼實(shí)現(xiàn)簡單日歷效果
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)簡單日歷效果的具體代碼，供大家參考，具體內(nèi)容如下
效果如下：
代碼：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } #box { width: 400px; height: 502px; border: 2px solid orange; margin: 50px auto; font-size: 48px; text-align: center; } #ym { height: 100px; line-height: 100px; } #d { height: 200px; line-height: 200px; background-color: orange; font-size: 72px; } #w { height: 100px; line-height: 100px; } #hms { height: 100px; line-height: 100px; } </style></head><body> <div id='box'> <div id='ym'></div> <div id='d'></div> <div id='w'></div> <div id='hms'></div> </div> <script> //調(diào)用 getDateAndTime方法 getDateAndTime(); //啟動(dòng)定時(shí)器，調(diào)用 getDateAndTime方法 window.setInterval(getDateAndTime, 1000); function getDateAndTime() { //獲取系統(tǒng)當(dāng)前的日期時(shí)間 var date = new Date(); //提取日期時(shí)間構(gòu)成的元素 var year = date.getFullYear(); var month = date.getMonth() + 1; var day = date.getDate(); var week = date.getDay(); var hour = date.getHours(); var minute = date.getMinutes(); var second = date.getSeconds(); //處理week的格式 switch (week) { case 0: week = ’星期日’; break; case 1: week = ’星期一’; break; case 2: week = ’星期二’; break; case 3: week = ’星期三’; break; case 4: week = ’星期四’; break; case 5: week = ’星期五’; break; case 6: week = ’星期六’; break; } //定義函數(shù)處理時(shí)分秒的格式 function formatHMS(time) { if (time < 10) { return ’0’ + time; } else { return time; } } //獲取頁面元素 var ym = document.getElementById(’ym’); var d = document.getElementById(’d’); var w = document.getElementById(’w’); var hms = document.getElementById(’hms’); //將日期時(shí)間寫入到頁面 ym.innerHTML = year + ’年’ + month + ’月’; d.innerHTML = day; w.innerHTML = week; hms.innerHTML = hour + ’時(shí)’ + minute + ’分’ + second + ’秒’; } </script></body></html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Python2.6版本pip安裝步驟解析2. python公司內(nèi)項(xiàng)目對接釘釘審批流程的實(shí)現(xiàn)3. python中Ansible模塊的Playbook的具體使用4. Python自動(dòng)化之定位方法大殺器xpath5. Python本地及虛擬解釋器配置過程解析6. Python 利用flask搭建一個(gè)共享服務(wù)器的步驟7. 基于python實(shí)現(xiàn)matlab filter函數(shù)過程詳解8. Python中Anaconda3 安裝gdal庫的方法9. python自動(dòng)化測試三部曲之request+django實(shí)現(xiàn)接口測試10. Python importlib模塊重載使用方法詳解
網(wǎng)公網(wǎng)安備