2021-01-20 腊八节快乐

最新推荐文章于 2021-01-22 18:48:41 发布

FlyingRabbits

最新推荐文章于 2021-01-22 18:48:41 发布

阅读量491

点赞数

本文链接：https://blog.csdn.net/qq_41498937/article/details/112899493

版权

这个博客展示了一个实时计时器的HTML和JavaScript实现，用于计算猫咪丢失的具体时间，包括天数、小时数、分钟数和秒数。代码中定义了开始时间，并通过JavaScript计算与当前时间的差距，然后将结果显示在页面上。每秒更新一次，帮助用户跟踪流逝的时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

只能贴样式不能全用代码。也不支持js。

先贴下代码，看不懂就百度吧。

毕竟，一个丢了猫的人，能有什么心情呢？猫猫回家连接

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type"content="text/html; charset=gb2312"/>
    <title>时间管理局</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body>
    
  <main id="clock">
    <div><p>猫咪丢失已经过去</p></div>
    <!-- CLOCK -->
  <div id="timer" class="clock" >

    <div class="numbers">
      <p class="days"></p>
      <p class="placeholder">88</p>
    </div>
    <div class="colon">
      <p>天</p>
    </div>

    <div class="numbers">
      <p class="hours"></p>
      <p class="placeholder">88</p>
    </div>
    <div class="colon">
      <p>时</p>
    </div>

    <div class="numbers">
      <p class="minutes"></p>
      <p class="placeholder">88</p>
    </div>
    <div class="colon">
      <p>分</p>
    </div>

    <div class="numbers">
      <p class="seconds"></p>
      <p class="placeholder">88</p>
    </div>
    <div class="colon">
      <p>秒</p>
    </div>
  </div><!-- END CLOCK -->
  </main>
</body>
<script type="text/javascript">
var nowTime;//现在时间
var disparity;//时间差距
var starTime = "2021/01/20 10:23:00" //lz开始时间
var dateBegin = new Date(starTime);

var days
var hours
var minutes
var seconds

/**************************************时间计算************************************/
function calc (choise,d1) {
    if (choise === 'lz') {
        var dateBegin = new Date(d1.replace(/-/g, "/"));//将-转化为/，使用new Date
        var dateEnd = new Date();//获取当前时间

        //计算天数
        var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
        days = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
        
        //计算小时数
        var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
        hours=Math.floor(leave1/(3600*1000))

        //计算分钟数
        var leave2=leave1%(3600*1000) //计算小时数后剩余的毫秒数
        minutes=Math.floor(leave2/(60*1000))

        //计算秒数
        var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
        seconds=Math.round(leave3/1000)

        console.log(" 相差 "+days+"天 "+hours+"小时 "+minutes+" 分钟"+seconds+" 秒")
    } else {}
}

/**************************************页面刷新************************************/
function refresh() { 
    window.location.reload(); 
} 

/*================================== END function ==================================*/

/* 1、获取当前时间*/
let date = new Date()

/* 2、计算时间与开始时间的差值 TODO:结束时间2024-11-22，相遇时间2020-11-22*/
calc('lz',starTime)

/* 3、输出到页面中*/
function addZero (val){
  return (val <= 9) ? ("0" + val) : val;
}
    hours = addZero(hours);
    minutes = addZero(minutes);
    seconds = addZero(seconds);
function time(){
  //changes the html to match results
  document.getElementsByClassName('days')[0].innerHTML = days;
  document.getElementsByClassName('hours')[0].innerHTML = hours;
  document.getElementsByClassName('minutes')[0].innerHTML = minutes;
  document.getElementsByClassName('seconds')[0].innerHTML = seconds;
}
time();

/* 4、每过一秒刷新页面*/
setTimeout('refresh()',1000); //指定1秒刷新一次 

</script>
</script>
</html>