本文最后更新于 2023-12-10，文章内容可能已经过时，遇到问题可以留言。
用chatgpt生成的倒计时网站

特点

允许用户添加事件，保存在本地浏览器
允许删除事件
统计网页访问次数
bing随机壁纸
效果展示

效果图地址:https://js.wyhhome.top
html代码，index.php

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>倒计时</title>
  <link rel="shortcut icon" href="https://hi.wyhhome.top/upload/favicon.ico">
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      background-image: url('https://api.dujin.org/bing/1920.php'); /* 默认背景图片 */
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      font-size: 24px;
      color: #000; /* 默认文字颜色为黑色 */
    }
    @media screen and (orientation: portrait) {
      /* 手机设备背景图片 */
      body {
        background-image: url('https://api.dujin.org/bing/m.php'); /* 在这里替换手机设备背景图片地址 */
      }
      /* 手机设备字体放大 */
      body {
        font-size: 48px;
      }
      .user-container {
        /* 手机设备用户信息容器字体大小放大 */
        font-size: 36px;
      }
    }
    .user-container {
      margin-top: 20px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-bottom: 10px;
      position: relative;
      background-color: rgba(255, 255, 255, 0.4); /* 为用户信息容器添加背景色，以便在背景图上显示清晰 */
      border-radius: 10px; /* 给表单添加圆角 */
      color: #fff
      text-align: center;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }
    .delete-btn {
      position: absolute;
      top: 50%;
      right: 5%;
      transform: translateY(-50%);
      padding: 5px 5px; /* 调整按钮的内边距 */
      font-size: 24px; /* 调整按钮的字体大小 */
      border-radius: 10px; /* 圆角 */
      border: none; /* 去掉按钮的边框 */
      cursor: pointer; /* 鼠标悬停时显示指针样式 */
      margin-top: 10px; /* 为按钮增加上外边距 */
    }
      input[type="text"],
      input[type="date"] {
      padding: 5px;
      border-radius: 2px;
      border: 1px solid #ccc;
      background-color: #fff; /* 为输入框添加白色背景 */
    }
    #birthdayForm {
      background-color: rgba(255, 255, 255, 0.4); /* 为表单添加背景色 */
      border-radius: 10px; /* 给表单添加圆角 */
    }
    input[type="submit"] {
      padding: 5px 5px; /* 调整按钮的内边距 */
      font-size: 24px; /* 调整按钮的字体大小 */
      border-radius: 10px; /* 圆角 */
      border: none; /* 去掉按钮的边框 */
      cursor: pointer; /* 鼠标悬停时显示指针样式 */
      margin-top: 10px; /* 为按钮增加上外边距 */
    }
    .h1css {
      font-family: Arial, sans-serif;
      font-size: 80px;
      color: #fff;
      text-align: center;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }
  </style>
</head>
<body>
  <h1 class="h1css">倒计时</h1>
  <button id="showForm" style="padding: 5px 5px; font-size: 36px; border-radius: 3px; cursor: pointer; background-color: #3498db; color: #fff; border: none;">
    添加项目
  </button>
  <form id="birthdayForm" style="display: none;">
  <form id="birthdayForm">
    <label for="name">项目</label><br>
    <input type="text" id="name" name="name" required><br>
    <label for="birthdate">日期</label><br>
    <input type="datetime-local" id="birthdate" name="birthdate" required><br>
    <input type="submit" value="添加">
  </form>
  <div id="users"></div>
  <!-- 访问次数显示区域 -->
  <div class="visit-count">
      <p>网页被访问<?php echo getVisitCount(); ?>次</p>
  </div>
  <p>信息保存在本地，不会上传服务器。</p>
  <p>Powerd by David</p>

  <?php
  // 保存和获取访问次数的函数
  function getVisitCount() {
      $countFile = 'visit_count.txt'; // 存放访问计数的文件

      // 如果文件存在则读取并递增访问次数，否则创建文件并初始化访问次数
      if (file_exists($countFile)) {
          $count = (int)file_get_contents($countFile);
          $count++;
          file_put_contents($countFile, $count);
      } else {
          $count = 1;
          file_put_contents($countFile, $count);
      }

      return $count;
  }
  ?>
  <script>
    // 检查本地存储中是否已保存用户信息
    let users = JSON.parse(localStorage.getItem('users')) || [];

    // 渲染已保存的用户信息
    function renderUsers() {
      const usersContainer = document.getElementById('users');
      usersContainer.innerHTML = '';

      users.forEach(user => {
        const userContainer = document.createElement('div');
        userContainer.classList.add('user-container');

        const { name, birthdate } = user;
        userContainer.innerHTML = `<h2>${name}</h2><p id="${name.replace(/\s/g, '')}"></p><button class="delete-btn" onclick="deleteUser('${name}')">删除</button>`;
        usersContainer.appendChild(userContainer);

        startCountdown(birthdate, name);
      });
    }

    renderUsers();

    function startCountdown(birthdate, name) {
      const userKey = name.replace(/\s/g, '');
      const countdownContainer = document.getElementById(userKey);

      const currentYear = new Date().getFullYear();
      let nextBirthday = new Date(birthdate);
      nextBirthday.setFullYear(currentYear);

      if (nextBirthday < new Date()) {
        nextBirthday.setFullYear(currentYear + 1);
      }

      setInterval(function() {
        const now = new Date().getTime();
        const distance = nextBirthday.getTime() - now;

        if (distance < 0) {
          countdownContainer.innerHTML = `时间到啦！`;
          nextBirthday.setFullYear(nextBirthday.getFullYear() + 1);
        } else {
          const days = Math.floor(distance / (1000 * 60 * 60 * 24));
          const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
          const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
          const seconds = Math.floor((distance % (1000 * 60)) / 1000);

          countdownContainer.innerHTML = `${days}天${hours}小时${minutes}分钟${seconds}秒`;
        }
      }, 1000);
    }

    function deleteUser(name) {
      users = users.filter(user => user.name !== name);
      localStorage.setItem('users', JSON.stringify(users));
      renderUsers();
    }

    document.getElementById('birthdayForm').addEventListener('submit', function(event) {
      event.preventDefault();
      const name = document.getElementById('name').value;
      const birthdate = document.getElementById('birthdate').value;

      users.push({ name, birthdate });
      localStorage.setItem('users', JSON.stringify(users));

      renderUsers();
    });
    // Get the '添加项目' button
    const showFormButton = document.getElementById('showForm');

    // Function to toggle the visibility of the form
    function toggleFormVisibility() {
      const form = document.getElementById('birthdayForm');
      if (form.style.display === 'none') {
        form.style.display = 'block';
      } else {
        form.style.display = 'none';
      }
    }

    // Event listener for the '添加项目' button
    showFormButton.addEventListener('click', function() {
      toggleFormVisibility();
    });

    // Modify the event listener for the form submission
    document.getElementById('birthdayForm').addEventListener('submit', function(event) {
      event.preventDefault();
      const name = document.getElementById('name').value;
      const birthdate = document.getElementById('birthdate').value;

      // Hide the form after submitting
      toggleFormVisibility();

      renderUsers();
    });
  </script>
</body>
</html>