跟随chatgpt写一个新年倒计时html网页

于 2024-01-02 15:48:36 发布
阅读量417 收藏 6
点赞数 6
文章标签： html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51160509/article/details/135340345
版权

起初我看到别的博主发了一个这样的图

于是，我给chatgpt提出要求：

我想写一个html网页，上面是一个圆圆的时钟，下面写倒计时，距离新年还有多少天，多少小时，多少分钟，时钟有时针分针秒针，而且能够实时转动

第一步：新建一个新年时钟倒计时.html，里面填充内容如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>New Year Countdown</title>
  <style>
    .clock {
      width: 200px;
      height: 200px;
      border: 2px solid black;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
    }
  </style>
</head>

<body>
  <div id="clock" class="clock"></div>
  <div id="countdown"></div>

  <script>
    function updateClock() {
      const clock = document.getElementById("clock");
      const currentTime = new Date();

      const seconds = currentTime.getSeconds();
      const minutes = currentTime.getMinutes();
      const hours = currentTime.getHours();

      const secondsAngle = (seconds / 60) * 360;
      const minutesAngle = ((minutes * 60 + seconds) / 3600) * 360;
      const hoursAngle = ((hours * 3600 + minutes * 60 + seconds) / 43200) * 360;

      clock.style.transform = `rotate(${secondsAngle}deg)`;
      clock.innerHTML = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

      setTimeout(updateClock, 1000);
    }

    function updateCountdown() {
      const countdown = document.getElementById("countdown");
      const now = new Date();
      const newYear = new Date(now.getFullYear() + 1, 0, 1);
      const timeLeft = newYear - now;

      const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
      const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));

      countdown.innerHTML = `Time remaining until New Year: ${days} days, ${hours} hours, ${minutes} minutes`;

      setTimeout(updateCountdown, 1000);
    }

    updateClock();
    updateCountdown();
  </script>
</body>

</html>

第二步：点击调试开始运行

运行成果如图

不会做动图，凑合看。

总之就是一秒转一点，我说gpt烙铁，你别把我笑死。（无奈扶额）

重新调教了n次chatgpt，屡次调节效果如图

1.0版本

