使用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使用正则获取url上的某个参数
Sep 04 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
Apr 24 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
简单的Vue SSR的示例代码
Jan 12 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
浅析vue-router实现原理及两种模式
Feb 11 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 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伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
php 启动报错如何解决
2014/01/17 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
php基于数组函数实现关联表的编辑操作示例
2017/07/04 PHP
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
jQuery父级以及同级元素查找介绍
2013/09/04 Javascript
浅析node.js中close事件
2014/11/26 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
JavaScript实现横版菜单栏
2020/03/17 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
python批量导入数据进Elasticsearch的实例
2018/05/30 Python
python实现猜数字小游戏
2020/03/24 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
django 取消csrf限制的实例
2020/03/13 Python
浅谈Python3中print函数的换行
2020/08/05 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
经销商年会策划方案
2014/05/29 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
火烧圆明园观后感
2015/06/03 职场文书
2015大学生暑假调查报告
2015/07/13 职场文书
Golang: 内建容器的用法
2021/05/05 Golang
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL