第216练最终效果：
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>第216练</title><link rel=”stylesheet” href=”index.css” /></head><body><div class=”container”><h1 class=”heading”>温度转换器</h1><div class=”temp-container”><label for=”celsius”>摄氏度:</label><inputonchange=”computeTemp(event)”type=”number”name=”celsius”id=”celsius”placeholder=”输入温度”class=”input”/></div><div class=”temp-container”><label for=”fahrenheit”>华氏度:</label><inputonchange=”computeTemp(event)”type=”number”name=”fahrenheit”id=”fahrenheit”placeholder=”输入温度”class=”input”/></div><div class=”temp-container”><label for=”kelvin”>开尔文温标:</label><inputonchange=”computeTemp(event)”type=”number”name=”kelvin”id=”kelvin”placeholder=”输入温度”class=”input”/></div></div><script src=”index.js”></script></body></html>
CSS:
body {margin: 0;background: linear-gradient(to left bottom, lightgreen, lightblue);min-height: 100vh;display: flex;justify-content: center;align-items: center;font-family: monospace;color: darkcyan;}.container {background: rgba(255, 255, 255, 0.3);padding: 20px;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);border-radius: 10px;width: 85%;max-width: 450px;min-width: 350px;display: flex;flex-direction: column;align-items: center;}.heading {font-size: 32px;}.temp-container {width: 100%;padding: 15px;font-weight: bold;font-size: 18px;}.input {width: 220px;font-family: monospace;padding: 5px;float: right;outline: none;background: rgba(255, 255, 255, 0.3);border-color: rgba(255, 255, 255, 0.5);color: darkgreen;font-size: 18px;}.input::placeholder{color: darkgray;}
JS:
const celsiusEl = document.getElementById(“celsius”);const fahrenheitEl = document.getElementById(“fahrenheit”);const kelvinEl = document.getElementById(“kelvin”);function computeTemp(event) {const currentValue = +event.target.value;switch (event.target.name) {case “celsius”:kelvinEl.value = (currentValue + 273.32).toFixed(2);fahrenheitEl.value = (currentValue * 1.8 + 32).toFixed(2);break;case “fahrenheit”:celsiusEl.value = ((currentValue – 32) / 1.8).toFixed(2);kelvinEl.value = ((currentValue – 32) / 1.8 + 273.32).toFixed(2);break;case “kelvin”:celsiusEl.value = (currentValue – 273.32).toFixed(2);fahrenheitEl.value = ((currentValue – 273.32) * 1.8 + 32).toFixed(2);break;default:break;}}
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
