jq计算总时长
1： <style> .item { width: 500px; height: 50px; margin: 0 auto; text-align: center; font-size: 30px; color: orange; } strong { background-color: orange; padding: 0 10px; color: #fff; border-radius: 4px; } </style> 2： <div class="days-coming"> <div class="container"> <h3 class="title tittle">我们的恋爱时长</h3> <div class="timer_wrap"> {{-- 计时器--}} <div class="item"> <span><span class="day">00</span>天</span> <strong><span class="hour">00</span>时</strong> <strong><span class="min">00</span>分</strong> <strong><span class="second">00</span>秒</strong> </div> </div> </div> </div> 3： <script> var endTime = new Date("2021-10-06"); var dayel = document.querySelector(".day"); var hourel = document.querySelector(".hour"); var minel = document.querySelector(".min"); var secondel = document.querySelector(".second"); //计算 setInterval( function () { // 获取现在的时间 var nowTime = new Date(); // 相差的时间 var stamp = nowTime - endTime; // console.log(stamp); var day_ms = 24 * 60 * 60 * 1000; var hour_ms = 60 * 60 * 1000; var min_ms = 60 * 1000; var day = Math.floor(stamp / day_ms); var hour = Math.floor((stamp % day_ms) / hour_ms); var min = Math.floor((stamp % hour_ms) / min_ms); var s = Math.floor((stamp % min_ms) / 1000); // console.log(day,hour,min,s); dayel.innerText = wrap(day); hourel.innerText = wrap(hour); minel.innerText = wrap(min); secondel.innerText = wrap(s); }, 1000); function wrap(n) { return n>=10?n:"0"+n; } </script>
以上是从几年几月几日，到现在过去的天数 ，注意看字体的大小，以下是从现在距离以后还有多少天
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>恋爱倒计时</title> <style> h1 { width: 250px; margin: 100px auto 50px auto; } .item { width: 500px; height: 50px; margin: 0 auto; text-align: center; font-size: 30px; color: orange; } strong { background-color: orange; padding: 0 10px; color: #fff; border-radius: 4px; } </style> </head> <body> <h1>距离恋爱一千天,还有</h1> <div class="item"> <span><span class="day">00</span>天</span> <strong><span class="hour">00</span>时</strong> <strong><span class="min">00</span>分</strong> <strong><span class="second">00</span>秒</strong> </div> <script> alert("段铭锟和王娟的恋爱倒计时！"); alert("亲爱的乖!"); alert("爱你呀"); alert("恋爱一千天，珍惜到永远！"); var endTime = new Date("2021-4-2"); var dayel = document.querySelector(".day"); var hourel = document.querySelector(".hour"); var minel = document.querySelector(".min"); var secondel = document.querySelector(".second"); //计算 setInterval( function () { // 获取现在的时间 var nowTime = new Date(); // 相差的时间 var stamp = endTime - nowTime; // console.log(stamp); var day_ms = 24 * 60 * 60 * 1000; var hour_ms = 60 * 60 * 1000; var min_ms = 60 * 1000; var day = Math.floor(stamp / day_ms); var hour = Math.floor((stamp % day_ms) / hour_ms); var min = Math.floor((stamp % hour_ms) / min_ms); var s = Math.floor((stamp % min_ms) / 1000); // console.log(day,hour,min,s); dayel.innerText = wrap(day); hourel.innerText = wrap(hour); minel.innerText = wrap(min); secondel.innerText = wrap(s); }, 1000); function wrap(n) { return n>=10?n:"0"+n; } </script> </body> </html>
