脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 计算前一天后一天

使用JavaScript计算前一天和后一天的思路详解

 更新时间：2019年12月20日 10:18:22   作者：小布娃娃  
这篇文章主要介绍了使用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计算前一天和后一天的思路详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

相关文章

  • 微信小程序wxss如何引用外部CSS文件以及iconfont

    微信小程序wxss如何引用外部CSS文件以及iconfont

    这篇文章主要给大家介绍了关于微信小程序wxss如何引用外部CSS文件以及iconfont的相关资料，文中通过图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • js仿小米二级菜单显示效果

    js仿小米二级菜单显示效果

    这篇文章主要为大家详细介绍了js仿小米二级菜单显示效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 前端实现电子签名的步骤及注意事项

    前端实现电子签名的步骤及注意事项

    本文详细介绍了前端技术中电子签名的实现方法,包括技术选型如HTML5 Canvas和SVG,以及实现步骤和数据安全措施,电子签名确保了法律效力和数据的安全性,适用于多种文件签署需求,需要的朋友可以参考下
    2024-11-11
  • JS验证IP，子网掩码，网关和MAC的方法

    JS验证IP，子网掩码，网关和MAC的方法

    这篇文章主要介绍了JS验证IP，子网掩码，网关和MAC的方法,涉及javascript正则表达式的相关使用技巧,需要的朋友可以参考下
    2015-07-07
  • js字符串替换所有的指定字符或文字(推荐replaceAll方法)

    js字符串替换所有的指定字符或文字(推荐replaceAll方法)

    要实现js字符串替换所有的某个字符，推荐大家使用replaceAll方法，默认不是所有浏览器都兼容，所以这里给出一个解决方案,需要的朋友可以参考下
    2014-07-07
  • 提升PHP安全：8个必须修改的PHP默认配置

    提升PHP安全：8个必须修改的PHP默认配置

    这篇文章主要介绍了提升PHP安全：8个必须修改的PHP默认配置,PHP.ini中的默认配置是面向开发者的,如果是生产环境是必须要修改一些配置的,需要的朋友可以参考下
    2014-11-11
  • 原生js实现鼠标跟随效果

    原生js实现鼠标跟随效果

    本文主要分享了原生js实现鼠标跟随效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • 微信小程序单选框组应用详解

    微信小程序单选框组应用详解

    这篇文章主要为大家详细介绍了微信小程序单选框组应用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • ES6的异步终极解决方案分享

    ES6的异步终极解决方案分享

    这篇文章主要给大家介绍了关于ES6的异步终极解决方案，文中通过示例代码介绍的非常详细，对大家学习或者使用ES6具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-07-07
  • 基于JavaScript 实现拖放功能

    基于JavaScript 实现拖放功能

    本文通过实例代码给大家介绍了JavaScript 实现拖放功能，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09

最新评论