?

?

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());// 函數(shù)獲取的結果賦值給timetime = 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) {// 天數(shù)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 + "秒";}

?

效果圖：

?

轉載于:https://www.cnblogs.com/sharing1986687846/p/10315078.html

總結

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

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