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>




版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

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

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

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

计算器的设计 需求说明          计算器主要功能是根据用户的输入,进行适当的计算。里面需要有内置函数、变量记录功能。 功能、对象        ...

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

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

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

最近一直在和容器打交道,甚至前面的博文,我们也介绍了Spring的IoC的原理以及源码,但是回头看看,duang~ duang~的,还是深了,不够通俗易懂,不够深入浅出。由于以上原因吧,从这篇博客开始...

【SSH进阶之路】一步步重构MVC实现Struts框架——从一个简单MVC开始(三)

上篇【SSH进阶之路】Struts基本原理 + 实现简单登录(二),我们介绍MVC和Struts的基本理论,并实现了一个简单登录的实例。从中我们知道了,Struts是MVC的框架,MVC其实是Mode...

前端自学之路——一个不爱看书的女孩

本文不聊什么专业技术,只想说说我是怎么入前端这个坑的,让所有想学前端的人了解下。         我学的是计算机科学与技术(网络工程方向),这个专业是我们学校新开的,不像计算机专业的一样学安卓和深入...

一个大四求职的菜鸟的web前端学习之路(二)

经过这段时间的学习,越来越体会到真正开发的时候知识储备的重要性,还有就是编译器的使用也能够节省开发过程中的很多时间。虽然说并不提倡就使用某一种,但是至少对开发工具的快捷键要有研究,特别是前端学习中,前...

一个前端的爱情之路

说起这个话题我想大部分人的是很有同感的,每个程序员或多或少着有着这方面的烦恼,本身身处这个行业爱情就像是一叶扁舟。至少我经历这个行业是因为爱情…… 说起来也是有点心酸,我和前女友是在高中时期的同学,...

一个大四求职的菜鸟学习web前端之路

时间过得真快,转眼间大学的四年就要过去了。一直在迷茫中的我也需要为将来的生活做打算。从获取实习工作的困难中,我就知道再不抓紧的,我马上就要面临着毕业等于失业的困境。为了摆脱这种状态且得到技术的提升,在...

web前端学习之路(1)Javascript DOM编程艺术总结

到今天为止已经学习前端一周了,把JavaScript DOM编程艺术作为入门书籍,看了一个星期终于看完了,这本书不愧是入门级神书,看完以后我立马就知道HTML/CSS/JavaScript/DOM/A...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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