js版实现计算器功能
本文实例为大家分享了js实现计算器功能的具体代码，供大家参考，具体内容如下
在老师的带领下完成了这个简单的计算器，这是一个神奇的过程，计算器的基本功能都是有的。虽然是个简单的计算器，但对初学者来说，还是需要强大的逻辑判断能力，里面有很多的条件，作为开发者要不断的寻找设计里的bug，不断地完善用户的需求，而这些都需要清晰的逻辑推理和判断，我有点头大了。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>计算器</title>
<style>
*{
padding:0;
margin:0;
}
table{
width:400px;
margin:auto;
border:1px solid silver;
border-collapse: collapse;/*列与列的间距*/
}
td {
width: 100px;
border: 1px solid #525252;
}
td input{
width:98.7%;
height:60px;
outline: none;
text-align: right;
font-size: 20px;
background: rgba(251, 255, 227, 0.81);
}
td button{
width:100%;
height:60px;
font-size: 22px;
background: rgba(223, 255, 243, 0.81);
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="4" ><input id="text" type="text" value="0" /></td>
</tr>
<tr>
<td colspan="2"><button class="btn">del</button></td>
<td colspan="2"><button class="btn">c</button></td>
</tr>
<tr>
<td><button class="btn">9</button></td>
<td><button class="btn">8</button></td>
<td><button class="btn">7</button></td>
<td><button class="btn">+</button></td>
</tr>
<tr>
<td><button class="btn">6</button></td>
<td><button class="btn">5</button></td>
<td><button class="btn">4</button></td>
<td><button class="btn">-</button></td>
</tr>
<tr>
<td><button class="btn">3</button></td>
<td><button class="btn">2</button></td>
<td><button class="btn">1</button></td>
<td><button class="btn">*</button></td>
</tr>
<tr>
<td><button class="btn">0</button></td>
<td><button class="btn">.</button></td>
<td><button class="btn">=</button></td>
<td><button class="btn">/</button></td>
</tr>
</table>
<!--<span id="m">8</span>-->
<script>
/* var M=document.getElementById ("m");
console.log(M.innerHTML );
console.log(M.innerText);*/
//获取按钮
var buttonal=document.getElementsByClassName ("btn");
var textal=document.getElementById("text");
var res=[]; //定义一个数组存储输入的值
var label=false;
for(var i=0;i<buttonal.length;i++){
buttonal [i].onclick=addclick;
function addclick(){
//输入为数字或者为“.”
if(!isNaN(this.innerHTML) || this.innerHTML=="."){
//文本框初值不为0
label = true;
if(textal.value!== "0"){
//文本框中含有“.”
if(textal.value.indexOf(".")!==-1){
//处理点重复的问题 文本框里面有点 不上去点（用户按的数字 得加 用户按的是点 不加）
//输入"."时
if(this.innerHTML!== "."){
textal.value+=this.innerHTML;
}
}
else{
textal.value+=this.innerHTML;
}
}
//文本框初值为0
else{
if(this.innerHTML =="."){
textal.value="0"+this.innerHTML ;
}
else{
textal.value=this.innerHTML;
}
}
}
//非数字
else{
switch(this.innerHTML ) {
case "+" :save(this);
break;
case "-" :save(this);
break;
case "/" :save(this);
break;
case "*":save(this);
break;
case "=":
res.push(textal.value);
var result=eval(res.join(""));
if(result =="Infinity"){
remove_add ("remove");
}
textal.value=result==Infinity?"除数不能为零":result;
//console.log(res.join(""));
res=[];
break;
case "del":
//从后往前一个一个的减数字 substr(start,count) substring(start,end) end不取
textal.value = textal.value.length==1 ? "0":textal.value.substr(0,textal.value.length-1);
break;
case "c":
textal.value="0";
res=[];
remove_add("add");
break;
}
}
}
}
function save(mini){
//清屏之前存储用户按的值
// 确认一个条件 用户是连续按符号 还是数字+符号
if(!label){ //连续两次按符号时
res[res.length-1]=mini.innerHTML ; //第二次按的符号替代第一次的
}
else{
res.push(textal.value );
res.push(mini.innerHTML );
}
textal.value="0";
label=false;
}
//卸载除c以外的所有元素的事件
function remove_add(p){
for(var i=0;i<buttonal.length;i++){
if(p == "add"){
buttonal[i].onclick = addclick;
}
else{
if(buttonal[i].innerHTML!="c"){
buttonal[i].onclick = null;
}
}
}
}
</script>
</body>
</html>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
简易js代码实现计算器操作
复制代码 代码如下: <html> <head> <title>JS版计算器</title> <link rel="stylesheet" type="text/css" href=""> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <!--
-
javascript实现计算器功能详解流程
目录 1.计算器功能介绍 2.计算器页面设计 1.导航栏部分 2.数据部分 3.index.wxml布局页面 4.index.css样式页面 5.运行结果 3.功能实现部分 1.删除功能 2.清空功能 3.其他功能实现 1.计算器功能介绍 可以实现数据的加(+),减(-),乘(*),除(/),取余运算(%),以及实现数据的删除(Del)和清空功能(C). 2.计算器页面设计 1.导航栏部分 { "navigationBarBackgroundColor": "#fff&quo
-
javascript实现编写网页版计算器
本篇主要纪录的是利用javscript实现一个网页计算器的效果,供大家参考,具体内容如下 话不多说,代码如下: 首先是html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>利用js实现网页版计算器</title> <link rel="stylesheet" href
-
js实现简单计算器
参考部分资料,编写一个简单的计算器案例,虽然完成了正常需求,但是也有不满之处,待后续实力提升后再来补充,先把不足之处列出: 1:本来打算只要打开页面,计算器的输入框会显示一个默认为0的状态,但是在输入框加入默认显示为0的时候,选择数据输入时,该0会显示输入数字的前面,例如"0123",由于能力有限,待后续实力提升再来补充完善! 2:目前只能实现鼠标控制选择按钮,待完善键盘录入功能. 3:乘法的那个符号在本来想改成"×"这个符号的,待后续完善. 附图片一张: html
-
JavaScript实现简单网页版计算器
背景 由于我又被分进了一个新的项目组,该项目需要用js,因为我没接触过,所以领导准备给我一周时间学习,没错,实现一个简单的支持四则混合运算的计算器就是作业,所以有了这篇文章 故,这篇文章主要重点就不在html和css了,毕竟我也只是略懂皮毛,并未深究过 实现效果 最终展现的页面如下图,当鼠标点击按键时,按键会变色,可以进行四则混合运算 上面一行显示计算式,当按下"="时,显示计算结果 用到的技术 计算器的页面是使用html的table绘制的 按键的大小,颜色,鼠标悬浮变色是用css设置
-
原生js实现简易计算器
本文实例为大家分享了js实现简易计算器的具体代码,供大家参考,具体内容如下 最近,博主闲来无聊,就没事用js写了个简易计算器(博主是搞后端的,不是前端>_<).其实,感觉搞前端的很幸福,自己弄出点东西很有成就感,话不多说,附上源码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计算器</title> <style>
-
javascript写的简单的计算器，内容很多，方法实用，推荐
最近用javascript写了一个简单的计算器,自己测试感觉还好,先给大家观赏下界面: 界面就是这样了,但是功能如何呢? 现在只是个简单的标准计算器,能进行加减乘除连续运算,以及求余运算.如果发生被除数为零的错误,下面会给出提示,就像这样: 自己不知道写的怎么样,但是对于新手来说,这肯定是一份大餐,里面可以接触到的东西不少,可以拿来学习.如果有高手看出里面的疏漏.错误等望不吝赐教,给予指点. 下面贴上代码,希望里面的注释足够多了. js部分: 复制代码 代码如下: var num=0,resul
-
html+js实现简单的计算器代码(加减乘除)
html+js实现简单的计算器代码(加减乘除) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <table> <tr> <td&
-
用javascript实现简单计算器
本文实例为大家分享了javascript实现简单计算器的具体代码,供大家参考,具体内容如下 设计一个简单的计算器 代码 <body> <a>第一个数</a> <input type="test" id="inputId1" value="" /><br/> <a>第二个数</a> <input type="test" id="i
-
js制作简易计算器
本文实例为大家分享了js制作简易计算器的具体代码,供大家参考,具体内容如下 要制作一个如图所示的简易计算器,首先要建立一个表单,制作出如图所示的样子. <table border="1" cellspacing="0" > <tr><th colspan="2">购物简易计算器</th></tr> <tr> <td>第一个数</td> <td&g