犀牛书实在是太厚了，看不了多少就想睡觉。刚好前两天在 github 上看见一个大神用 js 写的 2048，很心动。就想自己也动手写一个，结果发现自己级别还不够，还需继续修炼……所以就在能力范围内写个计算器，就当缓解看书的枯燥感……
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 部分写得有些乱，反正自己写完之后自己都不想看了……下次注意
从这个小 demo 得到最大的收获就是 js 部分了。在实现之前我把计算部分构思得很复杂，想用之前学过的一堆字符串操作函数，结果健完身回来开始写的时候发现好像行不通……于是我就利用强大的 Google ，结果找到了一个非常简单的函数来实现计算功能，只要一行代码就可以解决。它就是 eval（string) 函数，它可以用于计算某个字符串，并执行 js 代码。
该方法只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回。注意不要为 eval() 函数传递 String 对象来作为参数。
如果试图覆盖 eval 属性或把 eval() 方法赋予另一个属性，并通过该属性调用它，则 ECMAScript 实现允许抛出一个 EvalError 异常。
js 部分：
「用了eval（）函数代码就变得简洁很多」
// 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);//一个非常强大的函数 }
一个简单的计算器就实现了，期待我早日实现 2048……
