?

?

HTML

<div class="con"><div class="time">選取時(shí)間 <input type="datetime-local" name="user_date"><div class="timeresult">目標(biāo)時(shí)間：<span></span></div></div><div class="count"><div class="btn">計(jì)算倒計(jì)時(shí)</div><div class="nowtime">當(dāng)前時(shí)間：<span></span></div><div class="result">倒計(jì)時(shí)：<span></span></div></div><div class="start">開始</div><div class="end">結(jié)束</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

// 選擇的時(shí)間 var time; // 中間變量，傳遞時(shí)間 var temp; // 中間變量，傳遞時(shí)間差值 var tempsub; // 當(dāng)前時(shí)間 var timenow; // 時(shí)間差 var sub; $("input").on("blur", function() {if ($("input").val() === "") {time = "請(qǐng)選擇完整時(shí)間"} else {sub = new Date($("input").val()) - new Date();if (sub <= 0) {time = "請(qǐng)選擇大于當(dāng)前時(shí)間"} else {gettimenow($("input").val());// 函數(shù)獲取的結(jié)果賦值給timetime = temp;}}$(".timeresult span").html(time); }) // 點(diǎn)擊開始，開啟定時(shí)器 $(".start").on("click", function() {timer = setInterval(function() {// 獲取當(dāng)前時(shí)間 gettimenow();// 當(dāng)前時(shí)間渲染$(".nowtime span").html(temp);// 獲取時(shí)間差sub = new Date($("input").val()) - new Date();// 判斷時(shí)間差if (sub <= 0) {tempsub = "選擇時(shí)間小于當(dāng)前時(shí)間"} else if (isNaN(sub)) {tempsub = "選擇時(shí)間未選擇完整"} else {gettimesub(sub);}// 渲染時(shí)間差$(".result span").html(tempsub);}, 1000);}) // 點(diǎn)擊結(jié)束，清除定時(shí)器 $(".end").on("click", function() {clearInterval(timer); }) // 獲取時(shí)間 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; }; // 計(jì)算倒計(jì)時(shí)時(shí)間 function gettimesub(sub) {// 天數(shù)var days = Math.floor(sub / (24 * 3600 * 1000));// 小時(shí)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 + "時(shí) " + minutes + "分 " + seconds + "秒";}

?

效果圖：

?

轉(zhuǎn)載于:https://www.cnblogs.com/sharing1986687846/p/10315078.html

總結(jié)

以上是生活随笔為你收集整理的JS时间倒计时的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。