使用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 相关文章推荐
javascript字典探测用户名工具
Oct 05 Javascript
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
js调用activeX获取u盘序列号的代码
Nov 21 Javascript
javascript 二进制运算技巧解析
Nov 27 Javascript
利用JS判断用户是否上网(连接网络)
Dec 23 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
May 21 Javascript
JS基于Mootools实现的个性菜单效果代码
Oct 21 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
学习Bootstrap滚动监听 附调用方法
Jul 02 Javascript
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
three.js中文文档学习之创建场景
Nov 20 Javascript
详解react native页面间传递数据的几种方式
Nov 07 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实现上传文件并存进数据库的方法
2015/07/16 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
Vue实现购物车功能
2017/04/27 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
jQuery实现电梯导航模块
2020/12/22 jQuery
使用Python操作excel文件的实例代码
2017/10/15 Python
简单谈谈python基本数据类型
2018/09/26 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
地理科学专业毕业生求职信
2013/10/15 职场文书
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
测绘工程专业个人自我评价
2013/12/01 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
护士求职信范文
2014/05/24 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
上班离岗检讨书
2014/09/10 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
2014年文秘工作总结
2014/11/25 职场文书
先进班组事迹材料
2014/12/25 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python