JavaScript实现时间上一天和下一天切换

1、先获取时间戳毫秒数

  

var date = new Date()//实例化时间戳
var time = date.getTime()//获取当前毫秒数

  

2、计算一天的毫秒数/获取页面元素

   

var  OneDay = 1000 * 60 * 60 *24; //计算一天的毫秒数
var ele = document.getElementById("show");//获取页面元素

  

3、计算当前时间的前一天并调用渲染

function gobefore(){
var m=time-OneDay;
  //把毫秒数转为时间
date.setTime(m);
  //调用排版渲染到页面
ele.innerHTML=MyDate();
}

4、计算当前时间的后一天并调用渲染

 

function goafter(){
var m=time+OneDay;
  //把毫秒数转为时间
date.setTime(m);
  //调用排版渲染到页面
ele.innerHTML=MyDate();
}

5、排版需要时调用

function MyDate(){
  //年月日排版
return `${date.getFullYear()}年${date.getMonth()}月${date.getDate()}日`;
}

  

JavaScript实现时间上一天和下一天切换的更多相关文章

  1. vue 实现上一周、下一周切换功能

    效果图: html 显示部分: js 显示部分: preNextBtn(val){ let _this = this; this.tableList = []; //数据重置为空 _this.show ...

  2. React-Native 之 GD (十四)小时风云榜 及 当前时间操作 及 上一小时、下一小时功能实现

    1.小时风云榜 GDHourList.js /** * 小时风云榜 */ import React, { Component } from 'react'; import { StyleSheet, ...

  3. JavaScript如何实现上拉加载,下拉刷新?

    转载地址: 面试官:JavaScript如何实现上拉加载,下拉刷新? 一.前言 下拉刷新和上拉加载这两种交互方式通常出现在移动端中 本质上等同于PC网页中的分页,只是交互形式不同 开源社区也有很多优秀 ...

  4. js获取上一个月、下一个月格式为yyyy-mm-dd的日期

    /** * 获取上一个月 * * @date 格式为yyyy-mm-dd的日期,如:2014-01-25 */ function getPreMonth(date) { var arr = date. ...

  5. PHP中使用Session配合Javascript实现文件上传进度条功能

    Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...

  6. JavaScript基于时间的动画算法

    转自:https://segmentfault.com/a/1190000002416071 前言 前段时间无聊或有聊地做了几个移动端的HTML5游戏.放在不同的移动端平台上进行测试后有了诡异的发现, ...

  7. JavaScript设计模式-17.装饰者模式(下)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 详解JavaScript UTC时间转换方法

    这篇文章主要介绍了JavaScript UTC时间转换方法,介绍了本地时间到UTC时间的转换.UTC日期到本地日期的转换,感兴趣的小伙伴们可以参考一下 一.前言 1.UTC: Universal Ti ...

  9. JavaScript日期时间格式化函数

    这篇文章主要介绍了JavaScript日期时间格式化函数分享,需要的朋友可以参考下 这个函数经常用到,分享给大家. 函数代码: //格式化参数说明: //y:年,M:月,d:日,h:时,m分,s:秒, ...

随机推荐

  1. WaitForSingleObject的作用[转]

    在多线程的情况下,有时候我们会希望等待某一线程完成了再继续做其他事情(比如主线程等待子线程结束完之后,自己再结束),要实现这个目的,可以使用Windows API函数WaitForSingleObje ...

  2. boost pointer container

    1. boost::ptr_vector #include <boost/ptr_container/ptr_vector.hpp> #include <iostream> i ...

  3. 阿里云异构计算团队亮相英伟达2018 GTC大会

    摘要: 首届云原生计算国际会议(KubeCon + CloudNativeCon,China,2018)在上海举办,弹性计算研究员伯瑜介绍了基于虚拟化.容器化编排技术的云计算操作系统PouchCont ...

  4. python 网络编程:socket

    在学习socket之前,我们先复习下相关的网络知识. OSI七层模型:应用层,表示层,会话层,传输层,网络层,数据链路层,物理层.OSI七层模型是由国际标准化组织ISO定义的网络的基本结构,不仅包括一 ...

  5. 在 MacBook 上安装 Ubuntu

    建立ubuntu 安裝U盤,加入usb port,按住option key 開機,正常安裝. 完成後,會缺少wifi drive sudo apt-get install bcmwl-kernel-s ...

  6. layui.form小例子

    layui.form小例子 需要引入layui的包 <!doctype html> <html> <head> <meta charset="utf ...

  7. 8. Jmeter导入jar包

    我们都知道Jmeter是Java编写的,所以有很多时候需要用到Java方面的知识.比如Jmeter前置处理器,就用到了很多Java知识.那么本章我们先介绍如何使用Jmeter导人jar包. 工具准备 ...

  8. python学习笔记:操作Excle

    import xlwt #写excel import xlrd #读excel import xlutils #修改excel 一.写操作 1.写Excel import xlwt #写excel,导 ...

  9. Java对象toString()方法

    对象的字符串表示以可读格式包含有关对象状态的信息.Object类的toString()方法表示字符串中类的对象.Object类提供了toString()方法的默认实现. 它返回一个以下格式的字符串: ...

  10. Android Studio3.3中Cannot resolve symbol ActivityTestRule

    最近在看<Android编程权威指南>,在Windows10下安装了Android Studio3.3,边看编练习书中的例子程序,看到第21章""音频播放与单元测试&q ...