使用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 相关文章推荐
使用jQuery的将桌面应用程序引入浏览器
Nov 19 Javascript
js数组的操作详解
Mar 27 Javascript
利用webqq协议使用python登录qq发消息源码参考
Apr 08 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
Nov 07 Javascript
node.js实现BigPipe详解
Dec 05 Javascript
JavaScript实现的多个图片广告交替显示效果代码
Sep 04 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
微信小程序自定义可滑动日历界面
Dec 28 Javascript
Vue实现导航栏的显示开关控制
Nov 01 Javascript
js实现淘宝首页的banner栏效果
Nov 26 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/03 冲泡冲煮
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
python字符串过滤性能比较5种方法
2017/06/22 Python
Python实现感知机(PLA)算法
2017/12/20 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
详解python中的闭包
2020/09/07 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
网络工程师自荐书范文
2014/04/01 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
鲁冰花观后感
2015/06/10 职场文书
2015年成本会计工作总结
2015/10/14 职场文书
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
MySQL8.0的WITH查询详情
2021/08/30 MySQL
python通过新建环境安装tfx的问题
2022/05/20 Python
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers