以下是今天练习的最终效果：
HTML:
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″ /><meta http-equiv=”X-UA-Compatible” content=”IE=edge” /><meta name=”viewport” content=”width=device-width, initial-scale=1.0″ /><title>【每日一练】第203练</title><link rel=”stylesheet” href=”index.css” /></head><body><div class=”container”><h2>实时字数计数器</h2><textareaid=”textarea”class=”textarea”placeholder=”请在这里写下你的感受…”maxlength=”100″></textarea><div class=”counter-container”><p>总数:<span class=”total-counter” id=”total-counter”></span></p><p>剩余:<span class=”remaining-counter” id=”remaining-counter”></span></p></div></div><script src=”index.js”></script></body></html>
CSS:
body {margin: 0;display: flex;justify-content: center;height: 100vh;align-items: center;background-color: #fafafa;font-family: cursive;}.container {background-color: #00a6bc;width: 400px;padding: 20px;margin: 5px;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);}.textarea {resize: none;width: 100%;height: 100px;font-size: 18px;font-family: sans-serif;padding: 10px;box-sizing: border-box;border: solid 2px darkgray;}.counter-container {display: flex;justify-content: space-between;padding: 0 5px;}.counter-container p {font-size: 18px;color: #fafafa;}.total-counter {color: #fff;}.remaining-counter {color: #444;}
JS:
const textareaEl = document.getElementById(“textarea”);const totalCounterEl = document.getElementById(“total-counter”);const remainingCounterEl = document.getElementById(“remaining-counter”);textareaEl.addEventListener(“keyup”, () => {updateCounter();});updateCounter()function updateCounter() {totalCounterEl.innerText = textareaEl.value.length;remainingCounterEl.innerText =textareaEl.getAttribute(“maxLength”) – textareaEl.value.length;}
写在最后
以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
