如何用HTML和JavaScript写一个计算器
如何用HTML和JavaScript写一个计算器
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" href="favicon.ico">
<title>计算器</title>
<style type="text/css">
.box {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
width: 285px;
height: 350px;
margin: 5% auto auto;
border: 1px solid #9e9b97;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), inset -1px -6px 12px 0.1px #89847e; /*四周阴影*/
border-radius: 20px;
user-select: none; /*文本不能被选择*/
background-color: white;
}
.screen {
height: 60px;
width: 240px;
border: 1px solid #7c877f;
background: #c7d3c5;
margin: 25px 20px 5px 25px;
border-radius: 6px;
}
.main-screen {
width: 240px;
height: 22px;
padding: 5px 0px;
font-size: 22px;
text-align: right;
}
.sub-screen {
max-width: 280px;
height: 15px;
padding: 5px 0px;
font-size: 14px;
text-align: right;
}
.buttons {
margin: 10px 15px;
}
button{
margin: 5px;
/*padding: 3px 10px;*/
width: 50px;
height: 30px;
border: none;
box-shadow: 1px 2px #666;
border-radius: 6px;
cursor:pointer;/*鼠标变手*/
}
button:hover{
background-color: rgba(0, 0, 0, 0.4);
}
button:active {
box-shadow: none;
transform: translateY(4px); /*定义向y轴的转换*/
}
#btnZero {
width: 113px;
margin-right: 7px;
}
.btnEquals {
position: absolute;
margin-left: 10px;
height: 75px;
background-color: #5bc0de;
}
.btnClean{
background-color: #d9534f;
}
.btnBackSpace{
background-color: #f0ad4e;
}
button:focus {outline:0;} /*去掉按钮选中后的蓝色边线*/
p{
height: 50px;
text-align: center;
line-height: 50px;
}
a{
text-decoration: none;
color: #5bc0de;
}
</style>
</head>
<body>
<div class="box">
<div class="screen">
<div class="main-screen" id="output">0</div>
<div class="sub-screen" id="output2"></div>
</div>
<div class="buttons">
<button class="btnClean">AC</button>
<button class="btnBackSpace" value="CE">CE</button>
<button class="btnDivsion" value="/">/</button>
<button class="btnMult" value="*">*</button>
</div>
<div class="buttons">
<button class="nums" value="7">7</button>
<button class="nums" value="8">8</button>
<button class="nums" value="9">9</button>
<button class="btnReduce" value="-">-</button>
</div>
<div class="buttons">
<button class="nums" value="4">4</button>
<button class="nums" value="5">5</button>
<button class="nums" value="6">6</button>
<button class="btnAdd" value="+">+</button>
</div>
<div class="buttons">
<button class="nums" value="1">1</button>
<button class="nums" value="2">2</button>
<button class="nums" value="3">3</button>
<button class="btnEquals" value="=">=</button>
</div>
<div class="buttons">
<button class="nums" id="btnZero" value="0">0</button>
<button class="nums" value="." >.</button>
</div>
<div class="stat">
<p>MADE BY <a href="https://www.buguagaoshu.com/" target="_blank">史上最帅社会主义接班人</a></p>
</div>
</div>
<script>
window.onload = function(){
//创建变量保存数据
var num1 = null,num2 = null,temp = null,equals = null;
//获取数字
//getElementsByClassName()返回一个为此名字class的数组
var btn_nums = document.getElementsByClassName("nums");
//获取清除和退格
var btn_AC = document.getElementsByClassName("btnClean");
var btn_CE = document.getElementsByClassName("btnBackSpace");
//获取操作符号
var btn_Divsion = document.getElementsByClassName("btnDivsion");
var btn_Reduce = document.getElementsByClassName("btnReduce");
var btn_Add = document.getElementsByClassName("btnAdd");
var btn_Equals = document.getElementsByClassName("btnEquals");
var btn_Mult = document.getElementsByClassName("btnMult");
//获取屏幕元素
var main_screen = document.getElementById("output");
var sub_screen =document.getElementById("output2");
var flag = 0;
//事件处理,如果按下AC，所有数据清零
btn_AC[0].onclick = function(){
main_screen.innerHTML = "0"; //使用innerHTML修改div内容
sub_screen.innerHTML = "";
flag=0;
}
//CE退格
btn_CE[0].onclick = function(){
if(main_screen.innerHTML.length-1 == 0){
main_screen.innerHTML = "";
sub_screen.innerHTML = sub_screen.innerHTML.substr(0,sub_screen.innerHTML.length-1);;
return;
}
//substr() 截断字符串 1.从那个位置开始 2.截取多少长度*
main_screen.innerHTML = main_screen.innerHTML.substr(0,main_screen.innerHTML.length-1);
sub_screen.innerHTML = sub_screen.innerHTML.substr(0,sub_screen.innerHTML.length-1);
}
//检测输入的数字
for(var i = 0;i < btn_nums.length;i++){
btn_nums[i].onclick = function(){
if(main_screen.innerHTML[0] == 0){
main_screen.innerHTML = this.innerHTML;
sub_screen.innerHTML = this.innerHTML;
}
else{
main_screen.innerHTML += this.innerHTML;
sub_screen.innerHTML += this.innerHTML;
//alert(this.innerHTML);
}
}
}
//检测数据输入正误
function JudgePoint(str){
var flag = 0;
for(var i = 0; i < str.length; i++){
if(str[i] == '.'){
flag++;
}
//alert(str[i]);
}
if(flag >= 2)
{
alert("输入数据有误，请重新输入！");
main_screen.innerHTML = "";
return 0;
}
else
return 1;
}
function Calculate(str){
if(JudgePoint(main_screen.innerHTML) == 1)
{
num1 = parseFloat(main_screen.innerHTML);
main_screen.innerHTML = "";
//sub_screen.innerHTML += this.innerHTML;
//console.log("num1=",num1);
}
}
//查找运算符计算结果
function SearchOperator(str){
num2 = parseFloat(main_screen.innerHTML);
console.log("num2=",num2);
//alert(num1);
var oper = str[str.length-main_screen.innerHTML.length-1];
if(oper == '/'){
temp = num1 / num2;
main_screen.innerHTML = "";
num1=temp;
//console.log("num1=",num1);
//console.log("num2=",num2);
}
else if(oper == '*'){
temp = num1 * num2;
main_screen.innerHTML = "";
num1=temp;
//console.log("num1=",num1);
//console.log("num2=",num2);
}
else if(oper == '+'){
temp = num1 + num2;
main_screen.innerHTML = "";
num1=temp;
}
else if(oper == '-'){
temp = num1 - num2;
main_screen.innerHTML = "";
num1=temp;
}
}
btn_Divsion[0].onclick = function(){
if(flag==0){
Calculate();
sub_screen.innerHTML += this.innerHTML;
//alert(num1);
flag = 1;
}
else{
SearchOperator(sub_screen.innerHTML);
sub_screen.innerHTML = num1 + this.innerHTML;
}
}
btn_Reduce[0].onclick = function(){
if(flag==0){
Calculate();
sub_screen.innerHTML += this.innerHTML;
//alert(num1);
flag = 1;
}
else{
SearchOperator(sub_screen.innerHTML);
sub_screen.innerHTML = num1 + this.innerHTML;
}
}
btn_Add[0].onclick = function(){
if(flag==0){
Calculate();
sub_screen.innerHTML += this.innerHTML;
flag = 1;
}
else{
SearchOperator(sub_screen.innerHTML);
sub_screen.innerHTML = num1 + this.innerHTML;
}
}
btn_Mult[0].onclick = function(){
if(flag==0){
Calculate();
sub_screen.innerHTML += this.innerHTML;
flag = 1;
}
else{
SearchOperator(sub_screen.innerHTML);
sub_screen.innerHTML = num1 + this.innerHTML;
}
}
btn_Equals[0].onclick = function(){
SearchOperator(sub_screen.innerHTML);
main_screen.innerHTML=temp;
sub_screen.innerHTML=temp;
flag=0;
}
}
</script>
</body>
</html>最终效果
本文链接：
/archives/1686658505008
版权声明：
本站所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自
不挂高数！
喜欢就支持一下吧
打赏
微信
支付宝
微信
支付宝