使用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 相关文章推荐
JS 判断undefined的实现代码
Nov 26 Javascript
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
JS的参数传递示例介绍
Feb 08 Javascript
浅谈JavaScript字符集
May 22 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
script标签属性用type还是language
Jan 21 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 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
一家之言的经验之谈php+mysql扎实个人基本功
2008/03/27 PHP
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
php设计模式之观察者模式的应用详解
2013/05/21 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
二级域名转向类
2006/11/09 Javascript
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
javascript常用的设计模式
2017/02/09 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
JS实现新建文件夹功能
2017/06/17 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
nuxt 路由、过渡特效、中间件的实现代码
2020/11/06 Javascript
[01:09:40]Newbee vs Pain 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
Flask框架web开发之零基础入门
2018/12/10 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
pyinstaller打包opencv和numpy程序运行错误解决
2019/08/16 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
如何用Python 加密文件
2020/09/10 Python
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
初中学生期末评语
2014/04/24 职场文书
法制教育演讲稿
2014/09/10 职场文书
2015年工程部工作总结
2015/04/30 职场文书
SpringBoot+VUE实现数据表格的实战
2021/08/02 Java/Android
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技