利⽤JAVAscript实现简单计算器
利⽤javascript实现简易的计算器
1. 先构思整个计算器的模式以及想要实现的功能，按模块创建相应的div，在“head”中设置其样式和布局。
2. ⽤“input”标签创建text类型，置为输出框；依次创建buttom类型，置为按钮，内容为1、2、3……；创建“=”，并在input中对
他进⾏点击事件“οnclick=”result()””.
3. 添加script，利⽤var定义class⾥⾯的值，并赋值给⼀个新的变量，
4. 编写for循环语句，执⾏代码内容
5. 最后添加result函数，执⾏结果。
6. 源代码如下（⾃⾏设置style的值）：
<body>
<div class="contour">
<div class="screen">
<input class="text"type="text"value=''onfocus="this.blur();">
</div>
<div class="click">
<div>
<input class="bt t"type="button"value="1">
<input class="bt t"type="button"value='2'>
<input class="bt t"type="button"value='3'>
<input class="bt t"type="button"value='+'>
</div>
<div>
<input class="bt t"type="button"value='4'>
<input class="bt t"type="button"value='5'>
<input class="bt t"type="button"value='6'>
javascript计算器代码
<input class="bt t"type="button"value='-'>
</div>
<div>
<input class="bt t"type="button"value='7'>
<input class="bt t"type="button"value='8'>
<input class="bt t"type="button"value='9'>
<input class="bt t"type="button"value='*'>
</div>
<div>
<input class="bt t"type="button"value='#'>
<input class="bt t"type="button"value='0'>
<input id="result"class="t"type="button"value='='onclick="result()">
<input class="bt t"type="button"value='/'>
</div>
</div>
</div>
<script>
var btnArr = ElementsByClassName("bt");
/
/ var ElementById("result");
var text = ElementsByClassName("text")[0];
// console.log(btnArr)
// ⽤js给某⼀个元素添加click事件
// btnArr[0].onclick=function(){
//    alert()
// }
// for循环添加click事件
// input的value指的是 input的值
var showNum=''
//alert(btnArr[1].value);
for(var i=0;i<btnArr.length;i++){
btnArr[i].onclick=function(){
showNum =showNum+this.value;
text.value = showNum;
}
}
function result(){
text.value=eval(showNum)
}
</script>
</body>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。