2021-01-20 臘八節快樂

阿新 • • 發佈：2021-01-21

技術標籤：貓貓

只能貼樣式不能全用程式碼。也不支援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>