JS简易计算器的实现，以及代码的优化
用JS实现简易计算器
首先创建结构和样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin:0;
padding:0;
background-color: #abcdef;
}
.cal{
width:560px;
height:100px;
margin:0 auto;
padding-top:300px;
}
</style>
</head>
<body> <div class="cal">
<p>
<input type="text" class="num1" value="1">
<span class="sign">+</span>
<input type="text" class="num2" value="1">
<span>=</span>
<span class="res">2</span>
</p>
<p>
<input type="button" value="+">
<input type="button" value="-">
<input type="button" value="*">
<input type="button" value="/">
</p>
</div>
<script> </script> </body>
</html>
添加javascript功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin:0;
padding:0;
background-color: #abcdef;
}
.cal{
width:560px;
height:100px;
margin:0 auto;
padding-top:300px;
}
</style>
</head>
<body> <div class="cal">
<p>
<input type="text" class="num1" value="1">
<span class="sign">+</span>
<input type="text" class="num2" value="1">
<span>=</span>
<span class="res">2</span>
</p>
<p>
<input type="button" value="+" class="btn">
<input type="button" value="-" class="btn">
<input type="button" value="*" class="btn">
<input type="button" value="/" class="btn">
</p>
</div> <script>
var cal=document.querySelector(".cal");
var num1=cal.querySelector(".num1");
var num2=cal.querySelector(".num2");
var sign=cal.querySelector(".sign");
var res=cal.querySelector(".res"); var btns=cal.querySelectorAll(".btn"); btns[0].onclick=add;
btns[1].onclick=subtract;
btns[2].onclick=multiply;
btns[3].onclick=divide; function add(){
sign.innerHTML="+";
//由于DOM获取到的值都是字符串形式，因此进行操作时需要先转为number类型
res.innerHTML=Number(num1.value)+Number(num2.value);
}
function subtract(){
sign.innerHTML="-";
res.innerHTML=Number(num1.value)-Number(num2.value);
}
function multiply(){
sign.innerHTML="*";
res.innerHTML=Number(num1.value)*Number(num2.value);
}
function divide(){
sign.innerHTML="/";
res.innerHTML=Number(num1.value)/Number(num2.value);
}
</script> </body>
</html>
代码的优化：
循环实现绑定
给一个外部接口，用于新增运算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin:0;
padding:0;
background-color: #abcdef;
}
.cal{
width:560px;
height:100px;
margin:0 auto;
padding-top:300px;
}
</style>
</head>
<body> <div class="cal">
<p>
<input type="text" class="num1" value="1">
<span class="sign">+</span>
<input type="text" class="num2" value="1">
<span>=</span>
<span class="res">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">
<input type="button" value="%" class="btn" title="mod">
</p>
</div> <script>
var cal=document.querySelector(".cal");
var num1=cal.querySelector(".num1");
var num2=cal.querySelector(".num2");
var sign=cal.querySelector(".sign");
var res=cal.querySelector(".res"); var btns=cal.querySelectorAll(".btn"); //给每个按钮绑定事件
for(var i=0;i<btns.length;i++){
operate(i);
} //运算函数
function operate(i){
var op=btns[i].value;//获取运算
var opName=btns[i].title;//获取运算名
//绑定事件
btns[i].onclick=function(){
sign.innerHTML=op;
res.innerHTML=operation[opName](Number(num1.value),Number(num2.value));
}
} var operation={
add:function(n1,n2){
return n1+n2;
},
subtract:function(n1,n2){
return n1-n2;
},
multiply:function(n1,n2){
return n1*n2;
},
divide:function(n1,n2){
return n1/n2;
},
//给一个新增运算的接口
addOperation:function(name,fn){
//如果该运算不存在
if(!this.name){
this[name]=fn;
}
}
} //新增取余运算
operation.addOperation("mod",function(n1,n2){
return n1%n2;
});
</script> </body>
</html>
JS简易计算器的实现，以及代码的优化的更多相关文章
- js简易计算器底层运算逻辑(带撤销功能)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 用js制作简易计算器及猜随机数字游戏
<!doctype html><html><head> <meta charset="utf-8"> <title>JS ...
- 使用html+css+js实现简易计算器
使用html+css+js实现简易计算器, 效果图如下: html代码如下: <!DOCTYPE html> <html lang="en"> <he ...
- 原生JS实现简易计算器
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- [java代码库]-简易计算器（第二种）
[java代码库]-简易计算器(第二种) 第二种方案:在程序中不使用if/switch……case等语句,完成计算器功能. <html> <head> <title> ...
- 项目：JS实现简易计算器案例
组件化网页开发下的: 步骤一:让页面动起来的JavaScript深入讲解 的 项目:JS实现简易计算器案例
- JS实现简易计算器的7种方法
先放图(好吧比较挫) 方法一:最容易版 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta ...
- js之简易计算器
<!DOCTYPE html PUBLIC "-//W3C//Dli XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS编写简易计算器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head lang=" ...
随机推荐
- python多层数组合成一个数组后循环打印出数组内的每一项元素的方法
a=[1,2,3,4] b=[5,6,7,8] c=[a,b] def test(c): for i in c: return i print(test(c)) 以上代码执行后打印出来的结果是 预期目 ...
- Nginx code 状态码说明
最近了解下Nginx的Code状态码,在此简单总结下. 先来再回顾一下一个http请求处理流程: 一个普通的http请求处理流程,如上图所示: A -> client端发起请求给nginx B ...
- linux--->ab测试工具使用
ab测试工具使用 ab简介 是apache自带的压力测试工具.其原理是ab命令会创建多个并发访问线程,模拟多个访问者同时对某一URL地址进行访问.它的测试目标是基于URL的,因此,它既可以用来测试ap ...
- 【大白话系列】MySQL 学习总结 之 初步了解 MySQL 的架构设计
一.MySQL还是个黑盒子 我们都知道,只要我们系统引入了 MySQL 驱动和连接池,就能从数据库连接池获取一个数据库连接,然后就可以执行增删改查的操作了. 可是我们并不知道 MySQL 里面是怎么执 ...
- winsocket入门学习
参考资料:http://c.biancheng.net/cpp/socket/ http://www.winsocketdotnetworkprogramming.com/ socket 是" ...
- Lua使用luasocket http请求例子
local http=require("socket.http"); local request_body = [[login=user&password=123]] lo ...
- [web]2019第一起数据泄露事件
-rwxrwxrwx 33405108 Jan 22 2016 000webhost.txt -rwxrwxrwx 165025 Jul 29 2017 01nii.ru {1.931} [HASH] ...
- DevOps：运维体系建设
简介 运维体系的建设的目的在于方便运维工作,通过自动化.规范化.流程化的操作方法提高运维效率,打造一个安全.可靠.高效.可追踪.可回溯的运维环境,实现一个高可用.高并发.具备高容错.自我修复.故障能快 ...
- MapReduce清洗数据进行可视化
继上篇第一阶段清洗数据并导入hive 本篇是剩下的两阶段 2.数据处理: ·统计最受欢迎的视频/文章的Top10访问次数 (video/article) ·按照地市统计最受欢迎的Top10课程 (ip ...
- 通过 Serverless 加速 Blazor WebAssembly
Blazor ❤ Serverless 我正在开发 Ant Design 的 Blazor 版本,预览页面部署在 Github Pages 上,但是加载速度很不理想,往往需要 1 分钟多钟才完成. 项 ...