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