犀牛書實(shí)在是太厚了，看不了多少就想睡覺。剛好前兩天在 github 上看見一個(gè)大神用 js 寫的 2048，很心動(dòng)。就想自己也動(dòng)手寫一個(gè)，結(jié)果發(fā)現(xiàn)自己級(jí)別還不夠，還需繼續(xù)修煉……所以就在能力范圍內(nèi)寫個(gè)計(jì)算器，就當(dāng)緩解看書的枯燥感……
html 部分：
<!DOCTYPE html>
<html lang="en">
<head> <link rel="stylesheet" type="text/css" href="caculator2.0.css"> <script type="text/javascript" src="caculator2.0.js"></script> <meta charset="UTF-8"> <title>caculator2.0</title> </head>
<body> <div id="container"> <div id="header"> <div id="logo">
<p id="name">Caculator</p>
<p id="copyright">By Pomodoro</p>
</div> <input type="text" id="result" style="text-align: right;"></div> <div id="main"> <div id="line_1">
<ul> <li><button type="number" id="num7" value="7" onclick="show_text(this.id)"><bold>7</bold></button></li> <li><button type="number" id="num8" value="8" onclick="show_text(this.id)"><bold>8</bold></button></li> <li><button type="number" id="num9" value="9" onclick="show_text(this.id)"><bold>9</bold></button></li> <li><button type="text" id="add" value="+" onclick="show_text(this.id)"><bold>+</bold></button></li> </ul>
</div> <div id="line_2"> <ul> <li><button type="number" id="num4" value="4" onclick="show_text(this.id)"><bold>4</bold></button></li> <li><button type="number" id="num5" value="5" onclick="show_text(this.id)"><bold>5</bold></button></li> <li><button type="number" id="num6" value="6" onclick="show_text(this.id)"><bold>6</bold></button></li> <li><button type="text" id="sub" value="-" onclick="show_text(this.id)"><bold>-</bold></button></li> </ul> </div> <div id="line_3"> <ul> <li><button type="number" id="num1" value="1" onclick="show_text(this.id)"><bold>1</bold></button></li> <li><button type="number" id="num2" value="2" onclick="show_text(this.id)"><bold>2</bold></button></li> <li><button type="number" id="num3" value="3" onclick="show_text(this.id)"><bold>3</bold></button></li> <li><button type="text" id="mul" value="*" onclick="show_text(this.id)"><bold>x</bold></button></li> </ul> </div> <div id="line_4"> <ul> <li><button type="number" id="num0" value="0" onclick="show_text(this.id)"><bold>0</bold></button></li> <li><button type="number" id="clear" value="c" onclick="reset()"><bold>c</bold></button></li> <li><button type="number" id="equal" value="=" onclick="count()"><bold>=</bold></button></li> <li><button type="text" id="divide" value="/" onclick="show_text(this.id)"><bold>/</bold></button></li> </ul> </div> </div> </body> </html>
css 部分：
body { background:white; }
#container { width: 600px; max-height: 650px; margin: 0 auto; opacity: 0.6; }
#header { background: white; }
#logo { width: 600px; line-height: 10px; color: #776E65; }
#name { font-size: 30px; font-weight: bold; float: left; }
#copyright { float: right; line-height: 50px; }
#first_num,#second_num { width: 250px; height:50px; background: white; color:#454545; font-size: 25px; font-weight: bold; margin-right: 4px; }
#operator { width: 70px; height: 50px; background: white; color:#454545; font-size: 25px; font-weight: bold; }
#result { width: 592px; height: 50px; background: white; color:#454545; font-size: 25px; font-weight: bold; }
#main { width: 595px; height: 500px; background: #BBADA0; }
#line_1 ul li, #line_2 ul li,#line_3 ul li,#line_4 ul li { list-style: none; float: left; }
#num7,#num8,#num9,#add, #num4,#num5,#num6,#sub,#num1,#num2,#num3,#mul, #num0,#clear,#equal,#divide { width: 120px; height: 60px; margin: 30px 10px 30px 0; border-radius: 0.5em; }
#add,#sub,#mul,#divide,#clear { background: #EDE0C8; }
#equal { background: #F59563; }
div ul li bold { font-weight: bold; font-size: 20px; color: blcak; }
感覺 css 部分寫得有些亂，反正自己寫完之后自己都不想看了……下次注意
從這個(gè)小 demo 得到最大的收獲就是 js 部分了。在實(shí)現(xiàn)之前我把計(jì)算部分構(gòu)思得很復(fù)雜，想用之前學(xué)過的一堆字符串操作函數(shù)，結(jié)果健完身回來開始寫的時(shí)候發(fā)現(xiàn)好像行不通……于是我就利用強(qiáng)大的 Google ，結(jié)果找到了一個(gè)非常簡(jiǎn)單的函數(shù)來實(shí)現(xiàn)計(jì)算功能，只要一行代碼就可以解決。它就是 eval（string) 函數(shù)，它可以用于計(jì)算某個(gè)字符串，并執(zhí)行 js 代碼。
該方法只接受原始字符串作為參數(shù)，如果 string 參數(shù)不是原始字符串，那么該方法將不作任何改變地返回。注意不要為 eval() 函數(shù)傳遞 String 對(duì)象來作為參數(shù)。
如果試圖覆蓋 eval 屬性或把 eval() 方法賦予另一個(gè)屬性，并通過該屬性調(diào)用它，則 ECMAScript 實(shí)現(xiàn)允許拋出一個(gè) EvalError 異常。
js 部分：
「用了eval（）函數(shù)代碼就變得簡(jiǎn)潔很多」
// alert("hsfj"); function show_text(id) { document.getElementById("result").value += document.getElementById(id).value; } function reset() { document.getElementById("result").value = ""; // alert("jk");test } function count() { document.getElementById("result").value = eval(document.getElementById("result").value);//一個(gè)非常強(qiáng)大的函數(shù) }
一個(gè)簡(jiǎn)單的計(jì)算器就實(shí)現(xiàn)了，期待我早日實(shí)現(xiàn) 2048……
