js实现计算器
效果
代码
<html>
<head lang="en">
<meta charset="UTF-8">
<title>计算器title>
<style>
*{
padding: 0;
margin: 0;
}
table {
width: 400px;
height: 450px;
margin: 10px auto;
border-collapse: collapse;
}
td {
width: 100px;
height: 75px;
}
td>input{
width: 100%;
height: 75px;
outline: none;
font-size: 24px;
}
.result {
border: none;
text-align: right;
font-size: 34px;
}
style>
head>
<body>
<table>
<tr >
<td colspan="4"><input type="text" disabled value="0" class="result"/>td>
tr>
<tr >
<td colspan="2"><input type="button" value="del" class="btn"/>td>
<td colspan="2"><input type="button" value="c" class="btn"/>td>
tr>
<tr>
<td><input type="button" value="7" class="btn"/>td>
<td><input type="button" value="8" class="btn"/>td>
<td><input type="button" value="9" class="btn"/>td>
<td><input type="button" value="+" class="btn"/>td>
tr>
<tr>
<td><input type="button" value="5" class="btn"/>td>
<td><input type="button" value="6" class="btn"/>td>
<td><input type="button" value="7" class="btn"/>td>
<td><input type="button" value="-" class="btn"/>td>
tr>
<tr>
<td><input type="button" value="1" class="btn"/>td>
<td><input type="button" value="2" class="btn"/>td>
<td><input type="button" value="3" class="btn"/>td>
<td><input type="button" value="0" class="btn"/>td>
tr>
<tr>
<td><input type="button" value="*" class="btn"/>td>
<td><input type="button" value="/" class="btn"/>td>
<td><input type="button" value="." class="btn"/>td>
<td><input type="button" value="=" class="btn"/>td>
tr>
table>
<script>
var x;
var isnumber=true;
var result=document.getElementsByClassName("result")[0];
var btn=document.querySelectorAll(".btn");
var number=[];//定义数组
//输入的是数字或者小数点
//如果是0，下一个是小数点，则为0.
for(var i=0;i<=btn.length;i++){
btn[i].onclick=function (){
isnumber=true;
if(!isNaN(this.value)||this.value=="."){
if(result.value==="0"){
if(this.value=="."){
result.value="0"+this.value;
}
else{
result.value=this.value;
}
}
else {
if(x!=="="){
if(result.value.indexOf(".")==-1||this.value!="."){
result.value+=this.value;
}
}
else
{
result.value=this.value;
x="";
}
}
}
else {
switch(this.value){
case "+":
showNumber("+");
break;
case "-":
showNumber("-");
break;
case "*":
showNumber("*");
break;
case "/":
showNumber("/");
break;
case "=":
// 存入结果，方便下一次运算
number[number.length]=result.value;
// eval解析字符串进行运算
result.value = eval(number.join(" "));//eval!!
console.log(number);
//把结果作为数组第0个元素，进行新一轮运算
// 等号未存入数组，当开始新一轮运算时，eval无法解析，无法运算,所以需要置空
number = [];
x="=";
break;
case "c":
number=[];
result.value="0";
break;
case "del":
//substr 字符串的截取 index length
result.value = result.value.length > 1 ? result.value.substr(0, result.value.length - 1) : 0;
break;
}
}
}
}
function showNumber(str){
if(isnumber){
//存入屏幕的值
number[number.length]=result.value;
//存入运算符号
number[number.length]=str;
//输入运算符后，屏幕为0，重新输入
result.value="0";
isnumber=false;}
else {
// 如果不是数字，进入符号运算区，因为上一个是符号，此次又是符号，即非数字，进入else循环
number[number.length-1]=str;
}
}
总结
一、搭建基本框架时
1、合并行、列,这个是td的属性，应该写在td标签中！！！
合并列：colspan=“2”;
合并行：rowspan=“3”;
2、合并边框线 这个是在table中设置的属性
仅设置边框
（1）行内样式设置 边框线会加粗
//只能在行内样式设置
（2）在table中添加属性,可以避免上述情况
border-collapse:collapse;//table三种样式设置方法都可以 相邻边合并
border-collapse:separate;//默认值，边框独立
<style>
table {
border: solid 1px red;
width: 300px;
height: 400px;
margin: auto;
border-collapse:collapse;
}
td{
border: solid 1px black;
}
style>
3、outline 轮廓
outline：0；//无轮廓 颜色、样式、宽度
二、编写js代码时
整体思路
（1）获取dom元素
（2）操作dom
a.number[]数组，将运算的数值、运算符号，记录在数组中，通过使用 eval() 函数解析字符串，进行运算
语法
eval(string)
参数
string
描述
必需。要计算的字符串，其中含有要计算的 JavaScript 表达式或要执行的语句。
返回值
通过计算 string 得到的值（如果有的话）。
如果传递给 eval() 的 Javascript 代码生成了一个异常，eval() 将把该异常传递给调用者。
说明
该方法只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回。因此请不要为 eval() 函数传递 String 对象来作为参数。
如果试图覆盖 eval 属性或把 eval() 方法赋予另一个属性，并通过该属性调用它，则 ECMAScript 实现允许抛出一个 EvalError 异常。
抛出
如果参数中没有合法的表达式和语句，则抛出 SyntaxError 异常。
如果非法调用 eval()，则抛出 EvalError 异常。
b.shownumber()函数解析
isnumber 判断当前变量是否为数字，一个标记值，一个判断条件，
应该放在btn.click=function()中，当输入运算符号后，isnumber为false，当下一个值为数字时，继续进行运算，
如果是运算符，因为上一个也是运算符，发生错误，正常来讲，无法运算，所以将当前运算符作为式子的运算符
例如：2++ -9=-7
c.数组中并未保存运算的结果，所以需要将结果保存在数组中，才能继续运算number[number.length]=result.value;
d.
`result.value = eval(number.**join(" ")**);//join() `
定义和用法
join() 方法用于把数组中的所有元素放入一个字符串。
元素是通过指定的分隔符进行分隔的。
语法
arrayObject.join(separator)；
参数
描述
separator
可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
返回值
返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入 separator 字符串而生成的。
e.substr 字符串的截取 index length 删除操作
result.value = result.value.length > 1 ? result.value.substr(0, result.value.length - 1) : 0;
substr()
定义和用法
substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
语法
stringObject.substr(start,length)
参数
描述
start
必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
length
可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。
返回值
一个新的字符串，包含从 stringObject 的 start（包括 start 所指的字符） 处开始的 length 个字符。如果没有指定 length，那么返回的字符串包含从 start 到 stringObject 的结尾的字符。
提示和注释
注释：substr() 的参数指定的是子串的开始位置和长度，因此它可以替代 substring() 和 slice() 来使用。
重要事项：ECMAscript 没有对该方法进行标准化，因此反对使用它。
重要事项：在 IE 4 中，参数 start 的值无效。在这个 BUG 中，start 规定的是第 0 个字符的位置。在之后的版本中，此 BUG 已被修正。
substring()
定义和用法
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
语法
stringObject.substring(start,stop)；
参数
描述
start
必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
stop
可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾
返回值
一个新的字符串，该字符串值包含 stringObject 的一个子字符串，其内容是从 start 处到 stop-1 处的所有字符，其长度为 stop 减 start。
说明
substring() 方法返回的子串包括 start 处的字符，但不包括 stop 处的字符。
如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。
slice()
定义和用法
slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
语法
stringObject.slice(start,end);
参数
描述
start
要抽取的片断的起始下标。如果是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推。
end
紧接着要抽取的片段的结尾的下标。若未指定此参数，则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。
返回值
一个新的字符串。包括字符串 stringObject 从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符。
说明
String 对象的方法 slice()、substring() 和 substr() （不建议使用）都可返回字符串的指定部分。slice() 比 substring() 要灵活一些，因为它允许使用负数作为参数。slice() 与 substr() 有所不同，因为它用两个字符的位置来指定子串，而 substr() 则用字符位置和长度来指定子串。
还要注意的是，String.slice() 与 Array.slice() 相似。
f.因为html中的button中的值都设置在了value中，所以获取他们的值的时候，应该是btn.value而不是btn.innerHTML
g.innerHTML 可以自动解析字符串中的标签
innerTEXT 仅显示文本，所以会将其中的标签也显示出来
h.result.value.indexOf(".")==-1 value值
定义和用法
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
语法
stringObject.indexOf(searchvalue,fromindex)；
参数
描述
searchvalue
必需。规定需检索的字符串值。
fromindex
可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。
说明
该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头（没有指定 fromindex 时）。如果找到一个 searchvalue，则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
提示和注释
注释：indexOf() 方法对大小写敏感！
注释：如果要检索的字符串值没有出现，则该方法返回 -1。
k.x 等号 下一次的运算
三、注释
style中 /* */
script中 //
html中
你可能感兴趣的:(javascript)