其他
【每日一练】45—记录喝水量动画效果的实现
写在前面
天热多喝水，有利于我们的身体健康，但是，为了保证我们每天喝满8杯水，共计2000毫升，如果换算成一瓶500毫升的矿泉水的话，那就是，我们每天要喝4瓶水，这么热的天，我觉得还是可以完成的，甚至是不够的。
但是，如果我们为了方便记录自己每天喝了多少水的话，我们可以通过一个小练习来实现，以下就是我们今天需要练习的内容。
我们先来看一下最终效果：
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>【每日一练】45—记录喝水量动画效果的实现</title> </head> <body> <h1>一天喝8杯水</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> </body></html>
:root { --border-color: #144fc6; --fill-color: #6ab3f8;}
* { box-sizing: border-box;}
body { background-color: #3494e4; 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;}
.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;}
const smallCups = document.querySelectorAll('.cup-small')const liters = document.getElementById('liters')const percentage = document.getElementById('percentage')const remained = document.getElementById('remained')
updateBigCup()
smallCups.forEach((cup, idx) => { cup.addEventListener('click', () => highlightCups(idx))})
function highlightCups(idx) { if (idx===7 && smallCups[idx].classList.contains("full")) idx--; else if(smallCups[idx].classList.contains('full') && !smallCups[idx].nextElementSibling.classList.contains('full')) { 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) { remained.style.visibility = 'hidden' remained.style.height = 0 } else { remained.style.visibility = 'visible' liters.innerText = `${2 - (250 * fullCups / 1000)}L` }}写在最后
以上就是今天【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号