使用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 相关文章推荐
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
轻量级javascript 框架Backbone使用指南
Jul 24 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
Bootstrap Img 图片样式(推荐)
Dec 13 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
Angular学习教程之RouterLink花式跳转
May 03 Javascript
JavaScript引用类型Object常见用法实例分析
Aug 08 Javascript
实现高性能javascript的注意事项
May 27 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 Javascript
Node.js 深度调试方法解析
Jul 28 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
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
python实现的简单猜数字游戏
2015/04/04 Python
Python 加密与解密小结
2018/12/06 Python
Python 3.6打包成EXE可执行程序的实现
2019/10/18 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
python 基于opencv实现高斯平滑
2020/12/18 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
FC-Moto丹麦:欧洲最大的摩托车服装和头盔商店之一
2019/08/20 全球购物
大学生军训感想
2014/02/16 职场文书
人力资源经理的岗位职责
2014/03/02 职场文书
《小猪家的桃花树》教学反思
2014/04/11 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers