使用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 相关文章推荐
js 立即调用的函数表达式如何写
Jan 12 Javascript
document.write的几点使用心得
May 14 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
详解jQuery中的easyui
Sep 02 jQuery
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 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来实现网络服务
2009/09/15 PHP
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
解析百度搜索结果link?url=参数分析 (全)
2012/10/09 PHP
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
div移动 输入框不能输入的问题
2009/11/19 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2011/06/27 Javascript
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
微信小程序实现点赞、取消点赞功能
2018/11/02 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
Python学习笔记_数据排序方法
2014/05/22 Python
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
Python 中的 else详解
2016/04/23 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
一行python实现树形结构的方法
2019/08/09 Python
Python版中国省市经纬度
2020/02/11 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
2015年保险公司个人工作总结
2015/05/22 职场文书
大队委员竞选稿
2015/11/20 职场文书
2016年教师节感言
2015/12/09 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python
深入理解python协程
2021/06/15 Python
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript
Python实现照片卡通化
2021/12/06 Python
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript