javascript实现简易的计算器


Posted in Javascript onJanuary 17, 2020

利用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 相关文章推荐
js字符编码函数区别分析
Jun 05 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
JavaScript中的数组特性介绍
Dec 30 Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
May 30 Javascript
微信小程序实现时间戳格式转换
Jul 20 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 02 Javascript
JavaScript简易计算器制作
Jan 17 #Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 #Javascript
js布局实现单选按钮控件
Jan 17 #Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 #Javascript
JavaScript数组去重实现方法小结
Jan 17 #Javascript
JS面向对象之多选框实现
Jan 17 #Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 #Javascript
You might like
PHP 一个比较完善的简单文件上传
2010/03/25 PHP
php中创建和调用webservice接口示例
2014/07/25 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
JavaScript运算符小结
2015/06/03 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
利用python画一颗心的方法示例
2017/01/31 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
python如何制作英文字典
2019/06/25 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
Ejb技术面试题
2015/04/29 面试题
业务部门经理岗位职责
2014/02/23 职场文书
房产转让协议书
2014/04/11 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
简洁的英文求职信范文
2014/05/03 职场文书
疾病捐款倡议书
2014/05/13 职场文书
企业读书活动总结
2014/06/30 职场文书
2015年党员自评材料
2014/12/17 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
高一作文之暖冬
2019/11/09 职场文书
分享提高 Python 代码的可读性的技巧
2022/03/03 Python
springcloud整合seata
2022/05/20 Java/Android
JS前端使用canvas实现扩展物体类和事件派发
2022/08/05 Javascript