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 相关文章推荐
AngularJS基础学习笔记之控制器
May 10 Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
JS中的BOM应用
Feb 02 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 Javascript
vue中实现高德定位功能
Dec 03 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
德生PL660的电路分析和打磨
2021/03/02 无线电
PHP 时间转换Unix时间戳代码
2010/01/22 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
js获取字符串最后一位方法汇总
2014/11/13 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
Node.js系列之安装配置与基本使用(1)
2019/08/30 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
python根据出生年份简单计算生肖的方法
2015/03/27 Python
python3的输入方式及多组输入方法
2018/10/17 Python
Python 实现两个列表里元素对应相乘的方法
2018/11/14 Python
python redis 删除key脚本的实例
2019/02/19 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
行政部岗位职责范本
2014/03/13 职场文书
社会公德演讲稿
2014/05/20 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP