学习笔记之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 来 ...
随机推荐
- S2-052 漏洞复现
Structs2框架已知的漏洞编号如下: S2-005 S2-009 S2-016 (含S2-013) S2-019 S2-020 S2-021 S2-032 S2-037(含S2-033) DevM ...
- SpringBootSecurity学习（14）前后端分离版之 OAuth2.0介绍
登录总结 前面基本介绍了security的常规用法,同时介绍了JWT和它的一个简单实现,基本上开发中遇到的登录问题都能解决了,即使在分布式开发,或者微服务开发中实现登录也基本没有问题了.securit ...
- Git基础概念与Flow流程介绍
目录 Git相关 基本概念 常见客户端 TortoiseGit Sourcetree Intellij Idea 命令行 常用命令 存储区域 命令之 add & commit &pus ...
- kotlin -- 可见性修饰符
puiblic Kotlin的可见修饰符与Java类似,但是默认可见性不同,Java默认包私有,kotlin默认public ### internal internal 只在模块内部可见.一个模块就是 ...
- Laravel Entrust 权限管理扩展包的使用笔记
简介 Entrust 是一个简洁而灵活的基于角色进行权限管理的 Laravel 扩展包.针对 Laravel 5,官方推荐的安装版本是 5.2.x-dev.它的详细使用方法请查看 Entrust Gi ...
- 基于公共子序列的轨迹聚类(c#)
前言 如今的世界中,想要研究人们的出行活动,可以利用智能手机或智能手环等个人设备生成的 GPS 数据进行研究.而在众多的研究方向中,出行的热点路线或者说经常出行的路线也比较受欢迎.采用热力图的方式对其 ...
- Swoole4-swoole创建Mysql连接池
一 .什么是mysql连接池 场景:每秒同时有1000个并发,但是这个mysql同时只能处理400个连接,mysql会宕机. 解决方案:连接池,这个连接池建立了200个和mysql的连接,这1000个 ...
- 如何去除CFormView的Scrollbar
第一种方法: 重载 OnSize(UINT nType, int cx, int cy) 在CFormView::OnSize(nType, cx, cy)下面添加一句 ShowScrollBar(S ...
- 索引的底层实现（B 树）
一.B 树 1.B-Tree介绍 B-树的搜索,从根结点开始,对结点内的关键字(有序)序列进行二分查找,如果命中则结束,否则进入查询关键字所属范围的儿子结点:重复,直到所对应的儿子指针为空,或已经是叶 ...
- 10月27日Java整理
实验一:凯撒密码 import java.util.Scanner; //zhanxinwu,October,25,2016 public class Addmi { public static vo ...