console 命令行工具 X clear

console

const remained = document.querySelector('.remained');
const liters = document.querySelector('#liters');
const percentage = document.getElementById('percentage');
const cups = document.querySelector('.cups');

cups.addEventListener('click', e => {
  if (e.target.classList.contains('cup-small')) {
    const index = e.target.getAttribute('data-index');
    hightCups(Number(index));
  }
})

function hightCups(idx) {
  const smallCups = cups.children;
  if (smallCups[idx].classList.contains('full') && !smallCups[idx+1]?.classList?.contains('full')) {
    idx--;
  }

  [...smallCups].forEach((item, index) => {
    if (index <= idx) {
      item.classList.add('full');
    } else {
      item.classList.remove('full');

    }
  })
  updateCups(idx);
}

function updateCups(idx) {
  const fillCups = idx + 1;
  const totalCups = cups.children.length;
  if (fillCups > 0) {
    percentage.style.height = `${fillCups / totalCups * 260}px`;
    percentage.textContent = `${fillCups / totalCups*100}%`;
  } else {
    percentage.style.height = `0px`;
  }

  if (fillCups === totalCups) {
    remained.style.height = '0px';
  } else {
    liters.textContent = `${2-(fillCups / totalCups)*2}L`;
    
  }

}

updateCups(-1);

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Drink Water</title>
  </head>
  <body>
      <!-- 请忽略 -->
    <div class="jiaqicoder">
      <img src="https://gitee.com/zyxbj/image-warehouse/raw/master/pics/pic.png" alt="">
    </div>
    <!-- 请忽略 -->
    
    <h1>喝水记录</h1>
    <h3>目标: 2升</h3>

    <div class="cup">
      <div class="remained" id="remained">
        <span id="liters"></span>
        <small>剩余</small>
      </div>

      <div class="percentage" id="percentage"></div>
    </div>

    <p class="text">选择你喝了多少杯水</p>

    <div class="cups">
      <div class="cup cup-small" data-index=0>250 ml</div>
      <div class="cup cup-small" data-index=1>250 ml</div>
      <div class="cup cup-small" data-index=2>250 ml</div>
      <div class="cup cup-small" data-index=3>250 ml</div>
      <div class="cup cup-small" data-index=4>250 ml</div>
      <div class="cup cup-small" data-index=5>250 ml</div>
      <div class="cup cup-small" data-index=6>250 ml</div>
      <div class="cup cup-small" data-index=7>250 ml</div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

:root {
  --border-color: #144fc6;
  --fill-color: #6ab3f8;
  --bg-color:#3494e4;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  background-color: var(--bg-color);
  color:white;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap:15px;
  font-family: '楷体','宋体','猫啃网糖圆体 (测试版)';
}

h1{
  margin-top: 10px;
}

h3{
  font-weight: normal;
}

.cup{
  background-color: #fff;
  border:4px solid var(--border-color);
  height: 260px;
  width: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color:var(--border-color);
  border-radius: 0  0 40px  40px;
  text-align: center;
  transition: 0.3s ease;
  overflow: hidden;
}

.cup .remained{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.cup .remained span{
  font: 14px bold;
}

.cup .remained small{
  font-size: 12px;
}

.cup .percentage{
  background-color: var(--fill-color);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  height: 0;
  transition: 0.3s ease;
}

.cups{
  display: flex;
  width: 190px;
  gap: 10px;
  flex-wrap: wrap;
}

.cups .cup-small{
  height: 80px;
  width: 40px;
  font-size: 12px;
  cursor: pointer;
}

.cups .cup-small.full{
  background-color: var(--fill-color);
  color: white;
}

/* 请忽略 */
.jiaqicoder{
  position: absolute;
  left: 20px;
  top: 20px;
}
.jiaqicoder img{
  width: 200px;
  box-shadow: 2px 3px 6px rgba(255, 255, 255, 0.3)

}
/* 请忽略 */