使用JavaScript計(jì)算前一天和后一天的思路詳解
要實(shí)現(xiàn)在頁面上點(diǎn)擊“前一天”或“后一天”,頁面上的時(shí)間改變。
首先讓我們整理一下思路
如下圖:
1、頁面排版
首先我們需要拍好頁面,例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button onclick="goBefore()">前一天</button> <button onclick="goAfter()">后一天</button> <div id="app"></div> </body> </html>
2、獲取時(shí)間戳
2.1、獲取1970年到現(xiàn)在的時(shí)間戳
var date = new Date(); var time = date.getTime();//當(dāng)前的時(shí)間到1970年凌晨的時(shí)間戳
2.2、獲取一天的毫秒數(shù)(計(jì)算)
var oneDay = 1000*60*60*24;//一天的毫秒數(shù)
3、封裝日期格式化方法
以下代碼是把日期封裝起來,調(diào)用方便。
function myGetDate(d){ return `${d.getFullYear()}年${d.getMonth()+1}月${d.getDate()}日`; }
4、獲取頁面元素/計(jì)算當(dāng)前時(shí)間的前一天(后一天)并調(diào)用渲染
var ele = document.getElementById("show");//獲取頁面元素 function gobefore(){ var m=time-OneDay;<br> //把毫秒數(shù)轉(zhuǎn)為時(shí)間 date.setTime(m);<br> //調(diào)用排版渲染到頁面 ele.innerHTML=MyDate(); } function goafter(){ var m=time+OneDay;<br> //把毫秒數(shù)轉(zhuǎn)為時(shí)間 date.setTime(m);<br> //調(diào)用排版渲染到頁面 ele.innerHTML=MyDate(); }
這樣我們就實(shí)現(xiàn)了使用JavaScript簡單計(jì)算前一天和后一天。
總結(jié)
以上所述是小編給大家介紹的使用JavaScript計(jì)算前一天和后一天的思路詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
更優(yōu)雅的微信小程序骨架屏實(shí)現(xiàn)詳解
這篇文章主要介紹了更優(yōu)雅的微信小程序骨架屏實(shí)現(xiàn)詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08javascript中對象的定義、使用以及對象和原型鏈操作小結(jié)
這篇文章主要介紹了javascript中對象的定義、使用以及對象和原型鏈操作,結(jié)合實(shí)例形式總結(jié)分析了javascript對象操作的常用技巧,需要的朋友可以參考下2016-12-12jacascript DOM節(jié)點(diǎn)——元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)、文本節(jié)點(diǎn)
這篇文章主要介紹了jacascript DOM節(jié)點(diǎn)——元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)、文本節(jié)點(diǎn),需要的朋友可以參考下2017-04-04JavaScript獲取上傳進(jìn)度的幾種方式實(shí)現(xiàn)
進(jìn)度條的應(yīng)用是為了顯示的告訴用戶文件上傳了多少,本文主要介紹了JavaScript獲取上傳進(jìn)度的幾種方式,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08javascript算法題 求任意一個1-9位不重復(fù)的N位數(shù)在該組合中的大小排列序號
從1--9中選取N個數(shù)字,組成不重復(fù)的N位數(shù),從小到大進(jìn)行編號,當(dāng)輸入其中任何一個數(shù)M時(shí),能找出該數(shù)字對應(yīng)的編號2012-07-07原生javascript實(shí)現(xiàn)圖片彈窗交互效果
這篇文章主要介紹了原生javascript實(shí)現(xiàn)圖片彈窗交互效果的方法及的相關(guān)資料,需要的朋友可以參考下2015-01-01firefox TBODY 用js顯示和隱藏時(shí)出現(xiàn)錯位的解決方法
今天幫別人寫一個網(wǎng)頁,發(fā)現(xiàn):當(dāng)用javascript動態(tài)設(shè)置tr.style.display = "block"顯示某行時(shí),使用IE瀏覽沒有問題,但使用firefox瀏覽時(shí)該行被移到了其它行的后面,很是詫異。2008-12-12JavaScript 斐波那契數(shù)列 倒序輸出 輸出100以內(nèi)的質(zhì)數(shù)代碼實(shí)例
這篇文章主要介紹了JavaScript 斐波那契數(shù)列 倒序輸出 輸出100以內(nèi)的質(zhì)數(shù)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09