javascript開(kāi)發(fā)購(gòu)物車(chē)專(zhuān)案介紹
本課程以開(kāi)發(fā) 《javascript開(kāi)發(fā)購(gòu)物車(chē)》做為課程專(zhuān)案實(shí)例，為大家講解開(kāi)發(fā) 《javascript開(kāi)發(fā)購(gòu)物車(chē)》的思路，以及開(kāi)發(fā)《javascript開(kāi)發(fā)購(gòu)物車(chē)》如何編寫(xiě)程式碼實(shí)現(xiàn)邏輯等。
?本教學(xué)所發(fā)展的功能如下：
? 點(diǎn)選加減->實(shí)現(xiàn)加減的功能->實(shí)現(xiàn)總價(jià)等於單價(jià)與數(shù)量之和
?我們來(lái)看下流程圖
#購(gòu)物車(chē)加減????效果圖如下：
#當(dāng)點(diǎn)擊加的時(shí)候，數(shù)字是一直加的，減號(hào)是可以一直減的，但是減的值為0時(shí)，值為1，如果輸入中文或英文，會(huì)有提示訊息，然後值預(yù)設(shè)為1
看下面的程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>購(gòu)物車(chē)加減</title>
<style type="text/css">
a{
text-decoration: none;display:block;width:30px;height:30px;
background:#eee;line-height:30px;font-weight:bolder;
}
.body{width:500px;height:300px;background:#ccc;margin:0 auto;text-align:center;padding:80px;}
#a1{float:left;margin-right:20px;margin-top:2px;text-align:center;}
form{float:left;}
form input{width:40px;height:30px;border:1px solid #eee;text-align:center;}
#a2{float:left;margin-left:20px;margin-top:2px;text-align:center;}
</style>
</head>
<body>
<div>
<a href="#" id="a1">-</a>
<form>
<input type= "text" value="1" id='id'>
</form>
<a href="#" id="a2">+</a>
</div>
</body>
</html>以上我們就把頁(yè)面的樣子已經(jīng)做出來(lái)了
