富贵资源网 Design By www.hznty.com
利用javascript实现简易的计算器，供大家参考，具体内容如下
1、先构思整个计算器的模式以及想要实现的功能，按模块创建相应的div，在“head”中设置其样式和布局。
2、用“input”标签创建text类型，置为输出框；依次创建buttom类型，置为按钮，内容为1、2、3……；创建“=”，并在input中对他进行点击事件“οnclick=”result()””.
3、添加script，利用var定义class里面的值,并赋值给一个新的变量，
4、编写for循环语句，执行代码内容
5、最后添加result函数，执行结果。
源代码如下（自行设置style的值）：
<body><div class="contour">
<div class="screen">
<input class="text" type="text" value=''οnfοcus="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'>
<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 = document.getElementsByClassName("bt");
// var result=document.getElementById("result");
var text = document.getElementsByClassName("text")[0];
// console.log(btnArr)
// 用js给某一个元素添加click事件
// btnArr[0].οnclick=function(){
// alert()
// }
// for循环添加click事件
// input的value指的是 input的值
var showNum=''
//alert(btnArr[1].value);
for(var i=0;i<btnArr.length;i++){
btnArr[i].οnclick=function(){
showNum =showNum+this.value;
text.value = showNum;
}
}
function result(){
text.value=eval(showNum)
}
</script>
</body>
关于计算器的精彩文章请查看《计算器专题》 ，更多精彩等你来发现！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
暂无评论...