JS題：簡易個人美化計算器設(shè)計，擴(kuò)展重命名的方法 ，表格的移入換行變色【詩書畫唱】
作業(yè):
計算器
（題示：做一個加法的運算時，點擊+號出現(xiàn)的操作：
清空掉文本框中的內(nèi)容
點擊=號:計算第一次的內(nèi)容和當(dāng)前文本框里的內(nèi)容的和
若-號得到不了，就聲明一個變量用來儲存符號
點擊刪除的時候去除最后一位數(shù)，使用String的字符串截取方法
截取字符串前面的位數(shù)，去掉最后一位，賦值給文本框
內(nèi)容清空后應(yīng)該剩余一個0，判斷字符串的長度是不是等于1，如果大于1的時候正常截取，如果小于等于1（比如-1）的時候就讓文本框的內(nèi)容為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:標(biāo)簽(比如input)
var allAnNiu=anNiu . getElementsByTagName("input");
var firstWenBenWenZi,fuHao;
for(var i of allAnNiu){
i.onclick=function(){
//alert(this .value);
//? inner 內(nèi)部
//這里的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() 方法可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置。
//
//如果沒有找到匹配的字符串則返回 -1。
//
//注意： indexOf() 方法區(qū)分大小寫。
wenBenWenZi.value=wenBenWenZi. value. indexOf("-")==-1?"-"
//substr() 方法可在字符串中抽取從 start 下標(biāo)開始的指定數(shù)目的字符。
//
//語法
//stringObject.substr(start,length)
//參數(shù) 描述
//start 必需。要抽取的子串的起始下標(biāo)。必須是數(shù)值。如果是負(fù)數(shù)，
//那么該參數(shù)聲明從字符串的尾部開始算起的位置。
//也就是說，-1 指字符串中最后一個字符，-2指倒數(shù)第二個字符，以此類推。
//length 可選。子串中的字符數(shù)。必須是數(shù)值。如果省略了該參數(shù)，
//那么返回從 stringObject 的開始位置到結(jié)尾的字串。
+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 "+":
//下面的一行代碼編譯器會默認(rèn)以為兩個變量是字符串，進(jìn)而自動字符串拼接操作
//為防止這種情況就用Number轉(zhuǎn)型為數(shù)字進(jìn)行計算
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等表單元素上，
都使得元素成為“不可用”的狀態(tài)
readonly表示“只讀”，一般表示對于文字內(nèi)容只讀，即不可更改內(nèi)容，
對于非文字的表單“只讀”與“不只讀”似乎沒有啥區(qū)別；
disabled表示“使殘廢，使無效”，都?xì)垙U了，那還管你有沒有文字內(nèi)容，都得殘掉。
-->
<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”存儲顯示的數(shù)字?！癿r”再次調(diào)用存儲的數(shù)字。
“m+”將當(dāng)前顯示的數(shù)與存儲區(qū)中的數(shù)相加，
結(jié)果存入存儲器 “mc”用于清除存儲區(qū)中的數(shù)值-->
<input type="button" value="m" />
</div>
</div>
</body>
</html>
2.表格的移入換行（效果：鼠標(biāo)移出每個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的名稱")
//標(biāo)簽選擇器:document . getElementsByTagName("標(biāo)簽的名稱")
//標(biāo)簽選擇器:會獲取頁面上所有的執(zhí)行標(biāo)簽,得到的內(nèi)容是一個數(shù)組，
//可以通過下標(biāo)去訪問每個標(biāo)簽
var trShuZuVar=document . getElementsByTagName("tr");//tr的一個數(shù)組
//遍歷每個tr，給每個tr賦值事件
for(var xiaBiao of trShuZuVar){
//給每個tr添加一個鼠標(biāo)移入的事件
xiaBiao . onmouseover=function(){
//用this. style . backgroundColor改變當(dāng)前的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>
