學(xué)習(xí)之初，寫(xiě)過(guò)許多小demo，但是一直沒(méi)有整理。現(xiàn)在也整理一下，供初學(xué)的朋友參考參考。先用js寫(xiě)一個(gè)簡(jiǎn)單的計(jì)算器，外觀如下圖：
計(jì)算器外觀
這個(gè)計(jì)算器可以最簡(jiǎn)單的加減乘除取余運(yùn)算以及退格、清零等。
分為三部分：html、css、js。
html布局如下：
<div class="calculater">
<div class="header">
<a href="#" target:_blank>CLICK</a>
<h1>CALCULATER</h1>
</div>
<form name="calculater" action method="get">
<p class="screen" id="screen">
</p>
<div class="calcu_btns">
<ul>
<li onclick="typeInput('7')">7</li>
<li onclick="typeInput('8')">8</li>
<li onclick="typeInput('9')">9</li>
<li onclick="del()">←</li>
<li onclick="typeInput('c')">c</li>
<li onclick="typeInput('4')">4</li>
<li onclick="typeInput('5')">5</li>
<li onclick="typeInput('6')">6</li>
<li onclick="typeInput('*')">*</li>
<li onclick="typeInput('/')">/</li>
<li onclick="typeInput('1')">1</li>
<li onclick="typeInput('2')">2</li>
<li onclick="typeInput('3')">3</li>
<li onclick="typeInput('+')">+</li>
<li onclick="typeInput('-')">-</li>
<li onclick="typeInput('0')" >0</li>
<li onclick="typeInput('00')">00</li>
<li onclick="typeInput('.')">.</li>
<li onclick="typeInput('%')">%</li>
<li onclick="typeInput('=')">=</li>
</ul>
</div>
</form>
<div class="footer">
<span>HELLO WORLD</span>
<a href="#">反饋</a>
</div>
</div>
css外部樣式
body{
background-color:#f3f3f3;
text-align:center;
}
.calculater{
width:300px;
height:400px;
margin:auto;
margin-top:50px;
background-color:#e1e1e1;
border:1px solid #fefefe;
font-size:12px;
font-family:Arial,times;
padding:0 20px;
box-shadow:5px 5px 10px #000 ;
}
.header{
width:300px;
height:20px;
text-align:left;
margin-bottom:10px;
}
a{
float:right;
color:#aaa;
text-decoration:none;
}
h1{
font-size:15px;
color:#555;
}
.screen{
width:300px;
height:40px;
line-height:40px;
border:1px solid #aaa;
font-size:20px;
text-align:right;
box-shadow: 5px 0 5px #aaa inset;
}
.calcu_btns{
width:300px;
height:245px;
}
.calcu_btns ul{
padding:0;
margin-top:20px;
width:300px;
height:245px;
border:1px solid #fff;
}
.calcu_btns li{
list-style:none;
float:left;
width:50px;
height:50px;
margin:5px;
display:inline;
line-height:50px;
font-size:17px;
background-color:#eaeaea;
box-shadow: 5px 5px 5px #aaa;
}
.calcu_btns li:hover{
background-color:#f9f9f9;
cursor:pointer;
}
.footer{
width:280px;
height:30px;
background-color:#e1e1e1;
margin-top:10px;
text-align:left;
line-height:30px;
padding:0 10px;
}
.footer span {
text-align:left;
color:#a1a1a1;
}
js部分：要給每個(gè)按鍵加一個(gè)加一個(gè)click事件，并傳入一個(gè)對(duì)應(yīng)的參數(shù)，然后根據(jù)參數(shù)做相應(yīng)的算法。
<script>
var screen=document.getElementById("screen");
//獲取id為screen的元素，并保存到當(dāng)前變量；
function typeInput(y) //方法typeInput輸入?yún)?shù)為y，并且y為字符串；
{
if(y=="c"){ //當(dāng)輸入的c為等號(hào)時(shí)，清空screen；
screen.innerHTML="";
}else if(y=='=') //當(dāng)輸入的y為等號(hào)時(shí)，計(jì)算結(jié)果，并賦值給它；
{
screen.innerHTML=eval(screen.innerHTML);
//eval是原生自帶的計(jì)算方法；可自動(dòng)計(jì)算eval("3+5")=8;
}else{ //如果是其他的計(jì)算符號(hào)，就直接加在后面；
screen.innerHTML=screen.innerHTML+y;
}
}
function del() //輸入退格；
{
var str=screen.innerHTML.substring(0,screen.innerHTML.length-1)
screen.innerHTML=str;
// 截取第一個(gè)到倒數(shù)第二的字符串，substring(0,screen.innerHTML.length-1)
}
</script>
方法講解已經(jīng)注釋?zhuān)瑑H供參考。
<head>
<style>
body{
background-color:#f3f3f3;
text-align:center;
}
.calculater{
width:300px;
height:400px;
margin:auto;
margin-top:50px;
background-color:#e1e1e1;
border:1px solid #fefefe;
font-size:12px;
font-family:Arial,times;
padding:0 20px;
box-shadow:5px 5px 10px #000 ;
}
.header{
width:300px;
height:20px;
text-align:left;
margin-bottom:10px;
}
a{
float:right;
color:#aaa;
text-decoration:none;
}
h1{
font-size:15px;
color:#555;
}
.screen{
width:300px;
height:40px;
line-height:40px;
border:1px solid #aaa;
font-size:20px;
text-align:right;
box-shadow: 5px 0 5px #aaa inset;
}
.calcu_btns{
width:300px;
height:245px;
}
.calcu_btns ul{
padding:0;
margin-top:20px;
width:300px;
height:245px;
border:1px solid #fff;
}
.calcu_btns li{
list-style:none;
float:left;
width:50px;
height:50px;
margin:5px;
display:inline;
line-height:50px;
font-size:17px;
background-color:#eaeaea;
box-shadow: 5px 5px 5px #aaa;
}
.calcu_btns li:hover{
background-color:#f9f9f9;
cursor:pointer;
}
.footer{
width:280px;
height:30px;
background-color:#e1e1e1;
margin-top:10px;
text-align:left;
line-height:30px;
padding:0 10px;
}
.footer span {
text-align:left;
color:#a1a1a1;
}
</style>
</head>
<div class="calculater">
<div class="header">
<a href="#" target:_blank>CLICK</a>
<h1>CALCULATER</h1>
</div>
<form name="calculater" action method="get">
<p class="screen" id="screen">
</p>
<div class="calcu_btns">
<ul>
<li onclick="typeInput('7')">7</li>
<li onclick="typeInput('8')">8</li>
<li onclick="typeInput('9')">9</li>
<li onclick="del()">←</li>
<li onclick="typeInput('c')">c</li>
<li onclick="typeInput('4')">4</li>
<li onclick="typeInput('5')">5</li>
<li onclick="typeInput('6')">6</li>
<li onclick="typeInput('*')">*</li>
<li onclick="typeInput('/')">/</li>
<li onclick="typeInput('1')">1</li>
<li onclick="typeInput('2')">2</li>
<li onclick="typeInput('3')">3</li>
<li onclick="typeInput('+')">+</li>
<li onclick="typeInput('-')">-</li>
<li onclick="typeInput('0')" >0</li>
<li onclick="typeInput('00')">00</li>
<li onclick="typeInput('.')">.</li>
<li onclick="typeInput('%')">%</li>
<li onclick="typeInput('=')">=</li>
</ul>
</div>
</form>
<div class="footer">
<span>HELLO WORLD</span>
<a href="#">反饋</a>
</div>
<script>
var screen=document.getElementById("screen");
//獲取id為screen的元素，并保存到當(dāng)前變量；
function typeInput(y) //方法typeInput輸入?yún)?shù)為y，并且y為字符串；
{
if(y=="c"){ //當(dāng)輸入的c為等號(hào)時(shí)，清空screen；
screen.innerHTML="";
}else if(y=='=') //當(dāng)輸入的y為等號(hào)時(shí)，計(jì)算結(jié)果，并賦值給它；
{
screen.innerHTML=eval(screen.innerHTML);
//eval是原生自帶的計(jì)算方法；可自動(dòng)計(jì)算eval("3+5")=8;
}else{ //如果是其他的計(jì)算符號(hào)，就直接加在后面；
screen.innerHTML=screen.innerHTML+y;
}
}
function del() //輸入退格；
{
var str=screen.innerHTML.substring(0,screen.innerHTML.length-1)
screen.innerHTML=str;
// 截取第一個(gè)到倒數(shù)第二的字符串，substring(0,screen.innerHTML.length-1)
}
</script>
