day16-Drink Water（喝水）

格式化小拓

已于 2023-07-16 20:51:32 修改

阅读量37

点赞数

分类专栏： 50天50个小demo前端文章标签： html5 css3 javascript 前端

于 2023-07-10 21:00:35 首次发布

本文链接：https://blog.csdn.net/qq_51523316/article/details/131647782

版权

50天50个小demo前端专栏收录该内容

50 篇文章 2 订阅

订阅专栏

50 天学习 50 个项目 - HTMLCSS and JavaScript

day16-Drink Water（喝水）

效果

在这里插入图片描述

index.html

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Drink Water</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <!-- 标题 -->
    <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">250 ml</div>
        <div class="cup cup-small">250 ml</div>
        <div class="cup cup-small">250 ml</div>
        <div class="cup cup-small">250 ml</div>
        <div class="cup cup-small">250 ml</div>
        <div class="cup cup-small">250 ml</div>
        <div class="cup cup-small">250 ml</div>
        <div class="cup cup-small">250 ml</div>
    </div>

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

</html>

style.css

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap');
/* 引入字体 */

/* 定义变量 */
:root {
    --border-color: #144fc6;
    --fill-color: #6ab3f8;
}

* {
    box-sizing: border-box;
}

body {
    background-color: #1b89e3;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    /* 竖直 居中显示 */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
}

/* 标题 */
h1 {
    margin: 10px 0 0;
}

/* 目标 */
h3 {
    font-weight: 400;
    margin: 10px 0;
}

/* 杯子 */
.cup {
    background-color: #fff;
    border: 4px solid var(--border-color);
    color: var(--border-color);
    /* 杯子的形状 */
    border-radius: 0 0 40px 40px;
    height: 330px;
    width: 150px;
    margin: 30px 0;
    /* 里面的的文本居中显示 */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 小杯子 */
.cup.cup-small {
    height: 95px;
    width: 50px;
    border-radius: 0 0 15px 15px;
    background-color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    font-size: 14px;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 5px;
    /* 过渡 */
    transition: 0.3s ease;
}

/* 充满 */
.cup.cup-small.full {
    background-color: var(--fill-color);
    color: #fff;
}

/* 小杯子们 */
.cups {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 280px;
}

/* 剩余 */
.remained {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* 控制剩余的在大杯子的高度 */
    flex: 1;
    transition: 0.3s ease;
}

/* liters 升 */
.remained span {
    font-size: 20px;
    font-weight: bold;
}

/* 剩余文本 */
.remained small {
    font-size: 12px;
}

/* 百分比 */
.percentage {
    background-color: var(--fill-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 30px;
    height: 0;
    transition: 0.3s ease;
}

/* 选择你喝了多少杯水 文本 */
.text {
    text-align: center;
    margin: 0 0 5px;
}

script.js

// 重点是 flex 函数  flex: 1; 的应用

// 1.获取元素节点
const smallCups = document.querySelectorAll('.cup-small');//小杯子
const listers = document.getElementById('liters');//升
const percentage = document.getElementById('percentage');//百分比
const remained = document.getElementById('remained');//剩余

updateBigCup()
// 小杯子点击事件
smallCups.forEach((cup, idx) => {
    cup.addEventListener('click', () => highlightCups(idx))
})
// 小杯子充满 idx索引
function highlightCups(idx) {
    // 给<=小杯子,充满
    smallCups.forEach((cup, idx2) => {
        if (idx2 <= idx) {
            cup.classList.add('full')
        } else {
            cup.classList.remove('full')
        }
    })
    // 更新大杯子比例
    updateBigCup()
}
// 更新大杯子比例
function updateBigCup() {
    const fullCups = document.querySelectorAll('.cup-small.full').length;//获取充满的小杯子的数量
    const totalCups = smallCups.length;//大杯子为小杯子的数量

    if (fullCups === 0) {
        // 一个充满的杯子都没有，隐藏百分比
        percentage.style.visibility = 'hidden'
        percentage.style.height = 0
    } else {
        percentage.style.visibility = 'visible'
        // 百分比的高度 充满的/所有的 * 大杯子的高度
        percentage.style.height = `${fullCups / totalCups * 330}px`
        // 百分比的文本
        percentage.innerText = `${fullCups / totalCups * 100}%`
    }
    // 全部充满
    if (fullCups === totalCups) {
        // 剩余文本不显示  剩余的高度通过flex:1自动变化
        remained.style.visibility = 'hidden'
        remained.style.height = 0
    } else {
        // 剩余文本显示
        remained.style.visibility = 'visible'
        // 剩余量 单位为升
        listers.innerText = `${2 - (250 * fullCups / 1000)}L`
    }
}

格式化小拓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day16-Drink Water（喝水）

50 天学习 50 个项目 - HTMLCSS and JavaScriptday16-Drink Water（喝水）效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
复制链接

扫一扫

专栏目录