1-前端之路的开始-一个简单的计算器

原创 2017年10月06日 22:54:17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background-color: #eee
}
#calculator{
margin: 400px 0 0 700px;
}
</style>
</head>
<body>
<div id="calculator">
<p>
<input type="text" class="formerInput" value="1">
<span class="sign">+</span>
<input type="text" class="laterInput" value="1">
<span>=</span>
<span class="resultOutput">2</span>
</p>


<p>
<input type="button" value="+" class="btn" title='add'>
<input type="button" value="-" class="btn" title='subtract'>
<input type="button" value="×" class="btn" title='multiply'>
<input type="button" value="÷" class="btn" title='divide'>
</p>
</div>


 <script>
var calculator = document.querySelector('#calculator');
    var formerInput = calculator.querySelector('.formerInput');
    var laterInput = calculator.querySelector('.laterInput');
    var sign = calculator.querySelector('.sign');
    var resultOutput = calculator.querySelector('.resultOutput')


    var btns = calculator.querySelectorAll('.btn');


    //绑定事件
    //加
for(var i=0;i<btns.length;i++){
btns[i].onclick = function(){
          switch(this.title){
          case 'add':addHandler();
          break;
          case 'subtract':subtractHandler();
          break;
          case 'multiply':multiplyHandler();
          break;
          case 'divide':divideHandler();
          break;
          }
}
}




    //加
    function addHandler(){
    sign.innerHTML='+';
    resultOutput.innerHTML= +formerInput.value + +laterInput.value;
    }


    //减
    function subtractHandler(){
    sign.innerHTML = '-';
    resultOutput.innerHTML = formerInput.value - laterInput.value;
    }


    //乘
    function multiplyHandler(){
    sign.innerHTML='×';
    resultOutput.innerHTML = formerInput.value*laterInput.value;
    }


    //除
    function divideHandler(){
    sign.innerHTML='÷';
    resultOutput.innerHTML = formerInput.value/laterInput.value;
    }
 






 </script>
    
</body>

</html>




一个基于JavaScript的简单网页计算器

一个基于JavaScript的简单网页计算器,真的很简单。 效果如下: A simple Calculator .number{ ...
  • Youyou_0826
  • Youyou_0826
  • 2017年04月20日 14:26
  • 1209

原生JavaScript实现的简易计算器

最近一直没有写博客 因为一直忙着预习考试内容 什么偏微分啊、数值分析啊、计算机图形学啊、信息论… 在未来一个月可能会很忙 整理前端的频率可能就没那么高了还是说正题 昨天晚上用JavaScri...
  • q1056843325
  • q1056843325
  • 2016年11月29日 20:54
  • 5714

JavaScript实现一个简易的计算器

JavaScript实现简易计算器的具体思路
  • sinat_27088253
  • sinat_27088253
  • 2016年07月18日 10:46
  • 2211

二两橙子的前端之路--用js实现简单计算器功能

本文将通过JavaScript来实现计算器简单的加减乘除运算。
  • Amorcy
  • Amorcy
  • 2016年08月29日 11:20
  • 147

一个前端攻城狮的全栈之路第四弹:jade模板引擎的简单介绍和使用

1、类似于java的jsp模板引擎一样,nodejs的模板引擎jade也是爽歪歪,下面就简单说明一下本文大致介绍的jade内容 (1)拆分可复用的模块,以及怎么在其余模块里引入复用对的模块,这里的模板...
  • Take_Dream_as_Horse
  • Take_Dream_as_Horse
  • 2017年07月15日 12:31
  • 598

【web前端】javascript的eval函数实现的一个简单计算器

初学H5,不知道做什么来练手,就做些小工具吧 今天知道一个函数eval(),感觉是神器,不过官方说这个已经很少用到了 用它来做个计算器还是可以的吧~ 几个点: 1、画圆圈,border-rad...
  • sinat_34880701
  • sinat_34880701
  • 2018年01月12日 15:27
  • 17

小强的HTML5移动开发之路(45)——汇率计算器【1】

这两天看了《PhoneGap实战》上面有一个汇率计算器的例子,个人觉得比较好,就拿出来和大家分享一下,在接下来的几篇文章中我们来一起完成这个PhoneGap + Jquery mobile的小练习。一...
  • lxq_xsyu
  • lxq_xsyu
  • 2014年04月14日 10:43
  • 4919

Android学习之路(1)——计算器——2017_01_09

本人菜鸟一只,现在的我读大三,临近毕业,自己是Android爱好者, 这将是我发表的第一篇关于Android的博客,以后持续更新,给大家提供本人对Android的理解的同时也激励自己时刻努力进步。文章...
  • wjy1025104554
  • wjy1025104554
  • 2017年01月09日 19:20
  • 121

C++实践之路-----计算器(1)

计算器的设计 需求说明          计算器主要功能是根据用户的输入,进行适当的计算。里面需要有内置函数、变量记录功能。 功能、对象          根据需要,我们可以大致抽象出一些对象来: 解...
  • yuejiewc
  • yuejiewc
  • 2013年10月01日 19:22
  • 1393

【SSH进阶之路】一步步重构容器实现Spring框架——从一个简单的容器开始(八)

目录        【SSH进阶之路】一步步重构容器实现Spring框架——从一个简单的容器开始(八)        【SSH进阶之路】一步步重构容器实现Spring框架——解决容器对组件...
  • Flower_and_youth
  • Flower_and_youth
  • 2017年04月20日 22:04
  • 136
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:1-前端之路的开始-一个简单的计算器
举报原因:
原因补充:

(最多只允许输入30个字)