陕西省建设业协会网站,经典营销型网站,一个网站做三个关键词,网站的v2信誉认证怎么做#x1f648;作者简介#xff1a;练习时长两年半的Java up主 #x1f649;个人主页#xff1a;程序员老茶 #x1f64a; ps:点赞#x1f44d;是免费的#xff0c;却可以让写博客的作者开心好久好久#x1f60e; #x1f4da;系列专栏#xff1a;Java全栈#xff0c;… 作者简介练习时长两年半的Java up主 个人主页程序员老茶 ps:点赞是免费的却可以让写博客的作者开心好久好久 系列专栏Java全栈计算机系列火速更新中 格言种一棵树最好的时间是十年前其次是现在 动动小手点个关注不迷路感谢宝子们一键三连 目录 课程名HTMLCSSJS内容/作用知识点/设计/实验/作业/练习学习HTMLCSSJS思路效果图代码 课程名HTMLCSSJS
内容/作用知识点/设计/实验/作业/练习
学习HTMLCSSJS
思路
创建HTML页面包含数字和操作符的按钮以及一个输出框使用CSS样式美化页面使用JavaScript编写计算器的逻辑通过绑定事件处理程序实现对按钮的响应和输出结果到输出框
效果图 代码
HTML:
!DOCTYPE html
html
headmeta charsetUTF-8titleCalculator/titlelink relstylesheet hrefstyle.css
/head
bodydiv classcalculatordiv classoutputinput typetext idresult disabled/divdiv classbtn-rowbutton classoperator idclearC/buttonbutton classoperator idbackspaceCE/buttonbutton classoperator iddivide//buttonbutton classoperator idmultiply*/button/divdiv classbtn-rowbutton classnumber id77/buttonbutton classnumber id88/buttonbutton classnumber id99/buttonbutton classoperator idminus-/button/divdiv classbtn-rowbutton classnumber id44/buttonbutton classnumber id55/buttonbutton classnumber id66/buttonbutton classoperator idplus/button/divdiv classbtn-rowbutton classnumber id11/buttonbutton classnumber id22/buttonbutton classnumber id33/buttonbutton classoperator idequals/button/divdiv classbtn-rowbutton classnumber id00/buttonbutton classoperator iddecimal./button/div/divscript srcapp.js/script
/body
/htmlCSS:
* {margin: 0;padding: 0;box-sizing: border-box;font-family: Arial, sans-serif;
}.calculator {margin: 50px auto;width: 300px;background-color: #eee;border-radius: 10px;padding: 20px;box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}.output {margin-bottom: 20px;
}#result {width: 100%;font-size: 2em;text-align: right;padding: 5px;background-color: #fff;border: none;border-radius: 5px;box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}.btn-row {display: flex;justify-content: space-between;margin-bottom: 5px;
}button {background-color: #fff;color: #333;font-size: 1.5em;border: none;border-radius: 5px;padding: 10px;width: 70px;height: 70px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);cursor: pointer;transition: all 0.3s ease;
}button:hover {background-color: #333;color: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}.number {background-color: #eee;
}.operator {background-color: #f2a53f;color: #fff;
}.btn-row:last-child button {width: 150px;
}.btn-row:last-child button#decimal {width: 70px;
}.btn-row:last-child button#0 {width: 150px;
}
JavaScript:
//获取DOM元素
const result document.getElementById(result);
const clearBtn document.getElementById(clear);
const backspaceBtn document.getElementById(backspace);
const divideBtn document.getElementById(divide);
const multiplyBtn document.getElementById(multiply);
const minusBtn document.getElementById(minus);
const plusBtn document.getElementById(plus);
const equalsBtn document.getElementById(equals);
const decimalBtn document.getElementById(decimal);
const numberBtns document.querySelectorAll(.number);let currentOperation null;
let firstOperand null;//添加事件监听器
clearBtn.addEventListener(click, () {resetCalculator();
});backspaceBtn.addEventListener(click, () {result.value result.value.slice(0, -1);
});divideBtn.addEventListener(click, () {setOperation(/);
});multiplyBtn.addEventListener(click, () {setOperation(*);
});minusBtn.addEventListener(click, () {setOperation(-);
});plusBtn.addEventListener(click, () {setOperation();
});equalsBtn.addEventListener(click, () {if (currentOperation ! null) {compute();currentOperation null;}
});decimalBtn.addEventListener(click, () {if (!result.value.includes(.)) {result.value .;}
});numberBtns.forEach((button) {button.addEventListener(click, () {if (result.value 0) {result.value button.innerText;} else {result.value button.innerText;}});
});//重置计算器
function resetCalculator() {currentOperation null;firstOperand null;result.value 0;
}//设置操作符
function setOperation(operator) {if (currentOperation ! null) {compute();}currentOperation operator;firstOperand parseFloat(result.value);result.value 0;
}//计算结果
function compute() {const secondOperand parseFloat(result.value);let resultValue;switch (currentOperation) {case :resultValue firstOperand secondOperand;break;case -:resultValue firstOperand - secondOperand;break;case *:resultValue firstOperand * secondOperand;break;case /:resultValue firstOperand / secondOperand;break;default:return;}result.value resultValue;firstOperand resultValue;
}这是一个基础的计算器可以进行加、减、乘、除运算并且支持小数点。如果需要增加新的功能比如开方、取反、取余等只需在HTML中添加相应的按钮并在JavaScript中添加相应的事件监听器和函数即可。
往期专栏Java全栈开发数据结构与算法计算机组成原理操作系统数据库系统物联网控制原理与技术
