相思资源网 Design By www.200059.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>
关于计算器的精彩文章请查看《计算器专题》 ，更多精彩等你来发现！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
js,计算器
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无javascript实现简易的计算器的评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。