使用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中判断函数是new还是()调用的区别说明
Apr 07 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
JS实用的动画弹出层效果实例
May 05 Javascript
js实现的二分查找算法实例
Jan 21 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 Javascript
浅谈js算法和流程控制
Dec 29 Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
详解升级react-router 4 踩坑指南
Aug 14 Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 Javascript
JS数组索引检测中的数据类型问题详解
Jan 11 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
header()函数使用说明
2006/11/23 PHP
PHP学习 运算符与运算符优先级
2008/06/15 PHP
QueryPath PHP 中的jQuery
2010/04/11 PHP
20个PHP常用类库小结
2011/09/11 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
图像替换新技术 状态域方法
2010/01/28 Javascript
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
再谈JavaScript线程
2015/07/10 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
jquery拖动层效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
通过Python实现自动填写调查问卷
2017/09/06 Python
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
教师实习自我鉴定
2013/12/14 职场文书
班主任工作经验材料
2014/02/02 职场文书
教育英语专业毕业生的求职信
2014/03/13 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
委托书格式要求
2015/01/28 职场文书
导游词之五台山
2019/10/11 职场文书
MySQL 数据 data 基本操作
2022/05/04 MySQL
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript