使用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 相关文章推荐
Ext.MessageBox工具类简介
Dec 10 Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
详解js的作用域、预解析机制
Feb 05 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 Javascript
js实现鼠标拖拽div左右滑动
Jan 15 Javascript
JS手写一个自定义Promise操作示例
Mar 16 Javascript
js实现金山打字通小游戏
Jul 24 Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 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
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
JavaScript使用cookie实现记住账号密码功能
2015/04/27 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
python去除所有html标签的方法
2015/05/05 Python
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
python3.6编写的单元测试示例
2019/08/17 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
初中优秀班集体申报材料
2014/05/01 职场文书
幼儿生日活动方案
2014/08/27 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
银行给客户的感谢信
2015/01/23 职场文书
政协委员个人总结
2015/03/03 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS
中国古风插画师排行榜:夏达第一,第三是阴阳师姑获鸟皮肤创作者
2022/03/18 国漫
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS