JS题：简易个人美化计算器设计，扩展重命名的方法 ，表格的移入换行变色【诗书画唱】
作业:
计算器
（题示：做一个加法的运算时，点击+号出现的操作：
清空掉文本框中的内容
点击=号:计算第一次的内容和当前文本框里的内容的和
若-号得到不了，就声明一个变量用来储存符号
点击删除的时候去除最后一位数，使用String的字符串截取方法
截取字符串前面的位数，去掉最后一位，赋值给文本框
内容清空后应该剩余一个0，判断字符串的长度是不是等于1，如果大于1的时候正常截取，如果小于等于1（比如-1）的时候就让文本框的内容为0)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#all{
margin: 0px auto; width: 200px; height: 300px;
border: 1px solid red;background-color: black;}
#wenBenKuang{
width: 170px; height: 40px;line-height: 40px;
text-align: center;margin: 0px auto;margin-top: 20px;
border: 1px solid red;
}
#anNiuID{
width: 170px;margin: 0px auto;border:
1px solid blue; margin-top: 10px;
}
#anNiuID input {
width: 27px; height: 27px;
margin:5px;
/*text-align: center;*/
}
#wenBenKuang input{
height: 25px;width: 150px;text-align: right;
padding-right: 10px;
}
</style>
<script>
window. onload=function(){
var wenBenWenZi=document . getElementById("wenBenWenZiID")
var anNiu=document . getElementById("anNiuID");
//Tag:标签(比如input)
var allAnNiu=anNiu . getElementsByTagName("input");
var firstWenBenWenZi,fuHao;
for(var i of allAnNiu){
i.onclick=function(){
//alert(this .value);
// inner 内部
//这里的value：文本框中的值
if(!isNaN(this .value)){
wenBenWenZi. value= (Number(wenBenWenZi.
value+this . value))*1;
}
else
{
switch(this.value){
//case "+":
//diyici=txt1.value;
//
//wenBenWenZi. value="0";
//fh="+"
//break;
//
//case "-":
//diyici=txt1.value;
//
//wenBenWenZi. value="0";
//fh="-"
//break;
//case "*":
//diyici=txt1.value;
//
//wenBenWenZi. value="0";
//fh="*"
//break;
//
//case "/":
//diyici=txt1.value;
//
//wenBenWenZi. value="0";
//fh="/"
//break;
case "+":
case "-":
case "*":
case "/":
firstWenBenWenZi=wenBenWenZi.value;
wenBenWenZi.value="0";
fuHao=this. value;
break;
case "c":
wenBenWenZi. value="0" ;break;
case "←":
wenBenWenZi. value=wenBenWenZi. value . length>1?wenBenWenZi.
value . substr(0, wenBenWenZi. value. length-1):"0" ;break;
//+/-即±，表示-1，+1等
case "+/-":
//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
//
//如果没有找到匹配的字符串则返回 -1。
//
//注意： indexOf() 方法区分大小写。
wenBenWenZi.value=wenBenWenZi. value. indexOf("-")==-1?"-"
//substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
//
//语法
//stringObject.substr(start,length)
//参数 描述
//start 必需。要抽取的子串的起始下标。必须是数值。如果是负数，
//那么该参数声明从字符串的尾部开始算起的位置。
//也就是说，-1 指字符串中最后一个字符，-2指倒数第二个字符，以此类推。
//length 可选。子串中的字符数。必须是数值。如果省略了该参数，
//那么返回从 stringObject 的开始位置到结尾的字串。
+wenBenWenZi.value :wenBenWenZi.value .substr(1);break;
//-1表示用indexOf没找到要找的字符,1表示用indexOf找到要找的字符
case ".":
wenBenWenZi. value=wenBenWenZi. value. indexOf(".")==-1?
wenBenWenZi. value+".": wenBenWenZi. value; break;
case "=":
var secondWenBenWenZi=wenBenWenZi. value;
switch(fuHao){
case "+":
//下面的一行代码编译器会默认以为两个变量是字符串，进而自动字符串拼接操作
//为防止这种情况就用Number转型为数字进行计算
wenBenWenZi.value=Number(firstWenBenWenZi)+Number(secondWenBenWenZi)
break;
case "-":
var jieguo=Number(firstWenBenWenZi)-Number(secondWenBenWenZi);
wenBenWenZi. value=jieguo;break;
break;
case "*":
wenBenWenZi.value=Number(firstWenBenWenZi)*Number(secondWenBenWenZi)
break;
case "/":
wenBenWenZi.value=Number(firstWenBenWenZi)/Number(secondWenBenWenZi)
break;}break;
}
}
}
}
}
//注释的都是因为代码多等原因而非最佳方案的弃用的方法
//function dianJi(chuanZhi){
//用getElementById获取文本框：
//var wenBenWenZi=document . getElementById("wenBenWenZiID");
//用. value获取按钮的值：
//var anniu=chuanZhi. value;
//wenBenWenZi.value=anniu;}
</script>
</head>
<body>
<div id="all">
<div id="wenBenKuang">
<!--disabled：有残疾的-->
<!--disabled="disabled" -->
<!--disabled 选择器匹配每个禁用的的元素（主要用于表单元素）。-->
<!-- readonly：只读的-->
<!-- disabledreadonly和两个属性都可以作用于input等表单元素上，
都使得元素成为“不可用”的状态
readonly表示“只读”，一般表示对于文字内容只读，即不可更改内容，
对于非文字的表单“只读”与“不只读”似乎没有啥区别；
disabled表示“使残废，使无效”，都残废了，那还管你有没有文字内容，都得残掉。
-->
<input type="text" readonly=" readonly" value="0"id="wenBenWenZiID" />
</div>
<div id="anNiuID">
<input type= "button" value="c" />
<input type="button" value="←" />
<input type="button" value="+/-" />
<input type="button" value="+" />
<input type="button" value="1" />
<!--onclick="dianJi(this)"-->
<input type="button" value="2" />
<input type="button" value="3" />
<input type="button" value="-" />
<input type="button" value="4" />
<input type="button" value="5" />
<input type="button" value="6" />
<input type="button" value="*" />
<input type="button" value="7" />
<input type= "button" value="8" />
<input type= "button" value="9" />
<input type="button" value="/" />
<input type="button" value="0" />
<input type="button" value="." />
<input type="button" value="=" />
<!--“ms”存储显示的数字。“mr”再次调用存储的数字。
“m+”将当前显示的数与存储区中的数相加，
结果存入存储器 “mc”用于清除存储区中的数值-->
<input type="button" value="m" />
</div>
</div>
</body>
</html>
2.表格的移入换行（效果：鼠标移出每个tr的时候添加移出事件，将移出的tr的背景颜色改为原来的背景颜色）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
table{
width: 400px;height: 100px;margin: 0px auto;text-align: center;}
tr{
background-color:gray}
</style>
<script>
window. onload=function(){
//id选择器:document.getE lementById("ID的名称")
//标签选择器:document . getElementsByTagName("标签的名称")
//标签选择器:会获取页面上所有的执行标签,得到的内容是一个数组，
//可以通过下标去访问每个标签
var trShuZuVar=document . getElementsByTagName("tr");//tr的一个数组
//遍历每个tr，给每个tr赋值事件
for(var xiaBiao of trShuZuVar){
//给每个tr添加一个鼠标移入的事件
xiaBiao . onmouseover=function(){
//用this. style . backgroundColor改变当前的tr的背景颜色
this. style . backgroundColor="red";
}
xiaBiao. onmouseout=function(){
this. style . backgroundColor="gray";
}}
}
</script>
</head>
<body>
<table border="1px" cellspacing="0px">
<tr>
<td>诗</td>
<td>书</td>
<td>画</td>
<td>唱</td>
</tr>
<tr>
<td>赞</td>
<td>赞</td>
<td>赞</td>
<td>赞</td>
</tr>
<tr>
<td>币</td>
<td>币</td>
<td>币</td>
<td>币</td>
</tr>
<tr>
<td>藏</td>
<td>藏</td>
<td>藏</td>
<td>藏</td>
</tr>
</table>
</body>
</html>
