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=" ...
随机推荐
- OpenStack之虚拟机热迁移
这里的环境是centos7版本,openstack K版 1.在各个计算节点设置权限 chmod /var/lib/nova/instances 2.修改各个节点的nova.conf(/etc/nov ...
- WTL对话框添加背景图片
WTL91_5321_Final + VS2013 + WIN7 // MainDlg.h : interface of the CMainDlg class // ///////////////// ...
- # 通过 DockerFile 打包镜像
在介绍 Docker 具体的操作前,先简要复习下 Docker 的架构,这样可以更好地帮助我们理解 Docker 中的各个命令. 首先我们一直对 Docker 这个叫法就有些误解,Docker 其实指 ...
- 关于C语言数组的小练习--笔记
#include <stdio.h> #include <windows.h> #include <mmsystem.h> #include <string. ...
- java与c++,python
Java与C++的异同点总结 C++/C/JAVA/Python之间的区别? C++语言与Java语言的区别有哪些? java与C++的区别
- 使用IDEA详解Spring中依赖注入的类型(上)
使用IDEA详解Spring中依赖注入的类型(上) 在Spring中实现IoC容器的方法是依赖注入,依赖注入的作用是在使用Spring框架创建对象时动态地将其所依赖的对象(例如属性值)注入Bean组件 ...
- java8种基本数据类型
- 动态主机配置协议-DHCP
一.DHCP 概述 当局域网中有大量的PC时.如果我们逐个为每台PC去手动配置IP.那这就是一个吃力也未必讨好的办法 累死你 而DHCP 刚好可以解决这个问题.DHCP全称(动态主机配置协议).使用的 ...
- 博客圆美化主题推荐之Slience
博客圆美化主题推荐之Slience 一.前言 本博客美化主题作者为:Esofar,本文仅在教导如何快速把该美化主题应用到自己的博客中,详细部署内容见Silence - 专注于阅读的博客园主题. 二.博 ...
- [redis读书笔记] 第二部分 单机数据库 RDB持久化
内存中的rdb是会存为文件以做到RDB持久化的.RDB文件时一个二进制文件. 一 载入与存储 文件的载入是在server启动时进行的(rdbload()),因为AOF的更新频率比RDB高,所以如果AO ...