使用JavaScript制作一个简单的计算器

直接看效果，这个计算器可以实现简单的加减乘除

1、首先编辑HTML样式，把计算机上的按键全部打印出来

可以显示出以下结果

2、添加css样式

先设置a元素定宽定高，然后左浮动，在微调宽度和高度，使其到达一个合理布局的值

3、编写js代码

写一个for循环，不断接收a点击事件。
编写点击result，点击清零。

3. 点击数字，获取num1和num2的值。

4.获取按键加减乘除，记录下符号

5.点击 “=” ，计算结果

4、最后，附上完整源码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>计算器</title><style type="text/css">*{margin: 0;padding: 0;}body{background-color: #333;}.box{width: 300px;height: 440px;background-color: yellow;margin: 100px auto;}.box h2{line-height: 80px;height: 80px;background-color: #000000;color: #FFFFFF;text-align: center;}.box a{display: block;width: 73px;height: 73px;line-height: 73px;text-align: center;background-color: #111;color: #FFFFFF;border: 1px solid #F0F8FF;float: left;cursor:pointer;}.box a:hover{background-color:#333333;color: #FFFF00;}.box .sp{width: 148px;}</style>
</head>
<body><div class="box"><h2 id="result">结果</h2><a class="sp">AC</a><a class="sp">/</a><a>7</a><a>8</a><a>9</a><a>X</a><a>4</a><a>5</a><a>6</a><a>-</a><a>1</a><a>2</a><a>3</a><a>+</a><a>0</a><a>.</a><a class="sp">=</a></div><script type="text/javascript">window.onload = function(){var a_list = document.getElementsByTagName("a");var result = document.getElementById("result");var fu = "";var num1 = "";var num2 = "";for(var i=0; i<a_list.length; i++){a_list[i].onclick = function(){// alert(this.innerHTML);var key_value = this.innerHTML;switch(key_value){case "+":fu = "+";break;case "-":fu = "-";break;case "X":fu = "X";break;case "/":fu = "/"break;case "=":var n1 = parseFloat(num1);var n2 = parseFloat(num2);switch(fu){case "+":result.innerHTML = n1 + n2;break;case "-":result.innerHTML = n1 - n2;break;case "X":result.innerHTML = n1 * n2;break;case "/":result.innerHTML = n1 / n2;break;}break;case "AC":result.innerHTML = "0";fu = "";num1 = "";num2 = "";break;default:if (fu == "") {num1 = num1 += this.innerHTML;result.innerHTML = num1;} else{num2 = num2 += this.innerHTML;result.innerHTML = num2;}break;}}}}</script>
</body>
</html>

结语：创作不易，麻烦收藏和关注一下！！&( ^___^ )

（即是对作者的支持，也方便自己以后查找，感谢收藏和关注）

以后也会持续更新工作学习中的技术、经验

其它相关文章：

ajxs实现移动端聊天机器人

html+css+js实现简易计算器相关推荐

html + css + js 实现简易计算器
使用LICEcap工具截取的效果图: 计算器页面实现: 为计算器的input输入框添加disabled="disabled"属性,防止从键盘中直接输入除小数点之外的非数字符号:设置 ...
html+css+js实现科学计算器
代码地址如下: http://www.demodashi.com/demo/13751.html 项目描述纯html+css+js实现一个科学计算器,支持平方开方指数对数等基本函数,支持键盘输入,有 ...
html、css、js实现简易计算器
学习HTML,CSS,JS一个月后,想着能自己是否能写出一个简单的东西,故编写了简易的计算器,之前也写过一个坦克大战,坦克大战的有些基本功能没有实现, 故也没有记录下来,想来,对这行初来咋到的,还是需 ...
JavaScript初学入门（JS打印9*9乘法表，JS制作简易计算器）
目录网页的三部分组成: Java和JavaScript的关系: JavaScript的三种使用方式: Js的5种输出方式: Js的语法初始: js中值的类型: JS中的运算符: JS中的流程控制语句 ...
html猜随机数游戏,用js制作简易计算器及猜随机数字游戏
JS简易计算器 input[type="button"] { height:55px; width:55px; background-image: -webkit-linear-g ...
一节前端课：html+css+js做个计算器
QQ突然弹出来一个前端公开课的提示,由于一直想学前段的知识,点进去了,收获了一些东西,做个记录. 题目:计算器的实现技术:html+css+js 1 . body里放俩div,一个大的包一个小的,小 ...
html中实现简单计算器功能,js实现简易计算器功能
制作能进行加减乘除的简易计算器,主要是练习动态注册事件.因以练习为主,所以包含了较多基础方法. 效果图代码简易计算器 window.onload = function(){ document.on ...
HTML+CSS+JS实现简易汇率计算器（使用Fetch）
还是github上找的小玩意跟着模仿着敲的. 首先看一下fetch,我也是学过ajax之后头一次见这玩意,然后就看着人家代码顺便上MDN看了一下. Fetch API 提供了一个 JavaScript ...
利用JS制作简易计算器
目的:利用JS制作一个简易的计算器,能够实现简单四则运算要求:三个输入框输入值只能是数字,当输入非数字时提示并清空输入框,利用正则表达式:点击按钮实现计算. 话不多说,贴图为上: 看了效果图,下面就 ...
绝对干货！纯用HTML+CSS+JS 编写的计算器应用
一道笔试题之前偶然看到一个公司的笔试题,题目如下: 用HTML5.CSS3.JavaScript,做一个网页,实现如下图形式计算器具体要求: 有且只有一个文件:index.html.不允许再有其他 ...

html+css+js实现简易计算器

使用JavaScript制作一个简单的计算器

1、首先编辑HTML样式，把计算机上的按键全部打印出来

2、添加css样式

3、编写js代码

4、最后，附上完整源码

其它相关文章：

html+css+js实现简易计算器相关推荐

最新文章

热门文章