QQ突然彈出來一個前端公開課的提示用js做計算器，由于一直想學前段的知識，點進去了，收獲了一些東西，做個記錄。
題目：計算器的實現 技術：html+css+js 1 . body里放倆div用js做計算器，一個大的包一個小的，小的放鍵盤
<div id="cac">
計算器
"text" class="s_text" id="result" value="0"/>
<div class="c_key">
div>
div>2 . 鍵盤div里放鍵盤
<div class="c_key">
<ul>
<li>7li>
<li>8li>
<li>9li>
<li>→li>
<li>Cli>
<li>4li>
<li>5li>
<li>6li>
<li>*li>
<li>/li>
<li>1li>
<li>2li>
<li>3li>
<li>+li>
<li>-li>
<li>0li>
<li>00li>
<li>.li>
<li>%li>
ul>
div>3.建個CSS文件調樣式
html代碼：
<head>
<base href="<%=basePath%>">
<title>計算器title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/style.css">
head>
style.css代碼
body{
font-size:12px;
font-family:"微軟雅黑";
color:#666;
}
*{
padding:0px;
margin:0px;
}
#cac{
width:830px;
height:500px;
background:#f2f2f2;
margin:0 auto;
padding:10px;
}
#cac .c_show .s_text{
width:810px;
height:42px;
border:none;
line-height:42px;
text-align:right;
padding-right:20px;
font-size:34px;
color:#9e9e9e;
}
#cac h2{
font-size:16px;
color:#000;
font-weight:500;
padding:12px 0 12px 20px;
cursor:move;
}
#cac .c_key ul{
border:3px solid #fff;
overflow:auto;
margin:10px auto;
}
#cac .c_key ul li{
float:left;
width:140px;
height:65px;
background:#eaeaea;
margin:11px;
text-align:center;
line-height:65px;
font-size:32px;
cursor:pointer;
list-style:none;
border:1px solid #fff;
}
#cac .c_key ul .c_tool{
background:#738fd8;
color:#fff;
}
#cac .c_key ul .c_result{
background:#f90;
color:#fff;
}
#cac .c_key ul li:hover{
background:#fff;
color:#000;
}解析：
大括號前的body，body體內的樣式
“*”星號，整個頁面的樣式
“#”井號，選擇id
.class 選擇class
font-size ：字號
font-：字體
color：顏色
：自身到自身內的一個容器的邊距
：自身到自身外的一個容器的邊距
:0 auto;
如果有兩個參數，一個是上下邊距，另一個是作用，所以效果為：上下無邊距，左右居中
注：和的邊距參數個數：
4個：上 右 下 左
3個：上 右左（左右都是第二個） 下
2個：上下 左右
1個：4個邊距完全相同
text-align:right; 文本放在右邊
-right:20px;你懂的
:move 光標放在上面的效果 可以取值
Auto
Move
e-
ne-
nw-
n-
se-
sw-
s-
w-
text
wait
help
:auto; 內容溢出元素框時發生的事情，還可以取值：
默認值。內容不會被修剪，會呈現在元素框之外。
內容會被修剪，并且其余內容是不可見的。
內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
規定應該從父元素繼承 屬性的值。
#cac .c_key ul li:hover{
background:#fff;
color:#000;
}hover：當鼠標移到該元素上的樣式
4 .寫js相應操作，并修改標簽
head里加入
js代碼：
<script type="text/javascript">
//獲取一下id
var resultDom = document.getElementById("result");
//點擊計算器執行函數
function command(num){
var str = resultDom.value;
str = (str == "0" ? "":str);
str += num;
resultDom.value = str;
}
function tools(p,m){
if(operate){
var num = resultDom.value;
num = (num == "0" ? "":num);
resultDom.value = num + p;
operate = false;
}
}
function equal(m){
var result = resultDom.value;
var r = eval(result);
resultDom.value =r;
}
function clearzero(){
resultDom.value=0;
}
function del(m){
var str = resultDom.value;
str = str.substring(0,str.length - 1);
str = (str == "" ? 0 : str);
resultDom.value = str;
}
script> 修改html標簽
<body>
<div id="cac">
<h2>計算器h2>
<div class="c_show">
<input type="text" class="s_text" onfocus="this.blur();" value="0" id="result">
div>
<div class="c_key">
<ul>
<li onclick="command(7);">7li>
<li onclick="command(8);">8li>
<li onclick="command(9);">9li>
<li class="c_tool" onclick="del('j')">←li>
<li class="c_tool" onclick="clearzero('j')">cli>
<li onclick="command(4);">4li>
<li onclick="command(5);">5li>
<li onclick="command(6);">6li>
<li class="c_tool" onclick="tools('*','g')">×li>
<li class="c_tool" onclick="tools('/','g')">÷li>
<li onclick="command(1);">1li>
<li onclick="command(2);">2li>
<li onclick="command(3);">3li>
<li class="c_tool" onclick="tools('+','g');">+li>
<li class="c_tool" onclick="tools('-','g');">-li>
<li onclick="command(0);">0li>
<li onclick="command(0);">00li>
<li onclick="dot('g')">.li>
<li class="c_tool" onclick="tools('%','g');">%li>
<li class="c_result" onclick="equal('j');">=li>
ul>
div>
<div>計算器div>
div>
body>效果：