console 命令行工具 X clear

console

let progress = 0;
let timer = null;

function run() { 
  if (progress < 1) {
    progress = parseFloat((progress + 0.01).toFixed(2));
    document.querySelector('h1').style.setProperty("--progress", progress);
    timer = setTimeout(run, 20);
  } else {
    clearTimeout(timer); // 填充完成后清理定时器
    timer = null;
  }
}

document.querySelector("#empty").addEventListener("click", () => {
  progress = 0;
  document.querySelector('h1').style.setProperty("--progress", progress);
  if (timer) {
    clearTimeout(timer); // 如果在填充中，点击empty也清理定时器
    timer = null;
  }
});

document.querySelector("#full").addEventListener("click", () => {
  if (!timer) {
    run();
  }
});

<body>
    <h1>
        Up to 20 hours of battery lift -- the longest in any Mac ever.
    </h1>
    <div class="buttons">
        <button id="empty">0%</button>
        <button id="full">100%</button>
    </div>
    <script src="/index.js"></script>
    
</body>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #000;
}

h1 {
  --progress: 0.9;
  color: transparent;
  width: 50%;
  margin: 0 auto;
  font-size: 60px;
  font-family: Helvetica, Arial, sans-serif;
  letter-spacing: -3px;
  background-image: linear-gradient(
    #fff calc(100% - var(--progress) * 100%),
    #4cd265 calc(100% - var(--progress) * 100%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  transform: scale(clamp(0.8, calc((var(--progress) - 0.99) * 200), 1.3));
  transition: 0.3s transform ease-out, 0.5s background-image ease-out;
}

.buttons {
  position: absolute;
  bottom: 0;
  padding: 20px;
}

.buttons button {
  display: inline-block;
  font-size: 32px;
  background-color: #fff;
  border: 0;
  padding: 10px 20px;
  border-radius: 12px;
  margin: 0 10px;
  cursor: pointer;
  transition: 0.2s background-color, 0.2s transform;

  &:hover {
    background-color: #4cd265;
    transform: translateY(-3px);
  }
}