使用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+xml+ajax的无刷新树结构(无css,后台是c#)
Jun 02 Javascript
jQuery中end()方法用法实例
Jan 08 Javascript
JS判断是否长按某一键的方法
Mar 02 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
JavaScript 基础函数_深入剖析变量和作用域
May 18 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
常用的几个JQuery代码片段
Mar 13 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
vue实现的下拉框功能示例
Jan 29 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 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 adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
用PHP程序实现支持页面后退的两种方法
2008/06/30 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
2014/06/23 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
Python 中的 else详解
2016/04/23 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
pandas的排序和排名的具体使用
2019/07/31 Python
python学生管理系统的实现
2020/04/05 Python
flask开启多线程的具体方法
2020/08/02 Python
python raise的基本使用
2020/09/10 Python
python如何写个俄罗斯方块
2020/11/06 Python
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
一些Solaris面试题
2015/12/22 面试题
英语系本科生个人求职信
2013/09/21 职场文书
实习生自荐信范文分享
2013/11/27 职场文书
高中毕业生生活的自我评价
2013/12/08 职场文书
三年大学生活自我鉴定
2014/01/21 职场文书
八一演出活动方案
2014/02/03 职场文书
意向协议书
2015/01/27 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
nginx安装以及配置的详细过程记录
2021/09/15 Servers
nginx访问报403错误的几种情况详解
2022/07/23 Servers