学习笔记之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 来 ...
随机推荐
- 一个PHP文件搞定微信H5支付
/ 更新于 2018-07-02 / 8 条评论 过年期间也坚持要撸码啊接着给博客除草,在这个小除夕是情人节的一天,祝大家新年快乐,情人节能够顺利脱单~~~ 回归正题,这篇文章介绍一下微信H5支付, ...
- 品Spring：对@Resource注解的处理方法
@Resource是Java的注解,表示一个资源,它具有双向的含义,一个是从外部获取一个资源,一个是向外部提供一个资源. 这其实就对应于Spring的注入和注册.当它用在字段和方法上时,表示前者.当它 ...
- Vue/React圆环进度条
数据展示,一直是各行各业乐此不疲的需求,具体到前端开发行业,则是各种各种图表数据展示,各种表格数据展示,烦不胜烦(繁不胜繁)! 前几天刚做了折线图.柱状图.饼状图之类的图表数据展示效果,今天又碰到了类 ...
- 从0开始学FreeRTOS-(消息队列)-5
## 问题解答 曾经有人问我,FreeRTOS那么多API,到底怎么记住呢? 我想说,其实API不难记,就是有点难找,因为FreeRTOS的API很多都是带参宏,所以跳来跳去的比较麻烦,而且注释也很多 ...
- iOS性能优化-预排版
参考地址:https://blog.ibireme.com/2015/11/12/smooth_user_interfaces_for_ios/ 前面一篇说了异步绘制文字,异步渲染图片,这篇主要是预排 ...
- C# 常见面试问题汇总
1.c#垃圾回收机制 从以下方面入手展开: 1.压缩合并算法 2.代的机制 3.GC调用终结器 Garbage Collector . NET采用了和Java类似的方法由CLR(Common ...
- django开发中关于外键设置
django开发中关于外键设置 我们建模型的时候会用到ForeignKey 而由于外键的约数会导致一些保存 所有我们ctrl+左键进入源码 源码 def __init__(self, to, on_d ...
- .NET北京俱乐部，技术的饕餮盛宴，不枉此行
在19年年尾,我们相约于.NET北京俱乐部 DNT精英论坛暨.NET北京俱乐部是由资深.NET专家和社区活跃分子发起的技术论坛,以“分享.成长.合作.共赢”为原则,致力于打造一个领先的技术分享平台和成 ...
- Qt5教程: (7) 模态/非模态对话框
模态对话框就是在其没有被关闭之前,用户不能与同一个应用程序的其他窗口进行交互,直到该对话框关闭. 非模态对话框就是在被打开时,用户既可选择和该对话框进行交互,也可以选择同应用程序的其他窗口交互. 1. ...
- (未完)XSS漏洞实战靶场笔记
记录下自己写的XSS靶场的write up,也是学习了常见xss漏洞类型的实战场景