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 相关文章推荐
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
jQuery(非HTML5)可编辑表格实现代码
Dec 11 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
微信小程序实现图片预览功能
Jan 31 Javascript
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
package.json各个属性说明详解
Mar 11 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 Javascript
Vue组件生命周期运行原理解析
Nov 25 Vue.js
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 批量替换程序的具体实现代码
2013/10/04 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
详解Python中的分支和循环结构
2020/02/11 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
Java如何调用外部Exe程序
2015/07/04 面试题
教师专业理论水平的自我评价分享
2013/11/09 职场文书
技校毕业生自荐信
2014/06/03 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
企业文化学习心得体会
2016/01/21 职场文书
初二英语教学反思
2016/02/15 职场文书
2019广播稿怎么写
2019/04/17 职场文书
如何正确理解python装饰器
2021/06/15 Python
Java实现简易的分词器功能
2021/06/15 Java/Android
golang生成vcf通讯录格式文件详情
2022/03/25 Golang
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript