js毫秒转换天时分秒/动态倒计时

<script language="JavaScript">
  
  function getQueryString(name) {
    var reg =new RegExp("(^|&)"+ name +"=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r !=null) return unescape(r[2]); returnnull;
  }

  var currentDate = new Date();
  var strEndTime = getQueryString("EndTime");
  var EndTime=new Date(strEndTime);
  
  var days= EndTime - currentDate; 
  EndTimeMsg = parseInt(days / 1000);//精确到秒

  function show() {
    h = Math.floor(EndTimeMsg / 60 / 60);
    m = Math.floor((EndTimeMsg - h * 60 * 60) / 60);
    s = Math.floor((EndTimeMsg - h * 60 * 60 - m * 60));
    document.getElementById("DD").innerHTML = parseInt(h/24);
    document.getElementById("HH").innerHTML = h;
    document.getElementById("MM").innerHTML = m;
    document.getElementById("SS").innerHTML = s;
    EndTimeMsg--;
    if (EndTimeMsg < 0)
    {
        document.getElementById("DD").innerHTML = "0";
        document.getElementById("HH").innerHTML = "00";
        document.getElementById("MM").innerHTML = "00";
        document.getElementById("SS").innerHTML = "00";;
    }
  }
  setInterval("show()", 1000)
  
</script>
<div>
  <strong id="DD"></strong>天 <strong id="HH"></strong>时 <strong id="MM"></strong>分 <strong id="SS"></strong></div>

 

转载于:https://www.cnblogs.com/weixin186/p/6133694.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<template> <div class="countdown"> <div class="countdown-item"> <div class="countdown-value">{{ days }}</div> <div class="countdown-label"></div> </div> <div class="countdown-item"> <div class="countdown-value">{{ hours }}</div> <div class="countdown-label">小时</div> </div> <div class="countdown-item"> <div class="countdown-value">{{ minutes }}</div> <div class="countdown-label">分钟</div> </div> <div class="countdown-item"> <div class="countdown-value">{{ seconds }}</div> <div class="countdown-label">钟</div> </div> <div class="countdown-item"> <div class="countdown-value">{{ milliseconds }}</div> <div class="countdown-label">毫秒</div> </div> </div> </template> <script> import { ref, watch, onMounted } from 'vue' export default { setup() { const days = ref('00') const hours = ref('00') const minutes = ref('00') const seconds = ref('00') const milliseconds = ref('00') let intervalId const startCountdown = (endDate) => { clearInterval(intervalId) const now = new Date().getTime() const distance = endDate - now if (distance <= 0) { clearInterval(intervalId) } else { const d = Math.floor(distance / (1000 * 60 * 60 * 24)) const h = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) const m = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)) const s = Math.floor((distance % (1000 * 60)) / 1000) const ms = Math.floor(distance % 1000) days.value = d < 10 ? `0${d}` : d hours.value = h < 10 ? `0${h}` : h minutes.value = m < 10 ? `0${m}` : m seconds.value = s < 10 ? `0${s}` : s milliseconds.value = ms < 10 ? `00${ms}` : ms < 100 ? `0${ms}` : ms } } onMounted(() => { const endDate = new Date('2022/01/01').getTime() startCountdown(endDate) intervalId = setInterval(() => { startCountdown(endDate) }, 1) }) return { days, hours, minutes, seconds, milliseconds } } } </script> <style> .countdown { display: flex; justify-content: center; align-items: center; font-size: 2rem; font-weight: bold; } .countdown-item { display: flex; flex-direction: column; align-items: center; margin: 0 0.5rem; } .countdown-label { font-size: 0.8rem; font-weight: normal; } </style>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值