JS时间倒计时
HTML
<div class="con"> <div class="time"> 选取时间 <input type="datetime-local" name="user_date"> <div class="timeresult">目标时间:<span></span></div> </div> <div class="count"> <div class="btn">计算倒计时</div> <div class="nowtime">当前时间:<span></span></div> <div class="result">倒计时:<span></span></div> </div> <div class="start">开始</div> <div class="end">结束</div> </div>
CSS
body { background-color:#000; color:#fff; } .con { padding:20px; } .time { height:100px; line-height:50px; } .timeresult { height:50px; line-height:50px; } .count { height:150px; line-height:50px; } .start { width:50px; height:25px; border-radius:5px; float:left; margin-right:10px; background-color:#333; text-align:center; line-height:25px; cursor:pointer; } .end { width:50px; height:25px; border-radius:5px; float:left; background-color:#333; text-align:center; line-height:25px; cursor:pointer; }
JS
// 选择的时间 var time; // 中间变量,传递时间 var temp; // 中间变量,传递时间差值 var tempsub; // 当前时间 var timenow; // 时间差 var sub; $("input").on("blur", function() { if ($("input").val() === "") { time = "请选择完整时间" } else { sub = new Date($("input").val()) - new Date(); if (sub <= 0) { time = "请选择大于当前时间" } else { gettimenow($("input").val()); // 函数获取的结果赋值给time time = temp; } } $(".timeresult span").html(time); }) // 点击开始,开启定时器 $(".start").on("click", function() { timer = setInterval(function() { // 获取当前时间 gettimenow(); // 当前时间渲染 $(".nowtime span").html(temp); // 获取时间差 sub = new Date($("input").val()) - new Date(); // 判断时间差 if (sub <= 0) { tempsub = "选择时间小于当前时间" } else if (isNaN(sub)) { tempsub = "选择时间未选择完整" } else { gettimesub(sub); } // 渲染时间差 $(".result span").html(tempsub); }, 1000); }) // 点击结束,清除定时器 $(".end").on("click", function() { clearInterval(timer); }) // 获取时间 function gettimenow(val) { var datetemp; if (val === "" || val == null || val == undefined) { datetemp = new Date(); } else { datetemp = new Date(val); } var year = datetemp.getFullYear(); var month = datetemp.getMonth() + 1; var date = datetemp.getDate(); var hour = datetemp.getHours(); var minute = datetemp.getMinutes(); var second = datetemp.getSeconds(); if (month < 10) { month = "0" + month } if (date < 10) { date = "0" + date } if (hour < 10) { hour = "0" + hour } if (minute < 10) { minute = "0" + minute } if (second < 10) { second = "0" + second } temp = year + "年" + month + "月" + date + "日" + " " + hour + ":" + minute + ":" + second; }; // 计算倒计时时间 function gettimesub(sub) { // 天数 var days = Math.floor(sub / (24 * 3600 * 1000)); // 小时 var leave1 = sub % (24 * 3600 * 1000); var hours = Math.floor(leave1 / (3600 * 1000)); if (hours < 10) { hours = "0" + hours; } // 分钟 var leave2 = leave1 % (3600 * 1000); var minutes = Math.floor(leave2 / (60 * 1000)); if (minutes < 10) { minutes = "0" + minutes; } // 秒 var leave3 = leave2 % (60 * 1000); var seconds = Math.round(leave3 / 1000); if (seconds < 10) { seconds = "0" + seconds; } console.log(sub); tempsub = days + "天 " + hours + "时 " + minutes + "分 " + seconds + "秒"; }
效果图: