学习笔记之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 来 ...
随机推荐
- 分库分表(2) --- ShardingSphere(理论)
ShardingSphere---理论 ShardingSphere在中小企业需要分库分表的时候用的会比较多,因为它维护成本低,不需要额外增派人手;而且目前社区也还一直在开发和维护,还算是比较活跃. ...
- 【IE低配杀手】html5shiv.js和respond.min.js
HTML5现在越来越流行了,但是一遇到IE低版本浏览器就傻眼了,今天整理了一下一些解决办法. html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题. res ...
- MongoDB 学习笔记之 WriteConcern
WriteConcern: 转载:MongoDB WriteConcern(写关注)机制 http://www.ywnds.com/?p=3688&viewuser=40 MongoDB部署模 ...
- Drill 学习笔记之 入门体验
简介: Apache Drill是一个低延迟的分布式海量数据(涵盖结构化.半结构化以及嵌套数据)交互式查询引擎.分布式.无模式(schema-free) 是Google Dremel的开源实现,本质是 ...
- shell命令大全笔记
## -print 将匹配的文件输出到标准输出## -exec 将匹配的文件执行该参数所给出的shell命令## -ok 将匹配的文件执行该参数所给出的shell命令,每次执行命令有提示 #----- ...
- IoC 之加载 Bean：总结
上文中我们将bean已经加载到了IOC容器中,接下来我们将把IOC加载Bean出来进行代码解析 备注:(有些解释是参考别个博客的相关解释 )一起探讨请加我QQ:1051980588 bean 的初始化 ...
- Spring 源码阅读 一
终于,有一天我也来看Spring的源码了,看了一阵之后感觉心情那叫一个舒畅,对Spring底层的实现也有了进一步的了解, 最直观的感受就是Spring的命名风格很赞,很长,真的长到使人见名知意, 闲言 ...
- python 学习之 基础篇一 python及pycharm的安装
一. Python 环境搭建(安装请参照https://www.runoob.com/python/python-install.html) Python下载 Python官网:https://www ...
- 《java编程思想》P160-P180（第八章部分+第九章部分）
1.什么是多态? 多态的定义:指允许不同类的对象对同一消息做出响应.即同一消息可以根据发送对象的不同而采用多种不同的行为方式.(发送消息就是函数调用) 现实中,关于多态的例子不胜枚举.比方说按下 F1 ...
- 用阿里官网提供的plupload oss的web直传，视频上传进行前端验证它的时长，尺寸，大小等。替换上一个不需要的单个视频
accessid = '' accesskey = '' host = '' policyBase64 = '' signature = '' callbackbody = '' filename = ...