使用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获取月的最后一天与JS得到一个月份最大天数的实例代码
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页</title> <script language="javascript"> function getLastDay(year,month) { var new_year = year; //取当前的年份 var new_month = month++;//取下一个月的第一天,方便计
-
js获取某月的最后一天日期的简单实例
复制代码 代码如下: //获得某月的最后一天 function getLastDay(year,month) { var new_year = year; //取当前的年份 var new_month = month++;//取下一个月的第一天,方便计算(最后一天不固定) if(month>12) {
-
js获取当前月的第一天和最后一天的小例子
引入XDate.JS 这个小插件,不知道的百度谷歌吧 代码如下: 复制代码 代码如下: var firstDate = new Date(); firstDate.setDate(1); //第一天 var endDate = new Date(firstDate); endDate.setMonth(firstDate.getMonth()+1); endDate.setDate(0); alert("第一天:"+new XDate(firstDate).toString('yyyy
-
使用JavaScript计算前一天和后一天的思路详解
要实现在页面上点击"前一天"或"后一天",页面上的时间改变. 首先让我们整理一下思路 如下图: 1.页面排版 首先我们需要拍好页面,例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body&
-
JavaScript中数组去重常用的五种方法详解
目录 1.对象属性(indexof) 2.new Set(数组) 3.new Map() 4.filter() + indexof 5.reduce() + includes 补充 原数组 const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}]; 1.对象属性(indexof) 利用对象属性key排除重复项 遍历数组,每次判断新数组中是否存在该属性,不存在就存储在新数组中 并把数组元素作为key,最后返
-
JavaScript变量声明的var、let、const详解
目录 前言 内容 JavaScript的变量声明 var的变量声明 变量声明在函数作用域中 变量重复声明 变量声明提升 怪异危险的var let和const的变量声明 块级作用域 不可重复声明 暂时性死区 使用好let和const 总结 参考资料 前言 一个程序语言在运行的过程中,变量的声明在整个程序的生命周期中,是不断在进行的过程.任何程序的计算都会涉及至少一个变量,而计算的结果的则可能会涉及到另外的一个或者多个变量.变量在使用前是要声明,变量声明的过程在计算机的底层,牵涉到的是内存空间和内存
-
JavaScript中自带的 reduce()方法使用示例详解
1.方法说明 , Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算,其效果就是: [x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4) 2. 使用示例 'use strict'; function string2int(s){ if(!s){ alert('the params empty'); return; } if
-
关于javascript中限定时间内防止按钮重复点击的思路详解
前面的话 有一天心血来潮,1分钟内重复点击了多次博客园首页的刷新博文列表的刷新按钮.果不其然,ip当时就被禁用了.后来,重启自己的路由器,重新获取ip才可以访问博客园主页.那么,设置一个限定时间内(比如1秒)防止按钮被重复点击的方法会不会更好一点呢? 思路一 最直接的思路可能就是点击按钮后,按钮的事件绑定函数解绑,1s后重新绑定函数 <button id="btn">0</button> <script> btn.onclick = function
-
JavaScript动画实例之粒子文本的实现方法详解
1.粒子文本的实现原理 粒子文本的实现原理是:使用两张 canvas,一张是用户看不到的canvas1,用来绘制文本:另一张是用户看到的canvas2,用来根据canvas1中绘制的文本数据来生成粒子. 先在canvas1中用如下的语句绘制待显示的文本. ctx1.font = '100px PingFang SC'; ctx1.textAlign = 'center'; ctx1.baseline = 'middle'; ctx1.fillText('Happy New Year',canva
-
JavaScript实现沿五角星形线摆动的小圆实例详解
五角星形线的笛卡尔坐标方程式可设为: r=10+(3*sin(θ*2.5))^2 x=r*cos(θ) y=r*sin(θ) (0≤θ≤2π) 根据这个曲线方程,在[0,2π]区间取一系列角度值,根据给定角度值计算对应的各点坐标,然后在计算出的坐标位置绘制一个填充色交替变换的小圆,从而得到沿五角星形线摆动的小圆的动画效果. 编写如下的HTML代码. <!DOCTYPE html> <html> <head> <title>沿曲线摆动的小圆</titl
-
JavaScript实现网页带动画返回顶部的方法详解
服务器由阿里云换到了腾讯云,我的代码之前一直都是托管在git上的,但是搬家的时候,可能是着急了,之前有些新加的文件没有托管到git上,所以,就丢了. 不过无所谓了,可以重新写嘛. 之前博客的回到顶部功能是请之前的一位前端的同事帮忙写的,这次打算自己尝试一下. 返回顶部无非就是锚点. 第一个版本: <body style="height:2000px;"> <div id="topAnchor"></div> <a href=
-
JavaScript变量or循环中的var和let详解
目录 在for循环中使用var声明初始化带来的问题 解决方法 使用闭包 使用let变量初始化 for循环怎么处理用let和var声明的初始化变量? 总结 在for循环中使用var声明初始化带来的问题 // 一道经典面试题: var funcs = []; for (var i = 0; i < 3; i++) { funcs[i] = function() { console.log("My value: " + i) }; } for (var j = 0; j < 3;
-
JavaScript this指向绑定方式及不适用情况详解
目录 前言 问题复现 调用位置 默认绑定 隐式绑定 显式绑定 new 绑定 不适用的情况 总结 前言 JavaScript 中的 this 指向问题对于 web 前端入行不深的人来说是个比较复杂的问题.特写此文章来记录最近遇到的关于匿名函数中 this 指向问题的思考和感悟. 问题复现 最近在研究函数防抖场景时看到如下代码: function debounce(fn, delay) { var timer; // 维护一个 timer return function () { var _this
随机推荐
- 远程数据库的表超过20个索引的影响详细解析
- JavaScript操作表单_动力节点Java学院整理
- Windows Powershell Where-Object 条件过滤
- java之File对象对文件的操作常用的几个方法(推荐)
- MongoDB快速入门笔记(三)之MongoDB插入文档操作
- Javascript实现真实字符串剩余字数提示的实例代码
- 导入extjs、jquery 文件时$使用冲突问题解决方法
- ASP.NET WebService中使用ASP.NET_SessionId的问题说明
- 什么情况下可以不写PHP的闭合标签“?>”
- JSP中动态合并单元格的实例代码
- PHP中全面阻止SQL注入式攻击分析小结
- htaccess 防盗链,防止目录浏览等10大技巧
- 浅析JavaScript中break、continue和return的区别
- vbscript语句中“&H”专用于16进制数表示
- sqlserver 2000中每个服务器角色的解释
- 使用JQUERY进行后台页面布局控制DIV实现左右式
- 实现easyui的datagrid导出为excel的示例代码
- java中利用List的subList方法实现对List分页(简单易学)
- 详解Android原生json和fastjson的简单使用
- Django中ORM表的创建和增删改查方法示例