利用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>
以上就是【javascript实现简易的计算器】的全部内容了,欢迎留言评论进行交流!
© 版权声明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!邮箱:cxysz1@tom.com
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请联系管理员!
8. 精力有限,不少源码未能详细测试(解密),不能分辨部分源码是病毒还是误报,所以没有进行任何修改,大家使用前请进行甄别
丞旭猿论坛
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请联系管理员!
8. 精力有限,不少源码未能详细测试(解密),不能分辨部分源码是病毒还是误报,所以没有进行任何修改,大家使用前请进行甄别
丞旭猿论坛
THE END
暂无评论内容