分针时针秒针该转不该转的都在转

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>新年时钟倒计时</title>
  <style>
    .clock {
      width: 200px;
      height: 200px;
      border: 2px solid black;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      position: relative;
      animation: rotate 60s infinite linear;
    }

    .hour-hand, .minute-hand, .second-hand {
      position: absolute;
      background-color: black;
      transform-origin: bottom center;
    }

    .hour-hand {
      width: 4px;
      height: 75px;
      top: 50%;
      left: 50%;
      margin: -75px -2px 0;
      animation: rotate 43200s infinite linear;
    }

    .minute-hand {
      width: 2px;
      height: 95px;
      top: 50%;
      left: 50%;
      margin: -95px -1px 0;
      animation: rotate 3600s infinite linear;
    }

    .second-hand {
      width: 1px;
      height: 105px;
      top: 50%;
      left: 50%;
      margin: -105px;
      animation: rotate 60s infinite linear;
    }

    @keyframes rotate {
      0% {
        transform: rotate(0);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>

<body>
  <div class="clock">
    <div class="hour-hand"></div>
    <div class="minute-hand"></div>
    <div class="second-hand"></div>
  </div>
  <div id="countdown"></div>

  <script>
    function updateCountdown() {
      const countdown = document.getElementById("countdown");
      const now = new Date();
      const newYear = new Date(2024, 1, 10); // 设置新年日期为2024年2月10日

      const timeLeft = newYear - now;

      const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
      const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

      countdown.innerHTML = `距离新年还有 ${days} 天, ${hours} 小时, ${minutes} 分钟, ${seconds} 秒`;

      setTimeout(updateCountdown, 1000);
    }

    updateCountdown();
  </script>
</body>

</html>

 

 2.0版本

好家伙，这回直接负数了。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新年时钟倒计时</title>
</head>
<body>
    <div class="clock">
        <div class="hour-hand"></div>
        <div class="minute-hand"></div>
        <div class="second-hand"></div>
        <div class="hour-mark hour-mark1"></div>
        <div class="hour-mark hour-mark2"></div>
        <div class="hour-mark hour-mark3"></div>
        <div class="hour-mark hour-mark4"></div>
        <div class="hour-mark hour-mark5"></div>
        <div class="hour-mark hour-mark6"></div>
        <div class="hour-mark hour-mark7"></div>
        <div class="hour-mark hour-mark8"></div>
        <div class="hour-mark hour-mark9"></div>
        <div class="hour-mark hour-mark10"></div>
        <div class="hour-mark hour-mark11"></div>
        <div class="hour-mark hour-mark12"></div>
    </div>
    <div id="countdown"></div>
    <script>
        function updateClock() {
            const now = new Date();

            const seconds = now.getSeconds();
            const minutes = now.getMinutes();
            const hours = now.getHours();

            const secondHand = document.querySelector(".second-hand");
            const minuteHand = document.querySelector(".minute-hand");
            const hourHand = document.querySelector(".hour-hand");

            const secondHandRotation = seconds * 6;
            const minuteHandRotation = (minutes * 6) + (seconds / 10);
            const hourHandRotation = (hours * 30) + (minutes / 2);

            secondHand.style.transform = `rotate(${secondHandRotation}deg)`;
            minuteHand.style.transform = `rotate(${minuteHandRotation}deg)`;
            hourHand.style.transform = `rotate(${hourHandRotation}deg)`;

            setTimeout(updateClock, 1000);
        }

        function updateCountdown() {
            const countdown = document.getElementById("countdown");
            const now = new Date();
            const newYear = new Date(2023, 1, 10, 0, 0, 0); // 新年时间为2023年2月10日00:00

            const timeLeft = newYear - now;

            const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
            const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

            countdown.innerHTML = `距离2023年2月10日新年还有 ${days} 天, ${hours} 小时, ${minutes} 分钟, ${seconds} 秒`;

            setTimeout(updateCountdown, 1000);
        }

        updateClock();
        updateCountdown();
    </script>
    <style>
        .clock {
            width: 200px;
            height: 200px;
            border: 2px solid black;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .hour-hand, .minute-hand, .second-hand {
            position: absolute;
            background-color: black;
        }

        .hour-hand {
            width: 4px;
            height: 75px;
            top: calc(50% - 52px);
            left: calc(50% - 2px);
            transform-origin: bottom center;
        }

        .minute-hand {
            width: 2px;
            height: 95px;
            top: calc(50% - 72px);
            left: calc(50% - 1px);
            transform-origin: bottom center;
        }

        .second-hand {
            width: 1px;
            height: 105px;
            top: calc(50% - 92px);
            left: calc(50% - 0.5px);
            transform-origin: bottom center;
        }

        .hour-mark {
            position: absolute;
            width: 2px;
            height: 15px;
            background-color: black;
            top: calc(50% - 97px);
            left: calc(50% - 1px);
            transform-origin: bottom center;
            transform: translateX(-50%) rotateZ(-30deg);
        }

        .hour-mark:nth-child(even) {
           transform: translateX(-50%) rotateZ(-60deg);
        }
        
        .hour-mark1 { transform: translateX(-50%) rotateZ(-30deg); }
        .hour-mark2 { transform: translateX(-50%) rotateZ(-60deg); }
        .hour-mark3 { transform: translateX(-50%) rotateZ(-90deg); }
        .hour-mark4 { transform: translateX(-50%) rotateZ(-120deg); }
        .hour-mark5 { transform: translateX(-50%) rotateZ(-150deg); }
        .hour-mark6 { transform: translateX(-50%) rotateZ(-180deg); }
        .hour-mark7 { transform: translateX(-50%) rotateZ(-210deg); }
        .hour-mark8 { transform: translateX(-50%) rotateZ(-240deg); }
        .hour-mark9 { transform: translateX(-50%) rotateZ(-270deg); }
        .hour-mark10 { transform: translateX(-50%) rotateZ(-300deg); }
        .hour-mark11 { transform: translateX(-50%) rotateZ(-330deg); }
        .hour-mark12 { transform: translateX(-50%) rotateZ(0deg); }
    </style>
</body>
</html>

再来

3.0版本

还是在一起转动，并且我的倒计时文字还被吃掉了，再来！ 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>新年时钟倒计时</title>
  <style>
    .clock {
      width: 200px;
      height: 200px;
      border: 2px solid black;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      position: relative;
      animation: rotate 60s infinite linear;
    }

    .hour-hand, .minute-hand, .second-hand {
      position: absolute;
      background-color: black;
      transform-origin: bottom center;
    }

    .hour-hand {
      width: 4px;
      height: 75px;
      top: 50%;
      left: 50%;
      margin: -75px -2px 0;
      transform: rotate(0deg); /* 设置初始旋转角度为 0 度 */
      animation: rotate 43200s infinite linear;
    }

    .minute-hand {
      width: 2px;
      height: 95px;
      top: 50%;
      left: 50%;
      margin: -95px -1px 0;
      transform: rotate(0deg); /* 设置初始旋转角度为 0 度 */
      animation: rotate 3600s infinite linear;
    }

    .second-hand {
      width: 1px;
      height: 105px;
      top: 50%;
      left: 50%;
      margin: -105px;
      transform: rotate(0deg); /* 设置初始旋转角度为 0 度 */
      animation: rotate 60s infinite linear;
    }

    @keyframes rotate {
      0% {
        transform: rotate(0);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>

<body>
  <div class="clock">
    <div class="hour-hand"></div>
    <div class="minute-hand"></div>
    <div class="second-hand"></div>
  </div>
  <!-- 倒计时显示部分的代码省略 -->

  <script>
    function updateClock() {
      const now = new Date();
      
      const seconds = now.getSeconds();
      const minutes = now.getMinutes();
      const hours = now.getHours();

      const secondHand = document.querySelector(".second-hand");
      const minuteHand = document.querySelector(".minute-hand");
      const hourHand = document.querySelector(".hour-hand");

      // 根据当前时间设置初始旋转角度
      secondHand.style.transform = `rotate(${seconds * 6}deg)`; // 每秒钟旋转 6 度
      minuteHand.style.transform = `rotate(${minutes * 6}deg)`; // 每分钟旋转 6 度
      hourHand.style.transform = `rotate(${(hours % 12) * 30}deg)`; // 每小时旋转 30 度

      setTimeout(updateClock, 1000);
    }

    updateClock();
  </script>
</body>

</html>

4.0版本

真的有点气笑了，倒计时怎么搞出404天了，要不直接404not found算了。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新年时钟倒计时</title>
    <style>
      .clock {
        width: 200px;
        height: 200px;
        border: 2px solid black;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        position: relative;
        animation: rotate 60s infinite linear;
      }

      .hour-hand, .minute-hand, .second-hand {
        position: absolute;
        background-color: black;
        transform-origin: bottom center;
      }

      .hour-hand {
        width: 4px;
        height: 75px;
        top: 50%;
        left: 50%;
        margin: -75px -2px 0;
        transform: rotate(0deg);
        animation: rotate 43200s infinite linear;
      }

      .minute-hand {
        width: 2px;
        height: 95px;
        top: 50%;
        left: 50%;
        margin: -95px -1px 0;
        transform: rotate(0deg);
        animation: rotate 3600s infinite linear;
      }

      .second-hand {
        width: 1px;
        height: 105px;
        top: 50%;
        left: 50%;
        margin: -105px;
        transform: rotate(0deg);
        animation: rotate 60s infinite linear;
      }

      @keyframes rotate {
        0% {
          transform: rotate(0);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="clock">
      <div class="hour-hand"></div>
      <div class="minute-hand"></div>
      <div class="second-hand"></div>
    </div>
    <div id="countdown"></div>
    <script>
      function updateCountdown() {
        const countdown = document.getElementById("countdown");
        const now = new Date();
        const newYear = new Date(now.getFullYear() + 1, 1, 10); // 下一年的2月10日作为新年时间

        const timeLeft = newYear - now;

        const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
        const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

        countdown.innerHTML = `距离新年还有 ${days} 天, ${hours} 小时, ${minutes} 分钟, ${seconds} 秒`;

        setTimeout(updateCountdown, 1000);
      }

      updateCountdown();
    </script>
  </body>
</html>

5.0版本

这回时针分针不转了，倒计时又没了，而且秒表依然在外面漂泊。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>新年时钟倒计时</title>
</head>

<body>
  <div class="clock">
    <div class="hour-hand"></div>
    <div class="minute-hand"></div>
    <div class="second-hand"></div>
  </div>

  <script>
    function updateClock() {
      const now = new Date();

      const seconds = now.getSeconds();
      const minutes = now.getMinutes();
      const hours = now.getHours();

      const secondHand = document.querySelector(".second-hand");
      const minuteHand = document.querySelector(".minute-hand");
      const hourHand = document.querySelector(".hour-hand");

      // 计算时针、分针和秒针的旋转角度
      const secondHandRotation = seconds * 6; // 每秒钟旋转 6 度
      const minuteHandRotation = (minutes * 6) + (seconds / 10); // 每分钟旋转 6 度，每秒钟旋转 0.1 度
      const hourHandRotation = (hours * 30) + (minutes / 2); // 每小时旋转 30 度，每分钟旋转 0.5 度

      // 应用旋转角度
      secondHand.style.transform = `rotate(${secondHandRotation}deg)`;
      minuteHand.style.transform = `rotate(${minuteHandRotation}deg)`;
      hourHand.style.transform = `rotate(${hourHandRotation}deg)`;

      setTimeout(updateClock, 1000);
    }

    updateClock();
  </script>

  <style>
    .clock {
      width: 200px;
      height: 200px;
      border: 2px solid black;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      position: relative;
    }

    .hour-hand,
    .minute-hand,
    .second-hand {
      position: absolute;
      background-color: black;
      transform-origin: bottom center;
    }

    .hour-hand {
      width: 4px;
      height: 75px;
      top: 50%;
      left: 50%;
      margin: -75px -2px 0;
    }

    .minute-hand {
      width: 2px;
      height: 95px;
      top: 50%;
      left: 50%;
      margin: -95px -1px 0;
    }

    .second-hand {
      width: 1px;
      height: 105px;
      top: 50%;
      left: 50%;
      margin: -105px;
    }
  </style>

</body>

</html>

6.0版本

这跟第一版有区别吗？而且404天什么鬼呀喂！

于是我告诉gpt：（恶魔低语）

秒针的对准还是不正确，而且我希望在表盘内部能够加上1到12的时间
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新年时钟倒计时</title>
</head>
<body>
    <div class="clock">
        <div class="hour-hand"></div>
        <div class="minute-hand"></div>
        <div class="second-hand"></div>
    </div>
    <div id="countdown"></div>
    <script>
        function updateClock() {
            const now = new Date();

            const seconds = now.getSeconds();
            const minutes = now.getMinutes();
            const hours = now.getHours();

            const secondHand = document.querySelector(".second-hand");
            const minuteHand = document.querySelector(".minute-hand");
            const hourHand = document.querySelector(".hour-hand");

            const secondHandRotation = seconds * 6;
            const minuteHandRotation = (minutes * 6) + (seconds / 10);
            const hourHandRotation = (hours * 30) + (minutes / 2);

            secondHand.style.transform = `rotate(${secondHandRotation}deg) translateX(-50%)`;
            minuteHand.style.transform = `rotate(${minuteHandRotation}deg) translateX(-50%)`;
            hourHand.style.transform = `rotate(${hourHandRotation}deg) translateX(-50%)`;

            setTimeout(updateClock, 1000);
        }

        function updateCountdown() {
            const countdown = document.getElementById("countdown");
            const now = new Date();
            const newYear = new Date(now.getFullYear() + 1, 1, 10); // 下一年的2月10日作为新年时间

            const timeLeft = newYear - now;

            const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
            const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

            countdown.innerHTML = `距离新年还有 ${days} 天, ${hours} 小时, ${minutes} 分钟, ${seconds} 秒`;

            setTimeout(updateCountdown, 1000);
        }

        updateClock();
        updateCountdown();
    </script>
    <style>
        .clock {
            width: 200px;
            height: 200px;
            border: 2px solid black;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            position: relative;
        }

        .hour-hand, .minute-hand, .second-hand {
            position: absolute;
            background-color: black;
            transform-origin: bottom center;
        }

        .hour-hand {
            width: 4px;
            height: 75px;
            top: 50%;
            left: 50%;
            margin: -75px -2px 0;
        }

        .minute-hand {
            width: 2px;
            height: 95px;
            top: 50%;
            left: 50%;
            margin: -95px -1px 0;
        }

        .second-hand {
            width: 1px;
            height: 105px;
            top: 50%;
            left: 50%;
            margin: -105px;
        }
    </style>
</body>
</html>

7.0版本

没什么改进，不过时间已经过去一个多小时了，快四点了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新年时钟倒计时</title>
</head>
<body>
    <div class="clock">
        <div class="hour-hand"></div>
        <div class="minute-hand"></div>
        <div class="second-hand"></div>
        <div class="hour-mark"></div>
        <div class="minute-mark"></div>
    </div>
    <div id="countdown"></div>
    <script>
        function updateClock() {
            const now = new Date();

            const seconds = now.getSeconds();
            const minutes = now.getMinutes();
            const hours = now.getHours();

            const secondHand = document.querySelector(".second-hand");
            const minuteHand = document.querySelector(".minute-hand");
            const hourHand = document.querySelector(".hour-hand");

            const secondHandRotation = seconds * 6;
            const minuteHandRotation = (minutes * 6) + (seconds / 10);
            const hourHandRotation = (hours * 30) + (minutes / 2);

            secondHand.style.transform = `rotate(${secondHandRotation}deg) translateX(-50%)`;
            minuteHand.style.transform = `rotate(${minuteHandRotation}deg) translateX(-50%)`;
            hourHand.style.transform = `rotate(${hourHandRotation}deg) translateX(-50%)`;

            setTimeout(updateClock, 1000);
        }

        function updateCountdown() {
            const countdown = document.getElementById("countdown");
            const now = new Date();
            const newYear = new Date(now.getFullYear() + 1, 1, 10); // 下一年的2月10日作为新年时间

            const timeLeft = newYear - now;

            const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
            const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

            countdown.innerHTML = `距离新年还有 ${days} 天, ${hours} 小时, ${minutes} 分钟, ${seconds} 秒`;

            setTimeout(updateCountdown, 1000);
        }

        updateClock();
        updateCountdown();
    </script>
    <style>
        .clock {
            width: 200px;
            height: 200px;
            border: 2px solid black;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            position: relative;
        }

        .hour-hand, .minute-hand, .second-hand {
            position: absolute;
            background-color: black;
            transform-origin: bottom center;
        }

        .hour-hand {
            width: 4px;
            height: 75px;
            top: 50%;
            left: 50%;
            margin: -75px -2px 0;
        }

        .minute-hand {
            width: 2px;
            height: 95px;
            top: 50%;
            left: 50%;
            margin: -95px -1px 0;
        }

        .second-hand {
            width: 1px;
            height: 105px;
            top: 50%;
            left: 50%;
            margin: -105px;
        }

        .hour-mark {
            position: absolute;
            width: 2px;
            height: 30px;
            background-color: black;
            top: 10px;
            left: calc(50% - 1px);
            transform-origin: bottom center;
        }

        .minute-mark {
            position: absolute;
            width: 1px;
            height: 15px;
            background-color: black;
            top: 10px;
            left: calc(50% - 0.5px);
            transform-origin: bottom center;
        }
    </style>
</body>
</html>

调不动了，@u@。。。今天就先这样吧~白~本喵还是驯服不了ai啊喵！明天再继续>o<

又活了一天，已经很厉害了。

洛洛31
关注
  • 6
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
帮我写一个跨年html倒计时代码，达到预定时间切换为放烟花
weixin_35755434的博客
01-14 2012
以下是一个简单的 HTML 倒计时代码，在跨年时会切换为放烟花的效果： <!DOCTYPE html> <html> <head> <script> // 获取当前时间 var currentTime = new Date(); // 设置倒计时结束时间 (年月日时分秒) var endTime = new Date("2022-12-31 23:...
跨年倒计时HTML源码,JavaScript实现网页跨年倒计时
weixin_39573781的博客
06-10 2731
JavaScript网页–跨年倒计时，供大家参考，具体内容如下最近学弟在追一个学妹，我在帮学弟出谋划策。学妹告诉学弟，我怕我们之间是因为这段时间接触多了你才喜欢我的。等跨年的时候，如果你还喜欢我，那个时候我再给你答案。于是今天我帮学弟做了一个跨年倒计时的网页，希望他能够坚持下去。倒计时div {margin-top: 200px;margin-left: 500px;line-height: 50...
跨年倒计时他来了
zhaochen1127的博客
12-28 738
跨年啦赶快给你喜欢的人送去祝福吧！
[HTML/JS]使用JS新年倒计时
GS119115的博客
01-12 1144
眨眼间2023年春节即将到来，一个好的春节倒计时也能为过年增加一丢仪式感。
【HTML | CSS | JS】再见2022，一起来写一个响应式跨年倒计时吧（附源码)
Thunder Wang的博客
12-29 5409
各位C站的小伙伴们，马上就要迎来我们一年一度的元旦和春节啦，值此之际，让我们一起来写一个响应式跨年倒计时吧！无论是电脑，手机还是平板都可以完美适配哦！
2023年新年倒计时html源码
12-11
在`<body>`部分，我们可以使用`<div>`元素创建一个倒计时计时器的容器。计时器的显示通常包括年、月、日、小时、分钟和秒。这些数据可以通过JavaScript动态获取和更新。JavaScript是与HTML和CSS紧密配合的脚本语言，...
2023年新年倒计时HTML源代码，2023年春节倒计时代码
11-10
总的来说，这个压缩包提供了一个完整的2023年新年和春节倒计时解决方案，用户只需下载并运行`index.html`，就能在自己的网站上展示一个富有节日气氛的倒计时。这不仅展示了前端开发的基本技术，也体现了节日元素与...
html实现的新年倒计时
12-27
在本例中，“html实现的新年倒计时”是一个使用HTML来展示从当前日期到特定日期（如2019年新年）的剩余时间的计时器。这样的计时器可以增强网站的互动性，并为用户提供一种有趣的参与方式来期待新的一年。 要实现这...
2022年新年倒计时.html
01-02
2022年新年倒计时前端版本
新年跨年倒计时烟花HTML源码
01-09
给大家分享一款跨年倒计时烟花HTML源码 html文件可任意随意添加更改，也可以加上自己喜欢的音乐，变成你自己的专属哦，有动手能力的来试试吧！喜欢记得给小编点个赞哦，在此祝大家新年快乐，身体康健，阖家幸福，...
跨年倒计时代码零点有烟花
02-12
跨年代码，每年都可以用。里面有详细使用说明，双击即可运行。有跨年倒计时，背景音乐，整点会放烟花，有音效。
跨年倒计时HTML源码
06-21
雪花特效和倒计时，对 html 感兴趣的可以查看原代码看看~
借助ChatGPT编写html小程序
最新发布
ambu1230的博客
02-21 1887
大致就是这么个流程，本人没有什么html基础，如果从头在网上学习的话，可能需要个好几天，但是在ChatGPT的帮助下，只花了大概两个小时就搞定了，简直是神器。其它的参数一般都是固定的，根据流体的不同，例如，对于空气，其物性参数基本上是确定的，并且，由于布西内斯克假设，上述程序是在ChatGPT的帮助下完成的，主要是由ChatGPT给出的代码进行修改，非常高效。为了保证瑞利数的变化，我们只需要改变六个值中的一个就可以了，这个值常常被选为。输入函数中，预设值的设置如下，在value中初始化即可。
【情人节表白神器：送她一个HTML动态表白网站 带源码】
qq_34211771的博客
02-13 1478
chatgpt生成的HTML动态表白网站
马上跨年了，如何用代码写一个“跨年倒计时”呢？
热门推荐
陈橘又青的博客
12-17 2万+
倒计时讲解 新年倒计时才是本页面的灵魂，很多小伙伴可能会好奇，如何设置倒计时呢？其实只需要用当前window的事件来设置一个开始的事件。【倒计时时间=过年时间-当前时间】设置time为2023年1月1日，添加计时器从当前时间开始， 设置作用时间，将时间进行一个转换为当前的时间，并设置未来的一个时间戳随后定义一个变量来获取倒计时时间是多少。【未来时间-现在的时间】再将获取到的时间毫秒为单位/1000来计算，小时数用总小时数-过去的小时数为现在的小时数，再以60秒为一整份，取余计算得到的就是分钟数在用当前的时间
HTML+CSS+JS新年倒计时(实时更新)
Infatuatedmonkey的博客
03-26 4305
大家好，今天给大家分享一篇用html+css+js实现新年倒计时的代码。 改编于https://www.bilibili.com/video/BV1EJ411471A?from=search&seid=18367221548830118604&spm_id_from=333.337.0.0 如有侵权还请速速联系。 效果图： 1，html结构， <body> <div class="container"> <h2><span>Co
HTML+CSS+JS 实现跨年祝福效果
qq_40135096的博客
12-16 1966
【代码】HTML+CSS+JS 实现跨年祝福效果。
HTML5七夕情人节表白网页制作【粉色樱花雨3D相册】HTML+CSS+JavaScript
HTML网页设计
07-21 1万+
1 网页简介：基于 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。代码如下（示例）：以下仅展示部分代码供参考~ 2.CSS代码 三、精彩专栏推荐： 看到这里了就 【点赞，好评，收藏】 三连 支持下吧，你的支持是我创作的动力。HTM
用html写一个新年倒计时页面
02-08
下面是一个简单的 HTML 新年倒计时页面示例： ```html <html> 新年倒计时 距离新年还有: <p id="countdown"></p> // 设置新年的日期 var countDownDate = new Date("Jan 1, 2022 00:00:00").getTime()...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值