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/jintianp/" class="tag_link" target="_blank">今天</a><a href="https://m.jb51.cc/tag/qianntian/" class="tag_link" target="_blank">前n天</a><a href="https://m.jb51.cc/tag/hountian/" class="tag_link" target="_blank">后n天</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/priqi/" 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/pmingtian/" class="tag_link" target="_blank">明天</a><a href="https://m.jb51.cc/tag/zuotian/" class="tag_link" target="_blank">昨天</a><a href="https://m.jb51.cc/tag/pzuotian/" class="tag_link" target="_blank">昨天</a><a href="https://m.jb51.cc/tag/zuotianp/" 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/07-30/10/71a2262aa7e5c72cb07d2f3e32b1d2a2.png" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/js/4739037.html" title="【JavaScript】聊一聊js中的浅拷贝与深拷贝与手写实现">【JavaScript】聊一聊js中的浅拷贝与深拷贝与手写实现</a>
              </div>
              <div class="summary">什么是深拷贝与浅拷贝？深拷贝与浅拷贝是js中处理对象或数据...</div>
            </div><div class="list_con">
              <div class="title">
                <a href="https://m.jb51.cc/js/4739036.html" title="【JavaScript】前端算法题（重建二叉树、反向输出链表每个节点）">【JavaScript】前端算法题（重建二叉树、反向输出链表每个节点）</a>
              </div>
              <div class="summary">前言 今天复习了一些前端算法题，写到一两道比较有意思的题：...</div>
            </div><div class="list_con">
                <img src="https://m.jb51.cc/res/2024/07-30/10/722d62c6b119ef7c0f54f9c0c68c2c56.jpg" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/js/4739035.html" title="【JavaScript】聊聊js中关于this的指向">【JavaScript】聊聊js中关于this的指向</a>
              </div>
              <div class="summary">最近在看回JavaScript的面试题，this 指向问题是入坑前端必须...</div>
            </div><div class="list_con">
                <img src="https://m.jb51.cc/res/2022/01-13/18/1662e1e23a972adfd4c7eb13ed97b0b9.gif" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/js/4675608.html" title="js如何实现弹出form提交表单？">js如何实现弹出form提交表单？</a>
              </div>
              <div class="summary">js如何实现弹出form提交表单？（图文+视频）</div>
            </div><div class="list_con">
                <img src="https://m.jb51.cc/res/2022/01-13/18/aefa150d17138168dd5f72e5326e0b21.png" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/js/4675588.html" title="js怎么获取复选框选中的值">js怎么获取复选框选中的值</a>
              </div>
              <div class="summary">js怎么获取复选框选中的值</div>
            </div><div class="list_con">
                <img src="https://m.jb51.cc/res/2022/01-13/18/0699e4dc91b71c1ec0d5eee3c437ab6d.gif" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/js/4675585.html" title="js如何实现倒计时跳转页面">js如何实现倒计时跳转页面</a>
              </div>
              <div class="summary">js如何实现倒计时跳转页面</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>
(function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>
<script src="https://m.jb51.cc/js/count.js"></script>
  </body>
</html>