使用JavaScript计算前一天和后一天的思路详解


Posted in Javascript onDecember 20, 2019

要实现在页面上点击“前一天”或“后一天”,页面上的时间改变。

首先让我们整理一下思路

如下图:

使用JavaScript计算前一天和后一天的思路详解

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、获取时间戳

2.1、获取1970年到现在的时间戳

var date = new Date();
var time = date.getTime();//当前的时间到1970年凌晨的时间戳

2.2、获取一天的毫秒数(计算)

var oneDay = 1000*60*60*24;//一天的毫秒数

3、封装日期格式化方法

以下代码是把日期封装起来,调用方便。

function myGetDate(d){
return `${d.getFullYear()}年${d.getMonth()+1}月${d.getDate()}日`;
}

4、获取页面元素/计算当前时间的前一天(后一天)并调用渲染

var ele = document.getElementById("show");//获取页面元素

function gobefore(){
  var m=time-OneDay;<br>//把毫秒数转为时间
  date.setTime(m);<br>
//调用排版渲染到页面
  ele.innerHTML=MyDate();
}

function goafter(){
  var m=time+OneDay;<br>
//把毫秒数转为时间
  date.setTime(m);<br>
//调用排版渲染到页面
  ele.innerHTML=MyDate();
}

这样我们就实现了使用JavaScript简单计算前一天和后一天。

总结

以上所述是小编给大家介绍的使用JavaScript计算前一天和后一天的思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
基于jquery实现漂亮的动态信息提示效果
Aug 02 Javascript
什么是DOM(Document Object Model)文档对象模型
Mar 05 Javascript
javascript实现简单加载随机色方块
Dec 25 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
微信小程序模版渲染详解
Jan 26 Javascript
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 Javascript
利用vscode调试编译后的js代码详解
May 14 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
js正则匹配多个全部数据问题
Dec 20 #Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 #Javascript
Vuex实现数据共享的方法
Dec 20 #Javascript
React 实现车牌键盘的示例代码
Dec 20 #Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 #jQuery
JavaScript实现简单计算器功能
Dec 19 #Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 #Javascript
You might like
探讨如何把session存入数据库
2013/06/07 PHP
解析php中反射的应用
2013/06/18 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
php批量修改表结构实例
2017/05/24 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
javascript编程起步(第六课)
2007/01/10 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
由ReactJS的Hello world说开来
2015/07/02 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
vue项目实现图片上传功能
2019/12/23 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
Django中的CBV和FBV示例介绍
2018/02/25 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
python中实现控制小数点位数的方法
2019/01/24 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
详解python中@的用法
2019/03/27 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
土木工程个人自荐信范文
2013/11/30 职场文书
主治医师岗位职责
2013/12/10 职场文书
聘任证明怎么写
2015/03/02 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
Python移位密码、仿射变换解密实例代码
2021/06/27 Python
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