javascript制作简易计算器,javascript简易计算器代码
大家好,小编来为大家解答以下问题,利用javascript制作简单的计算器,用javascript制作简易计算器,今天让我们一起来看看吧!
使用JavaScript制作一个简单的计算器
直接看效果,这个计算器可以实现简单的加减乘除
1、首先编辑HTML样式,把计算机上的按键全部打印出来
可以显示出以下结果
2、添加css样式
先设置a元素定宽定高,然后左浮动,在微调宽度和高度,使其到达一个合理布局的值
3、编写js代码
- 写一个for循环,不断接收a点击事件。
- 编写点击result,点击清零Deepl降重。
3. 点击数字,获取num1和num2的值。
4.获取按键加减乘除,记录下符号
5.点击 “=” ,计算结果
4、最后,附上完整源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算器</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-color: #333;
}
.box{
width: 300px;
height: 440px;
background-color: yellow;
margin: 100px auto;
}
.box h2{
line-height: 80px;
height: 80px;
background-color: #000000;
color: #FFFFFF;
text-align: center;
}
.box a{
display: block;
width: 73px;
height: 73px;
line-height: 73px;
text-align: center;
background-color: #111;
color: #FFFFFF;
border: 1px solid #F0F8FF;
float: left;
cursor:pointer;
}
.box a:hover{
background-color:#333333;
color: #FFFF00;
}
.box .sp{
width: 148px;
}
</style>
</head>
<body>
<div class="box">
<h2 id="result">结果</h2>
<a class="sp">AC</a>
<a class="sp">/</a>
<a>7</a>
<a>8</a>
<a>9</a>
<a>X</a>
<a>4</a>
<a>5</a>
<a>6</a>
<a>-</a>
<a>1</a>
<a>2</a>
<a>3</a>
<a>+</a>
<a>0</a>
<a>.</a>
<a class="sp">=</a>
</div>
< type="text/java">
window.onload = function(){
var a_list = document.getElementsByTagName("a");
var result = document.getElementById("result");
var fu = "";
var num1 = "";
var num2 = "";
for(var i=0; i<a_list.length; i++){
a_list[i].onclick = function(){
// alert(this.innerHTML);
var key_value = this.innerHTML;
switch(key_value){
case "+":
fu = "+";
break;
case "-":
fu = "-";
break;
case "X":
fu = "X";
break;
case "/":
fu = "/"
break;
case "=":
var n1 = parseFloat(num1);
var n2 = parseFloat(num2);
switch(fu){
case "+":
result.innerHTML = n1 + n2;
break;
case "-":
result.innerHTML = n1 - n2;
break;
case "X":
result.innerHTML = n1 * n2;
break;
case "/":
result.innerHTML = n1 / n2;
break;
}
break;
case "AC":
result.innerHTML = "0";
fu = "";
num1 = "";
num2 = "";
break;
default:
if (fu == "") {
num1 = num1 += this.innerHTML;
result.innerHTML = num1;
} else{
num2 = num2 += this.innerHTML;
result.innerHTML = num2;
}
break;
}
}
}
}
</>
</body>
</html>
结语:创作不易,麻烦收藏和关注一下!!&( ^___^ )
(即是对作者的支持,也方便自己以后查找,感谢收藏和关注)
以后也会持续更新工作学习中的技术、经验
其它相关文章:
ajxs实现移动端聊天机器人
Ivy@HPC: 文章详细介绍了JS调用API接口的方法,步骤清晰,代码示例丰富,对初学者非常友好,实操性强。注意API的安全性和数据处理,是学习JS网络请求的好资料。
xl_stone: 标题党
Cikl1231: 为啥我弹不出窗口
bh6xqtd: 三月七好评
M694: 谢谢大佬,收获很大