JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】

本文实例讲述了JS获取日期的方法。分享给大家供大家参考，具体如下：

原理很简单，一天的时间的毫秒数是1000*60*60*24，

前n天的日期就是现在日期换成毫秒-n*1000*60*60*24。

再把这个值换成日期即可（通过setTime方法）

rush:js;"> www.jb51.cc 日期计算 <Meta name="Generator" content="EditPlus"> <Meta name="Author" content=""> <Meta name="Keywords" content=""> <Meta name="Description" content="">

<br/>
<input type="text" value="" name="bday" id="bday"/>天之前
<input type="button" onclick="bday()" value="计算"><br/>
<input type="text" value="" name="aday" id="aday"/>天之后
<input type="button" onclick="aday()" value="计算"><br/>
 </body>
 <script>
 ff();
function ff(){
 var obj=document.getElementById("num");
 var v1=obj.options[obj.selecte<a href="https://www.jb51.cc/tag/dind/" target="_blank" class="keywords">dind</a>ex].text;
 var v2=obj.options[obj.selecte<a href="https://www.jb51.cc/tag/dind/" target="_blank" class="keywords">dind</a>ex].value;
 var tvv=giveDateStr(getTargetday(v2));
 document.getElementById('ar').innerText=tvv;
}
function isInteger(obj) {
 var r = /^\+?[1-9][0-9]*$/;　　//正整数 
 return r.test(obj); 
}
function bday(){
 var bef=document.getElementById("bday").value;
 if(isInteger(bef)){
   var bvv=giveDateStr(getTargetday(-bef));
   document.getElementById('ar').innerText=bvv;
 }else{
   alert("请输入正整数！");
   document.getElementById("bday").value='';
   document.getElementById("bday").focus();
 }
<p>}<br />
function aday(){<br />
var atf=document.getElementById("aday").value;<br />
if(isInteger(atf)){<br />
var avv=giveDateStr(getTargetday(atf));<br />
document.getElementById('ar').innerText=avv;<br />
}else{<br />
alert("请输入正整数！");<br />
document.getElementById("aday").value='';<br />
document.getElementById("aday").focus();<br />
}<br />
}<br />
function getTargetday(num){<br />
var number=null;<br />
if(num==null||num==0){<br />
number=0;<br />
}else{<br />
number=num;<br />
}<br />
var  today=new  Date();<br />
var  targetday_milliseconds=today.getTime()+1000<em>60</em>60<em>24</em>number;<br />
var  targetday=new  Date();<br />
targetday.setTime(targetday_milliseconds); //注意，这行是关键<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a><br />
return targetday;<br />
}<br />
function giveDateStr(dd){<br />
var riqiyue=dd.getMonth()+1;<br />
var riqihao=dd.getDate();<br />
var riqixingqi=null;<br />
if(dd.getDay()=='0'){<br />
xingqi="星期日";<br />
}else if(dd.getDay()=='1'){<br />
xingqi='星期一';<br />
}else if(dd.getDay()=='2'){<br />
xingqi='星期二';<br />
}else if(dd.getDay()=='3'){<br />
xingqi='星期三';<br />
}else if(dd.getDay()=='4'){<br />
xingqi='星期四';<br />
}else if(dd.getDay()=='5'){<br />
xingqi='星期五';<br />
}else if(dd.getDay()=='6'){<br />
xingqi='星期六';<br />
}<br />
var riqi=riqiyue+"月"+riqihao+"日"+"("+xingqi+")";<br />
return riqi;<br />
}</p>
</script>
</html>
</pre>
</div>
<p>运行<a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>如下：</p>
<p><p class="pic_center"><img src="https://files.jb51.cc/file_images/article/201709/2017928103531423.gif?2017828103549" alt="" /></p></p>
<p><span style="color: #800000"><h3>PS：这里再为大家推荐几款比较实用的天数计算在线工具供大家使用：</h3></p>
<p><span style="color: #ff6600"><h3>在线日期/天数计算器：
</h3><a target="_blank" href="http://tools.jb51.cc/jisuanqi/date_jisuanqi">http://tools.jb51.cc/jisuanqi/date_jisuanqi</a></p>
<p><span style="color: #ff6600"><h3>在线日期计算器/相差天数计算器：
</h3><a target="_blank" href="http://tools.jb51.cc/jisuanqi/datecalc">http://tools.jb51.cc/jisuanqi/datecalc</a></p>
<p><span style="color: #ff6600"><h3>在线日期天数差计算器：
</h3><a target="_blank" href="http://tools.jb51.cc/jisuanqi/onlinedatejsq">http://tools.jb51.cc/jisuanqi/onlinedatejsq</a></p>
<p><span style="color: #ff6600"><h3>在线天数计算器：
</h3><a target="_blank" href="http://tools.jb51.cc/jisuanqi/datejsq">http://tools.jb51.cc/jisuanqi/datejsq</a></p>
<p>更多关于JavaScript相关<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>感兴趣的读者可查看本站专题：《<a target="_blank" href="//www.jb51.cc/Special/321.htm">JavaScript时间与日期操作技巧总结</a>》、《<a target="_blank" href="//www.jb51.cc/Special/936.htm">JavaScript+HTML5特效与技巧汇总</a>》、《<a target="_blank" href="//www.jb51.cc/Special/439.htm">JavaScript错误与调试技巧总结</a>》、《<a target="_blank" href="//www.jb51.cc/Special/297.htm">JavaScript数据结构与算法技巧总结</a>》及《<a target="_blank" href="//www.jb51.cc/Special/119.htm">JavaScript数学运算<a href="https://www.jb51.cc/tag/yongfa/" target="_blank" class="keywords">用法</a>总结</a>》</p>
<p>希望本文所述对大家JavaScript程序设计有所帮助。</p><div class="topcard-tags"><a href="https://m.jb51.cc/tag/jintian/" class="tag_link" target="_blank">今天</a><a href="https://m.jb51.cc/tag/pjintian/" class="tag_link" target="_blank">今天</a><a href="https://m.jb51.cc/tag/riqi/" class="tag_link" target="_blank">日期</a><a href="https://m.jb51.cc/tag/riqip/" class="tag_link" target="_blank">日期</a><a href="https://m.jb51.cc/tag/mingtian/" class="tag_link" target="_blank">明天</a><a href="https://m.jb51.cc/tag/zuotian/" class="tag_link" target="_blank">昨天</a></div>
                </div>
              </div>
          </div>
            
            <div class="clearfix"></div>

            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="card">
                <div class="title"><h1>相关文章</h1></div><div class="list_con">
                <img src="https://m.jb51.cc/res/2024/09-25/18/879e7ec08a36083a57dfc8b44214469d.gif" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/js/4742335.html" title="自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗">自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗</a>
              </div>
              <div class="summary">前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为l...</div>
            </div><div class="list_con">
                <img src="https://m.jb51.cc/res/2024/09-25/18/84bd76d88488cafdfb2789b5a991fecf.png" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/js/4742334.html" title="nice-validator表单验证插件的简单使用">nice-validator表单验证插件的简单使用</a>
              </div>
              <div class="summary">前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...</div>
            </div><div class="list_con">
                <img src="https://m.jb51.cc/res/2024/09-25/18/cf659cff914621d918c6072273c30973.gif" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/js/4742333.html" title="基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现">基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现</a>
              </div>
              <div class="summary">前言 图片上传是web项目常见的需求，我基于之前的博客的代码...</div>
            </div><div class="list_con">
                <img src="https://m.jb51.cc/res/2024/09-25/18/02f80db4fdf55f3a24674e2854e018f2.png" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/js/4742332.html" title="踹掉后端，前端导出Excel！">踹掉后端，前端导出Excel！</a>
              </div>
              <div class="summary">前言 导出Excel文件这个功能，通常都是在后端实现返回前端一...</div>
            </div><div class="list_con">
                <img src="https://m.jb51.cc/res/2024/09-25/18/db8dce1453ed09a8230451f2a9fcdc68.png" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/js/4742331.html" title="Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量">Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量</a>
              </div>
              <div class="summary">前言 众所周知，js是单线程的，从上往下，从左往右依次执行，...</div>
            </div><div class="list_con">
                <img src="https://m.jb51.cc/res/2024/09-25/18/1cd1c972ce822d1a99b7d1b2c8f9cfcd.png" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/js/4742330.html" title="select标签 禁止选择但又能通过序列化form表单传值到后台">select标签 禁止选择但又能通过序列化form表单传值到后台</a>
              </div>
              <div class="summary">前言 项目开发中，我们可能会碰到这样的需求：select标签，禁...</div>
            </div></div>
            </div>
           
        </div>
      </div>
    <footer id="footer">
    <div class="container">
        <div class="copyright">
            Copyright © 2018 编程之家. 当前版本 V7.0.16<br>
            <span class="ml5">编程之家 版权所有 
            <a href="https://beian.miit.gov.cn/"  target="_blank"  rel="nofollow">闽ICP备13020303号-8</a>
        </div>
    </div>
</footer>
<script src="https://m.jb51.cc/js/count.js"></script>
  </body>
</html>