使用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计算前一天和后一天的思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • JS实现的A*寻路算法详解

    JS实现的A*寻路算法详解

    这篇文章主要介绍了JS实现的A*寻路算法,结合实例形式详细分析了A*寻路算法的概念、原理、实现技巧与相关注意事项,需要的朋友可以参考下
    2018-12-12
  • 微信小程序如何调用图片接口API并居中显示

    微信小程序如何调用图片接口API并居中显示

    这篇文章主要介绍了微信小程序如何调用图片接口API并居中显示,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-06-06
  • js实现下拉框选择要显示图片的方法

    js实现下拉框选择要显示图片的方法

    这篇文章主要介绍了js实现下拉框选择要显示图片的方法,涉及针对js操作select的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • JavaScript如何判断对象有某属性

    JavaScript如何判断对象有某属性

    这篇文章主要介绍了JavaScript如何判断对象有某属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • js给dropdownlist添加选项的小例子

    js给dropdownlist添加选项的小例子

    js给dropdownlist添加选项的小例子,需要的朋友可以参考一下
    2013-03-03
  • 原生js实现波浪导航效果

    原生js实现波浪导航效果

    这篇文章主要为大家详细介绍了原生js实现波浪导航效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • JS设置获取cookies的方法

    JS设置获取cookies的方法

    这篇文章主要介绍了JS设置获取cookies的方法,有需要的朋友可以参考一下
    2014-01-01
  • 基于JavaScript实现雪花许愿墙特效

    基于JavaScript实现雪花许愿墙特效

    新的一年就要到了,你一定有很多想许下的愿望吧!今天小编就为大家带来了一个基于Html+CSS+JavaScript实现的带雪花的许愿墙特效,需要的可以了解一下
    2022-01-01
  • echarts实现地图定时切换散点与多图表级联联动详解

    echarts实现地图定时切换散点与多图表级联联动详解

    这篇文章主要给大家介绍了关于echarts实现地图定时切换散点与多图表级联联动的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-08-08
  • JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】

    JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】

    这篇文章主要介绍了JS实现的将html转为pdf功能,结合完整实例形式分析了基于浏览器端插件jsPDF实现的HTML格式数据转换成pdf具体操作技巧,需要的朋友可以参考下
    2018-02-02

最新评论