JS实现简易网页计算器

js实现简易计算器。计算器的布局不像表格那么公正对称，所以布局这块相对比较繁琐，但是也可以通过这来练习一下CSS。

一、实现功能

完成计算器的加减乘除的基本计算功能
实现输入框中的字符串拼接

二、实现思路

完成基本布局
js实现运算功能

三、知识点

e.target||e.srcElement ：获取触发事件的元素

四、具体代码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style type="text/css">
body {border: none;
}h1{text-align: center;
}button{cursor: pointer;width: 65px;height: 45px;background-color: hsla(182, 93%, 45%, 0);border-radius: 10px;box-shadow: 3px 3px 5px #ccc;outline: none;font-size: 25px;
}
input{font-size: 25px;border-radius: 10px;width: 200px;height: 40px;
}
#main{text-align:center;width:300px;height: 287px;margin: 0 auto;border:2px solid #ccc;background-image: url('../imges/4.jpg');
}
.num{margin: 10px;
}</style></head>
<body><h1>计算器</h1><div id="main" onclick="cal(event);"><div class="num" ><input type="text" value="0" readonly="readonly" id="screen" /><button>C</button></div><div class="num"><button>7</button><button>8</button><button>9</button><button>/</button></div><div class="num"><button>4</button><button>5</button><button>6</button><button>*</button></div><div class="num"><button>1</button><button>2</button><button>3</button><button>-</button></div><div class="num"><button>0</button><button>.</button><button>=</button><button>+</button></div></div>
</body>
<script type="text/javascript">
function cal(e) {//获取触发事件的元素var obj = e.target||e.srcElement;if(obj.nodeName != "BUTTON"){return;}var v = obj.innerHTML;var screen = document.getElementById("screen");if(v == "C"){screen.value = 0;}else if(v == "="){//获取到输入框的值var exp = screen.value;try{var result = eval("("+exp+")");//将计算结果赋值给输入框screen.value = result;}catch(e){console.log(e);screen.value = "error";}}else{if(screen.value == 0){screen.value = "";}screen.value += v;}}</script>
</html>

五、js部分详解

function cal(e) {//获取触发事件的元素var obj = e.target||e.srcElement;if(obj.nodeName != "BUTTON"){return;}var v = obj.innerHTML;var screen = document.getElementById("screen");if(v == "C"){screen.value = 0;}else if(v == "="){//获取到输入框的值var exp = screen.value;try{var result = eval("("+exp+")");//将计算结果赋值给输入框screen.value = result;}catch(e){console.log(e);screen.value = "error";}}else{if(screen.value == 0){screen.value = "";}screen.value += v;}}

利用e.target||e.srcElement，获取到触发事件的元素，||连接两个语法是为了解决不同浏览器的兼容性问题。

获取到触发事件元素的具体值之后，判断元素值是否等于“=”和“C”，这两个按钮是做区别于普通字符串拼接及计算的其他功能。

C做清屏处理：判断触发事件的按钮值是否为C，若为C，屏幕中只显示0；

=做计算处理：判断触发事件的按钮值是否为=，若为=，利用eval()方法计算屏幕上的公式；

其他触发事件的按钮直接做字符串拼接显示在屏幕上。

六、动图效果

今天的分享就到这里啦！欢迎指正！！！

JS实现简易网页计算器相关推荐

用vue.js实现的网页计算器源码
大家好,今天给大家介绍一款,用vue.js实现的网页计算器源码(图1).送给大家哦,获取方式在本文末尾. 图1 可以切换为科学计算器(图2) 图2 部分代码: <!DOCTYPE html> ...
用HTML，CSS，JS制作一个网页计算器
今天分享一个自己做的网页计算器,我个人感觉,虽然不精简,但是应该涉及到的东西都有了,所以分享出来,那我直接上代码了. <html> <head><meta charset ...
HTML+CSS+JS实现简易汇率计算器（使用Fetch）
还是github上找的小玩意跟着模仿着敲的. 首先看一下fetch,我也是学过ajax之后头一次见这玩意,然后就看着人家代码顺便上MDN看了一下. Fetch API 提供了一个 JavaScript ...
HTML+CSS+js搭建简易网页（1）构建网页的骨架
前言本人正处于JavaScript学习中,并进行网页实战练习进行回顾HTML和CSS,接下来将推出搭建一个网页的必备部分的知识以及实战部分的一个系列文章.本篇文章将带领大家搭建一个网页的骨架. 企业 ...
HTML、CSS与JS实现简易iPhone计算器
效果如图源码,通俗易懂 <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...
设计一个简单的网页计算器
设计一个简单的网页计算器一.代码 <!DOCTYPE html> <html> <head><meta charset="UTF-8"& ...
JavaScript初学入门（JS打印9*9乘法表，JS制作简易计算器）
目录网页的三部分组成: Java和JavaScript的关系: JavaScript的三种使用方式: Js的5种输出方式: Js的语法初始: js中值的类型: JS中的运算符: JS中的流程控制语句 ...
计算器html js php代码,JavaScript计算器网页版实现代码分享
JavaScript网页计算器代码,该计算器是用DW写的! HTML篇计算器 > C ← ± + 7 8 9 - 4 5 6 × 1 2 3 ÷ 0 ▪ ＝ CSS篇 @charset &qu ...
js计算器代码加减乘除_如何用jQuery做一个简易版计算器
经过几个小时地敲敲打打,终于把这一部分的代码完成了. 这类问题的难点不在于布局,而是如何恰当地使用jQuery达成计算.交互的目的,比如储存.显示数值,数据类型的转换等. 在听老师讲课之前的我,思路是 ...

JS实现简易网页计算器

JS实现简易网页计算器相关推荐

最新文章

热门文章