javascript開發購物車之佈局
首先,我們要了解我們需要做成什麼樣的功能
簡易購物車的製作,表格內有單價,數量的加減,然後有一個總價,當我們點擊加減,總價會變化
下面我們來看以下html佈局程式碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> table{width:350px;border:1px solid #eee;text-align:center;} .tr2{height:50px;} input{width:30px;height:20px;text-align: center;} a{text-decoration:none} </style> </head> <body> <table cellspacing="0" cellpadding="0" border="1"> <tr> <th>名称</th> <th>单价</th> <th>数量</th> <th>总价</th> </tr> <tr class="tr2"> <td>手表</td> <td id="td">1999</td> <td> <a href="#" id="a1" class="tp1">-</a> <input type="text" value="1" id="id"> <a href="#" id="a2" class="tp2">+</a> </td> <td id="td2">1999</td> </tr> </table> </body> </html>
如上程式碼,小夥伴們可以看到文字方塊兩個側邊有加減號,然後小夥伴們看id='td' 的儲存格,裡面有一個1999,這是預設值,單價
id="td2" 的儲存格中是用來存放總價格