邯郸专业网站建设,慈溪怎么做网站,怎么样免费给网站做优化,wordpress 博客主题 seo文章目录 一、前言二、技术栈三、功能实现3.1 引入样式3.2 编写显示页面3.2 美化计算器页面3.3 实现计算器逻辑 四、总结 一、前言
计算器是我们日常生活中经常使用的工具之一#xff0c;可以帮助我们进行简单的数学运算。在本博文中#xff0c;我将使用JavaScript编写一个漂… 文章目录 一、前言二、技术栈三、功能实现3.1 引入样式3.2 编写显示页面3.2 美化计算器页面3.3 实现计算器逻辑 四、总结 一、前言
计算器是我们日常生活中经常使用的工具之一可以帮助我们进行简单的数学运算。在本博文中我将使用JavaScript编写一个漂亮的计算器并添加加减乘除功能。这个计算器将有一个精美的用户界面包含9个数字按钮和加减乘除操作符。
二、技术栈
HTML负责构建界面CSS负责美化界面JavaScript负责实现计算器的逻辑
三、功能实现
3.1 引入样式
在开始编写代码之前我们需要准备一些资源包括一些图标和字体库。我们可以在网上找到一些开源的资源来使用。在这里我使用了FontAwesome图标库和Google Fonts字体库。
首先在HTML文件中引入FontAwesome图标库和Google Fonts字体库的链接
headlink relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css integritysha512-mvHonSS8g/k1XO4z16sWsZUfrVjPDWcTYTLnm79aJMdN5rSTQhq2ShsVlCHJfFMZML3eCG6v8kHouUqimtCM/A crossoriginanonymous referrerpolicyno-referrer /link relstylesheet hrefhttps://fonts.googleapis.com/css?familyRoboto:300,400,500,700displayswap /
/head3.2 编写显示页面
然后创建一个div元素作为计算器的容器并在其中添加所需的HTML元素
div classcalculatorinput typetext idresult readonly /div classrowbutton classnumber7/buttonbutton classnumber8/buttonbutton classnumber9/buttonbutton classoperatori classfas fa-divide/i/button/divdiv classrowbutton classnumber4/buttonbutton classnumber5/buttonbutton classnumber6/buttonbutton classoperatori classfas fa-times/i/button/divdiv classrowbutton classnumber1/buttonbutton classnumber2/buttonbutton classnumber3/buttonbutton classoperatori classfas fa-minus/i/button/divdiv classrowbutton classnumber0/buttonbutton classoperatori classfas fa-plus/i/button/divdiv classrowbutton idclearC/buttonbutton idequal/button/div
/div页面效果如图
3.2 美化计算器页面
接下来使用CSS来美化我们的计算器界面
.calculator {width: 200px;background-color: #f0f0f0;padding: 10px;border-radius: 5px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);font-family: Roboto, sans-serif;
}input[typetext] {width: 100%;height: 40px;margin-bottom: 15px;padding: 10px;font-size: 20px;text-align: right;
}.row {display: flex;justify-content: space-between;margin-bottom: 10px;
}button {width: 45px;height: 45px;font-size: 16px;border: none;border-radius: 5px;cursor: pointer;
}.number {background-color: #e0e0e0;color: #333;
}.operator {background-color: #ff9800;color: white;
}现在我们已经完成了计算器的界面。接下来我们将使用JavaScript来实现计算器的逻辑。
3.3 实现计算器逻辑
首先我们需要获取HTML元素的引用并设置一些状态变量
// 获取HTML元素的引用
const resultInput document.getElementById(result);
const numberButtons document.getElementsByClassName(number);
const operatorButtons document.getElementsByClassName(operator);
const clearButton document.getElementById(clear);
const equalButton document.getElementById(equal);// 设置状态变量
let currentNumber ;
let firstNumber ;
let operator ;然后我们需要分别为数字按钮、操作符按钮和清除按钮添加事件监听器以便在点击时执行相应的操作
// 为数字按钮添加事件监听器
for (let i 0; i numberButtons.length; i) {numberButtons[i].addEventListener(click, function () {if (operator ) {firstNumber this.innerText;resultInput.value firstNumber;} else {currentNumber this.innerText;resultInput.value currentNumber;}});
}// 为操作符按钮添加事件监听器
for (let i 0; i operatorButtons.length; i) {operatorButtons[i].addEventListener(click, function () {operator this.innerText;resultInput.value operator;});
}// 为清除按钮添加事件监听器
clearButton.addEventListener(click, function () {currentNumber ;firstNumber ;operator ;resultInput.value ;
});最后我们需要为等号按钮添加事件监听器以便在点击时执行相应的计算操作
// 为等号按钮添加事件监听器
equalButton.addEventListener(click, function () {let result;switch (operator) {case :result parseFloat(firstNumber) parseFloat(currentNumber);break;case -:result parseFloat(firstNumber) - parseFloat(currentNumber);break;case *:result parseFloat(firstNumber) * parseFloat(currentNumber);break;case /:result parseFloat(firstNumber) / parseFloat(currentNumber);break;default:result ;}// 更新状态变量currentNumber result.toString();firstNumber ;operator ;resultInput.value result;
});四、总结
好了本文的内容就分享到这里。 希望你在使用这个精美计算器的过程中有所收获它不仅能帮助你进行基本的数学运算还能为你提供一个愉快的使用体验。如果你对编程感兴趣也欢迎自行扩展功能让这个计算器变得更加强大。
