优秀的编程知识分享平台

网站首页 > 技术文章 正文

javascript实现简单购物车功能(有图)

nanyue 2024-09-21 20:03:34 技术文章 5 ℃

Js实现淘宝购物车类似功能：

主要有添加商品

增加和减少商品数量

根据增加、减少或选择的商品获取金额

实现商品价格的计算

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>购物车</title>

</head>

<style type="text/css">

h1{

text-align: center;

}

table{

margin: 0 auto;

}

body{

font-size: larger;color: crimson;

background-image: url(img/2.jpg);

background-repeat: no-repeat;

background-size: 100%;

}

table th,table td{

}

</style>

<body >

<h1>购物车:真划算</h1>

<table border="1" >

<tr>

<!--文本th-->

<th>商品</th>

<th >单价</th>

<th>颜色</th>

<th>库存</th>

<th>好评率</th>

<th>操作</th>

</tr>

<tr>

<td>面膜</td>

<td >150</td>

<td>白色</td>

<td>100</td>

<td>88%</td>

<td align="center">

<input type="button" value="加入购物车" onclick="add_shoppingcar(this)"/>

</td>

</tr>

<tr>

<td>口红</td>

<td >350</td>

<td>白色</td>

<td>166</td>

<td>82%</td>

<td align="center">

<input type="button" value="加入购物车" onclick="add_shoppingcar(this)"/>

</td>

</tr>

<tr>

<td>鼠标</td>

<td >150</td>

<td>黑色</td>

<td>99</td>

<td>75%</td>

<td align="center">

<input type="button" value="加入购物车" onclick="add_shoppingcar(this)"/>

</td>

</tr>

<tr>

<td>键盘</td>

<td >120</td>

<td>黑色</td>

<td>50</td>

<td>80%</td>

<td align="center">

<input type="button" value="加入购物车" onclick="add_shoppingcar(this)"/>

</td>

</tr>

</table>

<h1> 购物车</h1>

<table border="1">

<thead>

<tr>

<th>商品</th>

<th >单价</th>

<th>数量</th>

<th>金额</th>

<th>删除</th>

</tr>

</thead>

<tbody id="goods">

<!--<tr>

<td>面膜</td>

<td>150</td>

<td align="center">

<input type="button" value="-" id="jian" onclick="change(this,-1);"/>-->

<!--readonly规定输入字段为只读-->

<!--<input id="text" type="text" size="1" value="1" readonly="readonly" />

<input type="button" value="+" id="add" onclick="change(this,1);"/>

</td>

<td> <input id="money" size="1" value="80"></input></td>

<td align="center">

<input type="button" value="X" onclick="del(this)" />

</td>

</tr>-->

</tbody>

<tfoot>

<tr>

<td colspan="3" align="center" >总计</td>

<td id="total"></td>

<td>元</td>

</tr>

</tfoot>

</table>

</body>

<script type="text/javascript">

//this js中指当前对象

function add_shoppingcar(btn){

var tr=btn.parentNode.parentNode;

var tds=tr.getElementsByTagName("td");

var name=tds[0].innerHTML;

var price=tds[1].innerHTML;

var tbody=document.getElementById("goods");

var row=tbody.insertRow();//insertRow表格开头插入新行

row.innerHTML="<td>"+name+"</td>"+

"<td>"+price+"</td>"+

"<td align='center'>"+

"<input type='button' value='-' id='jian' onclick='change(this,-1)' />"+

"<input id='text' type='text' size='1' value='1' readonly='readonly' />"+

"<input type='button' value='+' id='add' onclick='change(this,1)' />"+

"</td>"+

"<td>"+price+"</td>"+

"<td align='center'>"+

"<input type='button' value='X' onclick='del(this)'/>"+

"</td>"+

"</tr>"

total();

}

//增加减少数量，用n正负1来表示点击了加减按钮

function change(btn,n){

//获取数量的三个input对象

var inputs = btn.parentNode.getElementsByTagName("input");

//获取原来的数量

var amount = parseInt(inputs[1].value);

//当amount=1时不能再点击"-"符号

//用n<0来表示点击了减button

if(amount<=1 && n<0){

return;

}

//根据加减来改变数量

inputs[1].value = amount + n;

  • //将改变后的数量值赋值给am

  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186

实现效果：

Tags：

猜你喜欢

最近发表
标签列表