第208练的最终效果：
实现代码如下：
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>第208练：</title><link rel=”stylesheet” href=”index.css”></head><body><div class=”container”><h1 class=”heading”>体重转换器</h1><div class=”input-container”><label for=”pounds”>磅:</label><input type=”number” id=”input” class=”input” step=”.1″ placeholder=”输入你的体重”></div><p>您的体重（kg）是:<span id=”result”></span></p><p class=”error” id=”error”></p></div><script src=”index.js”></script></body></html>
CSS:
body{margin: 0;background: linear-gradient(to left top, yellow, lightblue, yellow);min-height: 100vh;display: flex;justify-content: center;align-items: center;font-family: ‘Courier New’, Courier, monospace;color: darkcyan;}.container{background: rgba(255,255,255,0.3);padding: 20px;box-shadow: 0 4px 10px rgba(0,0,0,.3);border-radius: 10px;width: 85%;max-width: 450px;}.input-container{display: flex;justify-content: space-between;align-items: center;font-size: 18px;font-weight: 700;}.input{padding: 10px;width: 70%;background: rgba(255,255,255,0.3);border-color: rgba(255,255,255,0.5);font-size: 18px;border-radius: 10px;color: darkgreen;outline: none;}.error{color: red;}
JS：
const inputEl = document.getElementById(“input”);const errorEl = document.getElementById(“error”);const resultEl = document.getElementById(“result”);let errorTime;let resultTime;function updateResults() {if (inputEl.value <= 0 || isNaN(inputEl.value)) {errorEl.innerText = “请输入有效数字”;clearTimeout(errorTime);errorTime = setTimeout(() => {errorEl.innerText = “”;inputEl.value = “”;}, 2000);} else {resultEl.innerText = (+inputEl.value / 2.2).toFixed(2);clearTimeout(resultTime);resultTime = setTimeout(() => {resultEl.innerText = “”;inputEl.value = “”;}, 10000);}}inputEl.addEventListener(“input”, updateResults);
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
