<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> ???</head> ???<style type="text/css"> ???????body { ???????????font-size: 20px; ???????} ???????input{ ???????????font-size: 40px; ???????} ???</style> ???<script> ???????window.onload = function() { ???????????var newtime = new Date(); //获取现在日期 ???????????var endtim = new Date("2018-06-3"); //设置结束日期 ???????????var psel = $("#countdown").val(Math.ceil((endtim - newtime) / 86400000)); //计算并输出 ???????} ???</script> ???<body> ???????距离设定日期还有：<input type="button" name="countdown" id="countdown" value="无数据" />天 ???</body></html>上面面这个因为是每天刷新一次，所以没有加setInterval，下面写一个复杂点的，可以输入日期的倒计时
直接上代码
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> ???</head> ???<style type="text/css"> ???????body { ???????????font-size: 20px; ???????????padding: 100px; ???????} ???????input { ???????????border: 0px; ???????????background-color: rgba(0, 0, 0, 0); ???????????font-size: 20px; ???????????width: 200px; ???????} ???????.ipt { ???????????font-size: 30px; ???????} ???????.djs { ???????????border: 0px; ???????????background-color: rgba(0, 0, 0, 0); ???????????font-size: 20px; ???????????width: 32px; ???????} ???????.four { ???????????width: 70px; ???????} ???????.three { ???????????width: 62px; ???????} ???????.two { ???????????width: 33px; ???????} ???</style> ???<script> ???????function start() { ???????????//定时器：每隔10毫秒刷新一次 ???????????var kill = window.setInterval("output()", 10); ???????} ???????function output() { ???????????//获取当前日期 ???????????var startTime = new Date(); ???????????//获取页面的日期组合成字符串 ???????????var et = $("#ey").val() + "-" + $("#em").val() + "-" + $("#ed").val() + " " + $("#eh").val() + ":" + $("#emin").val() + ":00"; ???????????//将字符串类型的日期格式化为标准日期格式 ???????????var endTime = new Date(et); ???????????//将格式化后的时间显示到页面 ???????????$("#EndTime").val(endTime); ???????????//计算时间差 ???????????var nTime = endTime.getTime() - startTime.getTime(); ???????????//计算天数 ???????????var d = Math.floor(nTime / 86400000); ???????????//计算小时 ???????????var h = Math.floor((nTime - (86400000 * d)) / 3600000); ???????????//计算分钟 ???????????var m = Math.floor((nTime - (86400000 * d) - (3600000 * h)) / 60000); ???????????//计算秒数 ???????????var s = Math.floor((nTime - (86400000 * d) - (3600000 * h) - (60000 * m)) / 1000); ???????????//计算毫秒数 ???????????var t = Math.floor((nTime % 1000)*100); ???????????//将计算后的数据显示到页面去 ???????????$("#d").val(d); ???????????$("#h").val(h); ???????????$("#m").val(m); ???????????$("#s").val(s); ???????????$("#t").val(t); ???????} ???</script> ???<body onload="start()"> ???????<div> ???????????设置结束时间为： ???????????<input class="ipt four" type="text" name="ey" id="ey" value="2018" /> 年 ???????????<input class="ipt two" type="text" name="em" id="em" value="06" /> 月 ???????????<input class="ipt two" type="text" name="ed" id="ed" value="19" /> 日 ???????????<input class="ipt two" type="text" name="eh" id="eh" value="00" /> : ???????????<input class="ipt two" type="text" name="emin" id="emin" value="00" /> ???????</div> ???????<div style="margin-top: 50px;"> ???????????获取到结束时间为：<input style="width: 500px;" type="text" name="EndTime" id="EndTime" value="无数据！"> ???????</div> ???????<div style="margin-top: 50px;"> ???????????倒计时还剩： ???????????<input class="ipt three" type="text" name="d" id="d" value="XXX" />天 ???????????<input class="djs" type="text" name="h" id="h" value="XX" />: ???????????<input class="djs" type="text" name="m" id="m" value="XX" />: ???????????<input class="djs" type="text" name="s" id="s" value="XX" /> ???????????<input class="djs" type="text" name="t" id="t" value="XX" /> ???????</div> ???</body></html>这个可以输入任意日期和时间来计算距离今天的时间，精确到毫秒，其实也很简单，懒得解释，看注释吧
js 倒计时
原文地址：http://blog.51cto.com/13993319/2287214