console 命令行工具 X clear
console
<!DOCTYPE html>
<html>

<head>
	<title>在线翻页时钟</title>
	<style type="text/css">
		html,
		body {
			height: 100%;
		}

		body {
			background-color: #222222;
			color: #ffffff;
			font-size: 80px;
			font-family: Arial, sans-serif;
			text-align: center;
			margin: 0;
		}

		.container {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 2rem;
		}

		.flip-clock-wrapper {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 !important;
		}

		.flip-clock-divider {
			display: inline-block;
		}

		.flip-clock-meridium {
			display: none;
		}

		.flip_clock {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 10px;
		}

		.range {
			font-size: 3rem;
		}

		#clockType {
			width: 200px;
			height: 30px;
			font-size: 1rem;
			border-radius: 5px;
		}

		.flip-clock-divider.days .flip-clock-label,
		.flip-clock-divider.hours .flip-clock-label,
		.flip-clock-divider.minutes .flip-clock-label,
		.flip-clock-divider.seconds .flip-clock-label {
			color: #ffffff;
		}
	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
	</script>
	<script src="https://cdn.jsdelivr.net/gh/objectivehtml/FlipClock/compiled/flipclock.min.js">
	</script>
	<link href="https://cdn.jsdelivr.net/gh/objectivehtml/FlipClock/compiled/flipclock.min.css" rel="stylesheet" />
</head>

<body>
	<div class="container">
		<select id="clockType" onChange="handleChange(event)">
        <option value="TwelveHourClock">12小时制</option>
        <option value="TwentyFourHourClock">24小时制</option>
        <option value="Counter">计数</option>
        <option value="MinuteCounter">分</option>
        <option value="HourlyCounter">时</option>
        <option value="DailyCounter">天</option>
      </select>
      <section class="flip_clock">
        <div class="clock"></div>
        <span class="range"></span>
      </section>
    </div>

    <script type="text/javascript">
      function changeRange() {
        const clockType = document.querySelector("#clockType").value;
        const range = document.querySelector(".range");
        range.innerHTML =
          clockType == "TwelveHourClock"
            ? new Date().getHours() <= 12
              ? "AM"
              : "PM"
            : "";
      }

      function handleChange(e) {
        console.log(e.target.value);
        startFlipClock(e.target.value);
        changeRange();
      }

      function startFlipClock(clockFace = "TwelveHourClock") {
        const clock = new FlipClock($(".clock"), {
          clockFace: clockFace,
          autoStart: true,
        });
        clock.start();
      }

      $(function () {
        startFlipClock();
        changeRange();
      });
    </script>
  </body>
</html>