利用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>