js版实现计算器功能
作者:fanfan_h 发布时间:2024-04-23 09:26:42
标签: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>
效果图:
来源:https://blog.csdn.net/fanfan_h/article/details/90449409
0
投稿
猜你喜欢
- 例如<div id="info"><span><span class='pl
- CSS文件的链接方式·附加链接:外部CSS文件·导入CSS:常用应用多个CSS文件时,将多个CSS导入一个CSS文件中CSS规则定义有三种:
- asp fso type属性取得文件类型代码是用来返回类型指定的文件或文件夹。语法FileObject.Type FolderObject.
- INI介绍INI是英文“初始化”(initialization)的缩写,被用来对操作系统或特定程序初
- 前言本文主要给大家介绍了关于Python中序列的修改、散列与切片的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。
- 场景:按下按钮,将左边的下拉选框内容发送给后端,后端再将返回的结果传给前端显示。按下按钮之前:按下按钮之后:代码结构这是flask默认的框架
- 本文实例讲述了Codeigniter发送邮件的方法。分享给大家供大家参考。具体分析如下:Codeigniter的邮件发送支持一下特性:Mul
- 本文实例讲述了Django基于ORM操作数据库的方法。分享给大家供大家参考,具体如下:1、配置数据库vim settings #HelloW
- 在上一篇Python接口自动化测试系列文章:Python接口自动化浅析logging日志原理及模块操作流程,主要介绍日志相关概念及loggi
- SQL SERVER 2012中新增了CHOOSE,该函数可以从值列表返回指定索引处的项。例如:select CHOOSE(3,'A
- 一、前言点关注不迷路,持续输出Unity干货文章。嗨,大家好,我是新发。2014年的某一天,我因为牙疼去看了牙医,是个小诊所,牙医告诉我有个
- 开门见山,直接以例子介绍: 代码如下:CREATE TABLE [dbo].[course]( [id] [int] NULL,
- 1、epochKeras官方文档中给出的解释是:“简单说,epochs指的就是训练过程接中数据将被“轮”多少次”(1)释义:训练过程中当一个
- 在linux安装mysql是一个困难的事情,yum安装一般是安装的mysql5.1,现在经过自己不懈努力终于能用yum安装mysql5.5了
- 网页设计是由很多个不同的元素构成的,而这些元素的重要性都不同,并且有些元素还需要尤为的突出.有些元素彼此之间存在着联系,而另外的元素之间则一
- 本文实例讲述了Python实现对字符串的加密解密方法。分享给大家供大家参考,具体如下:需求是是要将密码存在数据库里,所以要加密解密是可逆的,
- 问题现在有多个字典或者映射,你想将它们从逻辑上合并为一个单一的映射后执行某些操作,比如查找值或者检查某些键是否存在。解决方案加入你有如下两个
- 你的主页或者你管理的网站有各种密码需要保护,把密码直接放在数据库或者文件中存在不少安全隐患,所以密码加密后存储是最常见的做法。在ASP.NE
- 自带验证器1、UniqueValidator用于验证(唯一)unique=True的字段,常用参数:queryset: required,用
- !important;严格来说,!important;应该不能算作是一种hack技术,被应用了!important;的属性将在IE中无效,对