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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
· 25岁的心里话