使用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实现输入提示(自动完成)的实例代码
Jun 14 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
jQuery()方法的第二个参数详解
Apr 29 Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
Angular2实现组件交互的方法分析
Dec 19 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
详解如何探测小程序返回到webview页面
May 14 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 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生成带有雪花背景的验证码
2008/09/28 PHP
深入php var_dump()函数的详解
2013/06/05 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
AngularJS自定义插件实现网站用户引导功能示例
2016/11/07 Javascript
require.js中的define函数详解
2017/07/10 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
Python编程中time模块的一些关键用法解析
2016/01/19 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
python 垃圾收集机制的实例详解
2017/08/20 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
python 元组的使用方法
2020/06/09 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
关于python scrapy中添加cookie踩坑记录
2020/11/17 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
自考毕业自我鉴定范文
2013/10/27 职场文书
中学实习教师自我鉴定
2013/12/12 职场文书
优秀班干部事迹材料
2014/01/26 职场文书
服务标兵事迹材料
2014/05/04 职场文书
优秀应届生求职信
2014/06/16 职场文书
三严三实心得体会范文
2014/10/13 职场文书
遗嘱格式范本
2015/08/07 职场文书