学习笔记之javascript编写简单计算器
感觉自己的的实力真的是有待提高，在编写计算器的过程中，出现了各种各样的问题，暴露了自己的基础不扎实，逻辑思维能力不够，学得知识不能运用到自己的demo中区。先介绍一些这个这个计算器的整体思路。大致分为三部分，首先是用户点击数字或者点的事件，如果点击的是数字，则直接加到显示屏上就好，如果用户点击的是点的话，组要慢组两个条件，一个是，点不能重复，二是内容为空的时候，需要在小数点前面加上零。然后是用户点击清空或者删除的事件，清空事件就是把所有的内容都清空，而删除事件则是把内容一个一个的删除。点击一次只删除一个字符串。然后就是用户点击加减乘除的事件了，如果用户点击的是运算符号，需要注意如果用户连续点击同一个运算符，则只能显示一个，可以用数组的splice方法来代替前面的那个符号。最后一步就是用户点击等于号的事件了，等于号被触发的时候，首先需要遍历循环存储内容的数组，把定义一个记录运算符号出现次数的变量，封装一个函数，用递归实现。答题的思路就是这个样子，具体的实现看代码。
在编写过程中，首先发现字符串的截取的位置我没注意，再次我又温习了一遍。
其次是获取元素出现了问题。
然后就是不能及时想到用递归来运算，自己用了好多的办法，发现都有漏洞，虽然浪费了好多时间，但是布的不说我学到了很多东西，程序不对就再改，没什么过不去的，只要坚持，熬过这段时间，future会很feature。（计算器还有bug，希望各位大佬们能帮忙完善一下哈）。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table {
border-collapse: collapse;
margin: auto auto;
} td {
width: 150px;
line-height: 70px;
} .btn,.btn1 {
width: 150px;
line-height: 70px;
font-size: x-large;
background-color: seagreen;
opacity: 0.8;
} .btn_click {
width: 302px;
line-height: 70px;
font-size: x-large;
background-color: salmon;
} .txt {
background-color: azure;
width: 600px;
line-height: 100px;
font-size: x-large;
text-align: right;
} .btn:active {
box-shadow: 0 0 5px 5px green;
} .btn:hover {
cursor: pointer;
} .btn_click:hover {
cursor: pointer;
}
</style>
</head> <body>
<table>
<tr>
<td colspan="4"><input class="txt" type="text" disabled /></td>
</tr>
<tr>
<td colspan="2"><input class="btn_click" type="button" value="AC" /></td>
<td colspan="2"><input class="btn_click" type="button" value="DEL" /></td>
</tr>
<tr>
<td><input class="btn" type="button" value="7" /></td>
<td><input class="btn" type="button" value="8" /></td>
<td><input class="btn" type="button" value="9" /></td>
<td><input class="btn" type="button" value="*" /></td> </tr>
<tr>
<td><input class="btn" type="button" value="4" /></td>
<td><input class="btn" type="button" value="5" /></td>
<td><input class="btn" type="button" value="6" /></td>
<td><input class="btn" type="button" value="/" /></td> </tr>
<tr>
<td><input class="btn" type="button" value="1" /></td>
<td><input class="btn" type="button" value="2" /></td>
<td><input class="btn" type="button" value="3" /></td>
<td><input class="btn" type="button" value="-" /></td> </tr>
<tr>
<td><input class="btn" type="button" value="0" /></td>
<td><input class="btn" type="button" value="." /></td>
<td><input class="btn" type="button" value="+" /></td>
<td><input class="btn1" type="button" value="=" /></td> </tr> </table>
<script>
//只能实现两位数的加减法！
window.onload = function () {
var arr = [];
var str = "";
var a=0;
var arr1=[];
var str1 = "";
var str2 = "";
var arr2 = [];
//首先把值放到txt中。
var btn = document.getElementsByClassName("btn");//这是除了删除之外的按钮
var txt = document.getElementsByClassName("txt")[0];//文本内容
var anniu = document.getElementsByClassName("btn_click");
// console.log(anniu);
//循环遍历
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function () {
if (!isNaN(this.value)||this.value==".") {//当前值是值或者数字
if(this.value=="."){//当前值是点
if(txt.value==""){//点前面没有值
txt.value="0"+this.value;
arr.push(this.value);
}else{//前面有值 判断前面有没有点，有点就不在添加。没有添加
if(txt.value.indexOf(".")==-1){//当前值不存在
txt.value=txt.value+this.value;
arr.push(this.value);
} }
}else{
txt.value+=this.value;
arr.push(this.value);
}
}
else {//加减乘除
console.log("以前的值:"+arr);
if(this.value==arr[arr.length-1]){
console.log("最后一个元素:"+arr[arr.length-1]);
arr=arr.splice(arr.length-1,1,this.value);
console.log("替换过后的arr："+arr);
txt.value=txt.value; }else{
txt.value=txt.value+this.value;
arr.push(this.value);
}
// txt.value = txt.value + this.value;
// arr.push(this.value);
// if(this.value==arr[arr.length]){ // }
}
}
}
function fn(str){
let count=0;
for (var i = 0; i < str.length; i++) {
if (str[i] == "+" || str[i] == "-" || str[i] == "*" ||str[i] == "/") {
count++;
if(count==2){
str1=str.slice(0,i);
str=work(str1)+str.slice(i);
count=0;
return fn(str);//最后两个数
}
}
}
//24+3
console.log("最后的:"+str); return work(str);
} document.getElementsByClassName("btn1")[0].onclick = function(){
str=arr.join('');
txt.value=fn(str);
}; function work(str1) { for (var j = 0; j < str1.length; j++) {
if (str1[j] == "+") {//加号左右的两个字符串加起来。变成一个新字符串。
a=parseFloat(str1.slice(0,j));
console.log("a:"+a);
b=parseFloat(str1.slice(j+1));
console.log("a:"+b);
sum=a+b;
console.log("和:"+sum);
return sum;
}
if (str1[j] == "-") {//加号左右的两个字符串加起来。变成一个新字符串。
a=parseFloat(str1.slice(0,j)); console.log("a:"+a);
b=parseFloat(str1.slice(j+1));
console.log("a:"+b);
sum=a-b;
console.log("和:"+sum);
return sum;
}
if (str1[j] == "*") {//加号左右的两个字符串加起来。变成一个新字符串。
a=parseFloat(str1.slice(0,j)); console.log("a:"+a);
b=parseFloat(str1.slice(j+1));
console.log("a:"+b);
sum=a*b;
console.log("和:"+sum);
return sum;
}
if (str1[j] == "/") {//加号左右的两个字符串加起来。变成一个新字符串。
a=parseFloat(str1.slice(0,j)); console.log("a:"+a);
b=parseFloat(str1.slice(j+1));
console.log("a:"+b);
sum=a/b;
console.log("和:"+sum);
return sum;
}
}
}
//cishi 此时按下的是清空或者删除键
for (var j = 0; j < anniu.length; j++) {
anniu[j].onclick = function () {
if (this.value == "AC") {//把所有东西都清空 是this不是
txt.value = "";
arr = [];
} else {//按下的是删除键，如果是删除键，就把前一个数或者符号删除
//可以截取字符串，然后在重新加到【屏幕上 substr \
txt.value = txt.value.substr(0, txt.value.length - 1);
}
}
}
} </script>
</body> </html>
学习笔记之javascript编写简单计算器的更多相关文章
- seaJs学习笔记之javascript的依赖问题
之前分别为大家介绍了有关javascript中的冲突和性能问题,今天为大家介绍一下有关javascript中的依赖问题.我们将继续就之前javascript中性能问题继续介绍. 先来回顾一下性能问题的 ...
- [转载]SharePoint 2013搜索学习笔记之搜索构架简单概述
Sharepoint搜索引擎主要由6种组件构成,他们分别是爬网组件,内容处理组件,分析处理组件,索引组件,查询处理组件,搜索管理组件.可以将这6种组件分别部署到Sharepoint场内的多个服务器上, ...
- RX学习笔记：JavaScript数组操作
RX学习笔记:JavaScript数组操作 2016-07-03 增删元素 unshift() 在数组开关添加元素 array.unshift("value"); array.un ...
- OGG学习笔记03-单向复制简单故障处理
OGG学习笔记03-单向复制简单故障处理 环境:参考:OGG学习笔记02-单向复制配置实例 实验目的:了解OGG简单故障的基本处理思路. 1. 故障现象 故障现象:启动OGG源端的extract进程, ...
- AM335x(TQ335x)学习笔记——触摸屏驱动编写
前面几篇文章已经通过配置DTS的方式完成了多个驱动的移植,接下来我们解决TQ335x的触摸驱动问题.由于种种原因,TQ335x的触摸屏驱动是以模块方式提供的,且Linux官方内核中也没有带该触摸屏的驱 ...
- QML学习笔记（六）- 简单计时器和定时器
做一个简单的qml计时器和定时器,左键触发计时,右键触发定时 GitHub:八至 作者:狐狸家的鱼 本文链接:QML学习笔记(六)- 简单计时器和定时器 左键点击按钮,触发计时器,中键可以暂停计时,同 ...
- 学习笔记：Javascript 变量 包装对象
学习笔记:Javascript 变量 包装对象 如下代码,可以输出字符的长度. var str = "Tony"; str.length; 这时再试试以下代码,返回是 undefi ...
- 【学习笔记】JavaScript的基础学习
[学习笔记]JavaScript的基础学习 一 变量 1 变量命名规则 Camel 标记法 首字母是小写的,接下来的字母都以大写字符开头.例如: var myTestValue = 0, mySeco ...
- 微信小程序开发：学习笔记[5]——JavaScript脚本
微信小程序开发:学习笔记[5]——JavaScript脚本 快速开始 介绍 小程序的主要开发语言是 JavaScript ,开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来 ...
随机推荐
- 无法导入要素类到SDE中
我遇到的原因的表空间不足(并且表空间没有设置为自动增长) 首先通过SELECT FILE_NAME, TABLESPACE_NAME, AUTOEXTENSIBLE FROM DBA_DATA_FIL ...
- Centos6 日常使用小结
网络配置目录 1./etc/sysconfig/network-script/ifcfg-eth0 2.netstat -rn Kernel IP routing table Destination ...
- Kafka 学习笔记之 Consumer API
Kafka提供了两种Consumer API High Level Consumer API Low Level Consumer API(Kafka诡异的称之为Simple Consumer API ...
- 软件开发工具（第12章： CVS的安装及使用）
一.CVS介绍 并发版本系统(Concurrent Versions System——CVS)是一个常用 的代码版本控制系统. 使用CVS可以对代码进行集中管理,记录代码所有的更改历史,提供 协作开发 ...
- python语言程序设计基础（嵩天）第三章课后习题部分个人练习
p69: *题3.5: 源代码: (1)print(30-3**2+8//3**2*10) 答案:21 (2)print(3*4**2/8%5) 答案:1.0 (3)print(2** ...
- Zabbix监控方案-官方最新4.4版本
Zabbix 2019/10/12 Chenxin 参考 https://www.zabbix.com/documentation/4.0/zh/manual https://baike.baidu. ...
- Android4.4 RIL软件框架
本文主要对android4.4 RIL的telephony与modem的命令交互流程进行分析,当然本文不是重点介绍telephony.telephony涉及具体业务逻辑内容比较多,包括sim.dail ...
- JVM之内存结构详解
对于开发人员来说,如果不了解Java的JVM,那真的是很难写得一手好代码,很难查得一手好bug.同时,JVM也是面试环节的中重灾区.今天开始,<JVM详解>系列开启,带大家深入了解JVM相 ...
- 算法学习之剑指offer（十）
一 题目描述 请实现一个函数用来判断字符串是否表示数值(包括整数和小数).例如,字符串"+100","5e2","-123","3 ...
- ssh隧道代理连接
0x00 什么是SSH隧道 场景: 假设有两台主机: A主机为外网,B主机为内网通常来说外网主机A是无法直接连接到内网主机B的,这时如果要实现A主机通过ssh控制B主机,通常来说有两种方法: 1.端口 ...