网站外部链接,网站建设大致价格2017,上海百度公司地址,广告设计一般用什么软件风尚云网前端学习#xff1a;制作一款简易的在线计算器
简介
在前端开发的学习过程中#xff0c;实现一个简单的在线计算器是一个常见的练习项目。它不仅能够帮助我们熟悉HTML、CSS和JavaScript的基本用法#xff0c;还能够加深我们对事件处理和DOM操作的理解。今天#…风尚云网前端学习制作一款简易的在线计算器
简介
在前端开发的学习过程中实现一个简单的在线计算器是一个常见的练习项目。它不仅能够帮助我们熟悉HTML、CSS和JavaScript的基本用法还能够加深我们对事件处理和DOM操作的理解。今天我们将一起学习如何创建一款简易的在线计算器并探索其背后的代码实现。
项目结构
我们的计算器项目包含三个主要部分HTML结构、CSS样式和JavaScript逻辑。
HTML结构
HTML部分负责构建计算器的界面。我们使用div元素来创建计算器的容器input元素作为显示屏以及一系列button元素作为数字和运算符的按钮。
div classcalculatorp风尚云网前端学习br一款简易的在线计算器/pinput typetext iddisplay classdisplay readonlydiv classbutton-grid!-- 按钮 --/div
/divCSS样式
CSS部分负责计算器的样式设计。我们使用了Flexbox布局来居中显示计算器并为按钮和显示屏添加了一些基本的样式使其看起来更加美观。
body {font-family: Arial, sans-serif;background-color: #ececec;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;
}.calculator {background-color: #ffffff;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);overflow: hidden;width: 240px;max-width: 100%;padding: 20px;
}.display {background-color: #f7f7f7;color: #333;font-size: 1.2em;padding: 15px;text-align: right;border: none;outline: none;width: 100%;box-sizing: border-box;margin-bottom: 15px;
}.button-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 10px;
}.button {background-color: #e0e0e0;border: none;border-radius: 5px;color: #333;cursor: pointer;font-size: 1em;padding: 15px;text-align: center;transition: background-color 0.3s ease;
}/* 更多样式... */JavaScript逻辑
JavaScript部分负责计算器的逻辑处理。我们为每个按钮添加了事件监听器以便在点击时执行相应的操作。这包括数字输入、运算符选择、计算结果和清除操作。
const display document.getElementById(display);
let currentInput ;
let previousInput ;
let operation null;const buttons document.querySelectorAll(.button);
buttons.forEach(button {button.addEventListener(click, () {const value button.textContent;if (value C) {currentInput ;previousInput ;operation null;display.value ;} else if (value ) {if (previousInput ! operation ! null currentInput ! ) {calculateResult();}} else if ([, -, ×, ÷].includes(value)) {if (currentInput ! ) {if (operation) {calculateResult();}previousInput parseFloat(currentInput);currentInput ;operation value;}} else if (value .) {if (!currentInput.includes(.)) {currentInput value;}} else {currentInput value;}display.value currentInput || previousInput || ;});
});function calculateResult() {let result;const num1 parseFloat(previousInput);const num2 parseFloat(currentInput);switch (operation) {case :result num1 num2;break;case -:result num1 - num2;break;case ×:result num1 * num2;break;case ÷:if (num2 0) {alert(除数不能为0);return;}result num1 / num2;break;}display.value result;currentInput result.toString();previousInput ;operation null;
}完整代码
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8 !-- 设置字符编码为UTF-8 --meta nameviewport contentwidthdevice-width, initial-scale1.0 !-- 使页面在移动设备上正常显示 --title基本计算器/title !-- 页面标题 --style/* CSS样式开始 */body {font-family: Arial, sans-serif; /* 设置字体 */background-color: #ececec; /* 设置背景颜色 */display: flex; /* 使用Flexbox布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */height: 100vh; /* 高度设置为视口高度 */margin: 0; /* 移除默认边距 */}.calculator {background-color: #ffffff; /* 计算器背景颜色 */border-radius: 10px; /* 边框圆角 */box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */overflow: hidden; /* 隐藏溢出内容 */width: 240px; /* 计算器宽度 */max-width: 100%; /* 最大宽度为100% */padding: 20px; /* 内边距 */}.display {background-color: #f7f7f7; /* 显示屏背景颜色 */color: #333; /* 文字颜色 */font-size: 1.2em; /* 字体大小 */padding: 15px; /* 内边距 */text-align: right; /* 文本右对齐 */border: none; /* 无边框 */outline: none; /* 无轮廓 */width: 100%; /* 宽度100% */box-sizing: border-box; /* 盒模型 */margin-bottom: 15px; /* 外边距 */}.button-grid {display: grid; /* 使用网格布局 */grid-template-columns: repeat(4, 1fr); /* 四列 */gap: 10px; /* 间隔 */}.button {background-color: #e0e0e0; /* 按钮背景颜色 */border: none; /* 无边框 */border-radius: 5px; /* 边框圆角 */color: #333; /* 文字颜色 */cursor: pointer; /* 鼠标指针 */font-size: 1em; /* 字体大小 */padding: 15px; /* 内边距 */text-align: center; /* 文本居中 */transition: background-color 0.3s ease; /* 背景色渐变 */}.button:hover {background-color: #d5d5d5; /* 鼠标悬停背景颜色 */}.button:active {background-color: #cccccc; /* 鼠标按下背景颜色 */}.operator {background-color: #000; /* 操作符按钮背景颜色 */color: #fff; /* 文字颜色 */}.operator:hover {background-color: #f57c00; /* 鼠标悬停背景颜色 */}.operator:active {background-color: #ef6c00; /* 鼠标按下背景颜色 */}.equals {background-color: #000; /* 等号按钮背景颜色 */color: #fff; /* 文字颜色 */}.equals:hover {background-color: #45a049; /* 鼠标悬停背景颜色 */}.equals:active {background-color: #3e8e41; /* 鼠标按下背景颜色 */}/* CSS样式结束 *//style
/head
body
div classcalculator!-- 标题和副标题 --p风尚云网前端学习br一款简易的在线计算器/p!-- 显示屏 --input typetext iddisplay classdisplay readonly!-- 按钮网格 --div classbutton-grid!-- 清除按钮 --button classbutton clearC/button!-- 数字按钮 --button classbutton number1/buttonbutton classbutton number2/buttonbutton classbutton number3/buttonbutton classbutton number4/buttonbutton classbutton number5/buttonbutton classbutton number6/buttonbutton classbutton number7/buttonbutton classbutton number8/buttonbutton classbutton number9/buttonbutton classbutton number0/button!-- 小数点按钮 --button classbutton decimal./button!-- 操作符按钮 --button classbutton operator/buttonbutton classbutton operator-/buttonbutton classbutton operator×/buttonbutton classbutton operator÷/button!-- 等号按钮 --button classbutton equals/button/div
/divscript// 获取显示屏元素const display document.getElementById(display);// 用于存储当前输入的数字let currentInput ;// 用于存储之前的数字let previousInput ;// 用于存储操作符let operation null;// 获取所有按钮const buttons document.querySelectorAll(.button);// 为每个按钮添加点击事件buttons.forEach(button {button.addEventListener(click, () {const value button.textContent;// 处理清除按钮if (value C) {currentInput ;previousInput ;operation null;display.value ;} else if (value ) {// 处理等号按钮计算结果if (previousInput ! operation ! null currentInput ! ) {calculateResult();}} else if ([, -, ×, ÷].includes(value)) {// 处理操作符按钮if (currentInput ! ) {if (operation) {calculateResult();}previousInput parseFloat(currentInput);currentInput ;operation value;}} else if (value .) {// 处理小数点按钮if (!currentInput.includes(.)) {currentInput value;}} else {// 处理数字按钮currentInput value;}// 更新显示屏display.value currentInput || previousInput || ;});});// 计算结果的函数function calculateResult() {let result;const num1 parseFloat(previousInput);const num2 parseFloat(currentInput);// 根据操作符计算结果switch (operation) {case :result num1 num2;break;case -:result num1 - num2;break;case ×:result num1 * num2;break;case ÷:if (num2 0) {alert(除数不能为0);return;}result num1 / num2;break;}// 显示结果display.value result;// 重置输入currentInput result.toString();previousInput ;operation null;}
/script/body
/html结论
通过本教程我们学习了如何创建一个简易的在线计算器。这个项目不仅锻炼了我们的前端技能还帮助我们理解了事件驱动编程的基本概念。希望这个教程能够帮助你更好地理解HTML、CSS和JavaScript的实际应用并激发你创建自己的网页项目。 注意在实际部署时请确保所有的资源文件如CSS和JavaScript都已正确链接以便计算器能够正常工作。如果你在实现过程中遇到任何问题欢迎在评论区提问或寻求帮助。
我是风尚梦想是带十万人创建一个风尚云网全能圈子
