js练习计算器
js练习计算器，支持鼠标点击、键盘操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>计算器2.2</title> </head> <body> <input id="a1" disabled="disabled" />
<input id="a2" disabled="disabled" />
<input id="a3" disabled="disabled" /> <p id="counter"></p> <script type="text/javascript">
function addnum(id)
{
b2 = document.getElementById("a2").value;
if(!b2){
document.getElementById("a1").value += id;
}else{
document.getElementById("a3").value += id;
}
} function addtype(id)
{
b1 = document.getElementById("a1").value;
if(!b1){
alert("请输入数字1");
return false;
}
if(id=='*'){
type = '×';
}else if(id=='/'){
type = '÷';
}else{
type = id;
}
document.getElementById("a2").value = type;
} function backspace()
{
b1 = document.getElementById("a1").value;
b2 = document.getElementById("a2").value;
b3 = document.getElementById("a3").value; if(b3){
b3 = b3.substring(0,b3.length-1);
document.getElementById("a3").value = b3;
}else if(b2){
b2 = b2.substring(0,b2.length-1);
document.getElementById("a2").value = b2;
}else if(b1){
b1 = b1.substring(0,b1.length-1);
document.getElementById("a1").value = b1;
}
} function clean()
{
document.getElementById("a1").value="";
document.getElementById("a2").value="";
document.getElementById("a3").value="";
} function suan()
{
var b1 = document.getElementById("a1").value;
var b2 = document.getElementById("a2").value;
if(b2=="×"){
b2 = "*";
}else if(b2=="÷"){
b2 = '/';
}
var b3 = document.getElementById("a3").value;
var bbb = new Array(["+"],["-"],["*"],["/"]); if(!b1){
alert("请输入数字1");
return false;
}
if(b2!=bbb[0] && b2!=bbb[1] && b2!=bbb[2] && b2!=bbb[3]){
alert("请输入运算符");
return false;
}
if(!b3){
alert("请输入数字2");
return false;
}
if(b2==bbb[0]){
var b4=Number(b1)+Number(b3);
}
else if(b2==bbb[1]){
var b4=Number(b1)-Number(b3);
}
else if(b2==bbb[2]){
//js乘法不精确会有很多小数点，整体乘一个数再除去它
b1 = Number(b1)*10000;
b3 = Number(b3)*10000;
b4=b1*b3/100000000;
b1 = b1/10000;
b3 = b3/10000;
}
else if(b2==bbb[3]){
if(b3==0){
b4="[除数不能为零]";
}else{
b4 = Math.round(Number(b1)/Number(b3));
var b5=Number(b1)%Number(b3);
b4=b4+" 余数"+b5;
}
}
if(b2=="*"){
b2 = "×";
}else if(b2=="/"){
b2 = '÷';
}
document.getElementById("counter").innerHTML = b1+b2+b3+"="+b4;
document.getElementById("a1").value="";
document.getElementById("a2").value="";
document.getElementById("a3").value="";
} //keyCode对应键位
keyarr = new Array()
//数字
keyarr[48] = keyarr[96] = "0";
keyarr[49] = keyarr[97] = 1;
keyarr[50] = keyarr[98] = 2;
keyarr[51] = keyarr[99] = 3;
keyarr[52] = keyarr[100] = 4;
keyarr[53] = keyarr[101] = 5;
keyarr[54] = keyarr[102] = 6;
keyarr[55] = keyarr[103] = 7;
keyarr[56] = keyarr[104] = 8;
keyarr[57] = keyarr[105] = 9;
keyarr[110] = keyarr[190] = ".";
//运算符
keyarr[107] = "+";
keyarr[109] = "-";
keyarr[106] = "*";
keyarr[111] = "/";
//退格
keyarr[8] = "backspace";
//结果
keyarr[13] = "="; /*键盘事件*/
var isPiss = 0;
document.onkeydown = function(event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
id = keyarr[e.keyCode];
if(id){
if(id=="+" || id=="-" || id=="*" || id=="/"){ //运算
addtype(id);
}else if(id=="backspace"){ //退格
backspace();
}else if(id=="="){ //结果
suan();
}else{ //输入数字
addnum(id);
}
}
};
</script> <style>
.clear {clear:both; height:0 !important; width:0 !important; overflow:hidden; font-size:0;}
.jisuanqi {width:303px; height:450px; background:#000; overflow:hidden; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; font-family:"Microsoft Yahei";}
.jrow {padding-bottom:5px;}
.num, .type {width:72px; height:86px; overflow:hidden; line-height:86px; text-align:center; float:left; color:#fff; font-size:38px; cursor:pointer;}
.num {background:#343432; margin-right:5px;}
.num:active {background:#181818;}
.type {background:#181818;}
.type:active {background:#343432;}
.clean, .backspace {width:149px; height:86px; overflow:hidden; line-height:86px; text-align:center; color:#fff; font-size:38px; cursor:pointer;}
.clean {background:#343432; float:left;}
.clean:active {background:#181818;}
.backspace {background:#181818; float:right;}
.backspace:active {background:#343432;}
</style> <div class="jisuanqi">
<div class="jrow">
<div class="num" onclick="addnum(7)">7</div>
<div class="num" onclick="addnum(8)">8</div>
<div class="num" onclick="addnum(9)">9</div>
<div class="type" onclick="addtype('/')">÷</div>
<div class="clear"></div>
</div> <div class="jrow">
<div class="num" onclick="addnum(4)">4</div>
<div class="num" onclick="addnum(5)">5</div>
<div class="num" onclick="addnum(6)">6</div>
<div class="type" onclick="addtype('*')">×</div>
<div class="clear"></div>
</div> <div class="jrow">
<div class="num" onclick="addnum(1)">1</div>
<div class="num" onclick="addnum(2)">2</div>
<div class="num" onclick="addnum(3)">3</div>
<div class="type" onclick="addtype('-')">-</div>
<div class="clear"></div>
</div> <div class="jrow">
<div class="num" onclick="addnum('.')">.</div>
<div class="num" onclick="addnum(0)">0</div>
<div class="num" onclick="suan()">=</div>
<div class="type" onclick="addtype('+')">+</div>
<div class="clear"></div>
</div> <div class="jrow">
<div class="clean" onclick="clean()">C</div>
<div class="backspace" onclick="backspace()">←</div>
<div class="clear"></div>
</div>
</div> </body>
</html>
js练习计算器的更多相关文章
- 使用html+css+js实现计算器
使用html+css+js实现计算器,开启你的计算之旅吧 效果图: 代码如下,复制即可使用: <!DOCTYPE html><html lang="en"> ...
- JS中 计算器的简单制作
今天学习的是JS中的if语句,除此之外老师还教给我们switch语句的用法, 我们用来写了简单计算器的算法,如下: <script> var a=prompt("请输入一个数字& ...
- 纯js房贷计算器开源
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS简易计算器的实现，以及代码的优化
用JS实现简易计算器 首先创建结构和样式 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- JS实现计算器，带三角函数，根号
极简主义网页计算器. 实现了按键特效,可响应键盘按键,实时显示计算结果. 可切换模式,拓展高级功能,包括根号.三角函数.括号等. 效果如下: 代码如下: html: <!DOCTYPE html ...
- js做计算器
js文档: function count(){ var a var txt1=document.getElementById("txt1").value;//获取第一个输入框的值 ...
- js存款计算器原生小demo
大家好,本人是初入前端的一枚程序猿,深知js底层开发的重要性,这也是我的软肋所在(曾经以为),渐渐的明白了一个道理,饭要一口口吃,路要一步步走,这也是我想告诉给所有刚刚进入IT行业的技术员们,沉下心, ...
- JS作计算器
JavaScript制作计算器 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- js jq计算器
<html><head><meta http-equiv="Content-type" content="text/html; charse ...
随机推荐
- MikroTik-ROS-无线设备传输距离
近期在MikroTik官网论坛给出了官方无线成品设备的最大传输距离. 以下设备列表基于理想的环境条件,包括干扰,天气,校准精度等因素,表给出了基于802.11ac或802.11n在获取最大传输带宽的情 ...
- Blueprint 编译概述
转自:http://blog.csdn.net/cartzhang/article/details/39637269 一.术语 Blueprint,像C++语言一下的,在游戏中使用前需要编译.当你在B ...
- 读java并发编程笔记
同步策略:在共享资源上面加锁 java监视器模式:class对象-与之对应的锁(内置锁)[对象锁与class锁] 执行策略: 取消策略: =============================== ...
- Django视图View
1.什么是Django的视图函数 一个视图函数(或者一个类),简称视图 是python的一个简单的函数,他是接受web请求 并且 处理逻辑 进而返回 响应 响应可以是一张网页的HTML内容,一个重定向 ...
- python入门第3篇 pycharm安装及使用
内容: 1. python开发工具的介绍及安装 2.pycharm的设置及技巧 一.python开发工具的介绍及安装 python下载后就自带了一个官方的IDE,官方的IDE我个人觉得不是很好用,所以 ...
- ES6系列_12之map数据结构
1.map数据结构出现的原因? JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键.这给它的使用带来了很大的限制.为了能实现将对象作为键 ...
- Seetaface 向树莓派 移植
seetaface由中科院计算所山世光研究员带领的人脸识别研究组研发.代码基于C++实现,不依赖第三方库.然而,目前开源的代码,是在windows vs上编译的,对于我们这帮mac/linux用户来说 ...
- 解决Visual Studio Community 2017工具栏中没有Report Viewer的问题
选择“工具”>“Nuget包管理器”>“程序包管理器控制台” 执行命令:Install-Package Microsoft.ReportingServices.ReportViewerCo ...
- DB2 数据类型转换
db2数据类型转换: 1.CAST() CAST (<expression> AS <data_ type>[ length ]) 2.CONVERT() CONVERT (& ...
- Spring Cloud Eureka高可用落地实战
一.原理 如图所示,多台Server端之间相互注册(这里以两台Server为例),Client端向所有的Server端注册. 二.Server端配置 1. 添加依赖 <dependency> ...