當前位置:首頁 » 網購平台 » 購物車的前端代碼
擴展閱讀
寧波奧德賽優惠價格 2021-03-15 14:26:02
丹尼斯購物卡能掛失么 2021-03-15 14:25:58
淘寶購物指紋驗證失敗 2021-03-15 14:24:44

購物車的前端代碼

發布時間: 2021-02-18 08:16:41

購物車的Java代碼

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Iterator;public class ShoppingCartManager {

HashMap<String, String> hm=new HashMap<String, String>();
float totlePrice=0;
//添加book到購物車
public void addBook(String bookId,String bookQuantity){

if(hm.containsKey(bookId)){
int value=Integer.parseInt(hm.get(bookId));
value+=Integer.parseInt(bookQuantity);
hm.put(bookId, value+"");
}else{
hm.put(bookId, bookQuantity);
}
}

//修改數量
public void updateQuantity(String bookId,String bookQuantity){
hm.put(bookId, bookQuantity);
}

//獲取購物車的所有信息 並計算總價
public ArrayList<BookBean> getShoppingCart(){
ArrayList<BookBean> al=new ArrayList<BookBean>();
Iterator<String> i=hm.keySet().iterator();
String ids="";
BookTableManager btm=new BookTableManager();
while(i.hasNext()){
ids=ids+","+i.next();
}
al= btm.selectByBookIds(ids);

totlePrice=0; //清空總價,防止無限累計
for(int j=0;j<al.size();j++){
BookBean bb=al.get(j);
totlePrice+=bb.getPrice()*Integer.parseInt(getQuantityById(bb.getBookId()+""));
}

return al;
}

//獲取總價
public float getTotlePrice(){
return totlePrice;
}

//根據ID獲取數量
public String getQuantityById(String id){
String quantity=hm.get(id);
return quantity;
}

//清空購物車
public void clear(){
hm.clear();
}

//刪除購物車中的一本書
public void deleteById(String id){
hm.remove(id);
}
}

⑵ 有沒有添加購物車的代碼 JavaScript 或者jquery 的都可以

添加購物車需要和伺服器端進行數據交互,前端主要是用js的ajax功能將產品的id或者其他信息提交給伺服器端,然後等伺服器端返回添加成功,再在頁面上的購物車中增加添加的商品。

⑶ jsp購物車代碼

//shopping.html
<html>
<head><title>shopping stor</title></head>
<body>
<form action="carts.jsp" target="post">
<br>
please select the item that you want to buy
<br>
<select name="item">
<option>book:old man and the sea
<option>x-box game machine
<option>mp3 player
<option>cce
<option>book:jsp programming
<option>cd "the endless love"
<option>dvd "gone with the wind"
</select>
<br>
<input type="submit" name="submit" value="add">
<input type="submit" name="submit" value="remove">
</form>
</body>

</html>
------------------------------------------------------------------
//carts.jsp
<%@page contentType="text/html;charset=ISO8859_1" %>
<html>
<jsp:useBean id="cart" scope="session" class="test.DummyCart"/>
<jsp:setProperty name="cart" property="*"/>

<%
cart.processRequest();
%>
<br>
<ol>
you have chosen these items:
<%
String []items=cart.getItems();
for(int i=0;i<items.length;i++)
{
%>
<li><%=items[i] %></li>
<%
}
%>
</ol>
<hr>
<%@include file="shopping.htm" %>

</html>
---------------------------------------------------------------------//DummyCart.java
package test;
import javax.servlet.http.*;
import java.util.Vector;
import java.util.Enumeration;
public class DummyCart
{
Vector v = new Vector();
String submit=null;
String item= null;
private void addItem(String name)
{
v.addElement(name);
}

private void removeItem(String name)
{
v.removeElement(name);
}

public void setItem(String s)
{
item=s;
}

public void setSubmit(String s)
{
submit=s;
}

public String[] getItems()
{
String []s=new String[v.size()];
v.Into(s);
return s;
}

public void processRequest()
{
if(submit==null)
addItem(item);
if(submit.equals("add"))
addItem(item);
else if (submit.equals("remove"))
removeItem(item);
reset();
}

private void reset()
{
submit=null;
item=null;
}

}

----------------------------------------------------------------------
上面是一個簡單的例子,功能都能實現,對網頁效果要求更漂亮些的可做一些修改。

⑷ 用JavaScript代碼模擬購物車。

購物車挺復雜的,不是一句兩句能說清的,現在前端都用react,vue這類響應式框架做購物車,事半功倍。

⑸ 這購物車前端代碼代表什麼最好每句翻譯一下謝謝

這不像前端代碼啊,怎麼還有int聲明

⑹ JAVA 購物車示例代碼

import java.awt.*;
import java.awt.event.*;
class ShopFrame extends Frame implements ActionListener
{ Label label1,label2,label3,label4;
Button button1,button2,button3,button4,button5;
TextArea text;
Panel panel1,panel2;
static float sum=0.0f;
ShopFrame(String s)
{ super(s);
setLayout(new BorderLayout());
label1=new Label("面紙:3元",Label.LEFT);
label2=new Label("鋼筆:5元",Label.LEFT);
label3=new Label("書:10元",Label.LEFT);
label4=new Label("襪子:8元",Label.LEFT);
button1=new Button("加入購物車");
button2=new Button("加入購物車");
button3=new Button("加入購物車");
button4=new Button("加入購物車");
button5=new Button("查看購物車");
text=new TextArea("商品有:"+"\n",5,10);
text.setEditable(false);
addWindowListener(new WindowAdapter()
{ public void windowClosing(WindowEvent e)
{ System.exit(0);
}
}
);
button1.addActionListener(this);
button2.addActionListener(this);
button3.addActionListener(this);
button4.addActionListener(this);
button5.addActionListener(this);
panel1=new Panel();
panel2=new Panel();
panel1.add(label1);
panel1.add(button1);
panel1.add(label2);
panel1.add(button2);
panel1.add(label3);
panel1.add(button3);
panel1.add(label4);
panel1.add(button4);
panel2.setLayout(new BorderLayout());
panel2.add(button5,BorderLayout.NORTH);
panel2.add(text,BorderLayout.SOUTH);
this.add(panel1,BorderLayout.CENTER);
this.add(panel2,BorderLayout.SOUTH);
setBounds(100,100,350,250);
setVisible(true);
validate();
}
public void actionPerformed(ActionEvent e)
{ if(e.getSource()==button1)
{ text.append("一個面紙、");
sum=sum+3;
}
else if(e.getSource()==button2)
{ text.append("一隻鋼筆、");
sum=sum+5;
}
else if(e.getSource()==button3)
{ text.append("一本書、");
sum=sum+10;
}
else if(e.getSource()==button4)
{ text.append("一雙襪子、");
sum=sum+8;
}
else if(e.getSource()==button5)
{
text.append("\n"+"總價為:"+"\n"+sum);
}
}

}

public class Shopping {
public static void main(String[] args) {
new ShopFrame("購物車");

}

}
我沒用Swing可能顯示不出來你的效果。不滿意得話我在給你編一個。

⑺ 求一個JS代碼,就APP購物車的代碼,可以在html直接實現的

給樓主做了一個,JS實現商品計數的加和減,最少不能少於1,最多不大於99,代碼裡面有注釋,方面樓主查看和使用。

⑻ 求html購物車代碼,,效果如圖顯示

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>修改訂單</title>
<styletype="text/css">
body{
font-size:13px;
line-height:25px;
}
table{
border-top:1pxsolid#333;
border-left:1pxsolid#333;
width:400px;
}
td{
border-right:1pxsolid#333;
border-bottom:1pxsolid#333;
text-align:center;
}
.title{

font-weight:bold;
background-color:#cccccc;
}
inputtext{
width:100px;
}

</style>
<scripttype="text/javascript">
functionaddRow(){
//行的長度
varrowlength=document.getElementById("order").rows.length;
//得到整個表格對象
varorder=document.getElementById("order").insertRow(rowlength-1);
order.id=rowlength-1;
//插入列
varcel1=order.insertCell(0).innerHTML="游戲光碟";
varcel2=order.insertCell(1).innerHTML="34";
varcel3=order.insertCell(2).innerHTML="&yen;58.40";
varcel4=order.insertCell(3).innerHTML="<inputtype="button"value="刪除"onclick="delRow('"+(rowlength-1)+"')"/>"+"<inputtype="button"value="修改"onclick="editRow('"+(rowlength-1)+"')"/>"
}
functiondelRow(qwe){
=document.getElementById(qwe).rowIndex;
document.getElementById("order").deleteRow(ewq);
}
functioneditRow(rowID){
varrow=document.getElementById(rowID);
varcel=row.cells;
vartext=cel[1].innerHTML;
cel[1].innerHTML="<inputtype='text'value='"+text+"'style='width:40px;'>"
cel[3].lastChild.value="確定";
cel[3].lastChild.setAttribute("onclick","update('"+rowID+"')");
}

functionupdate(qwe){
varrow=document.getElementById(qwe);
varcel=row.cells;
vartext=cel[1].lastChild.value;
cel[1].innerHTML=text;
cel[3].lastChild.value="修改";
cel[3].lastChild.setAttribute("onclick","editRow('"+qwe+"')");
}
/*

functionadd(){
vara=document.getElementById("order").rows.length;
varb=document.getElementById("order").insertRow(a-1);
varone1=b.insertCell(0).innerHTML="123";
}
*/
</script>
</head>
<body>
<tableborder="0"cellspacing="0"cellpadding="0"id="order">
<trclass="title">
<td>商品名稱</td>
<td>數量</td>
<td>價格</td>
<td>操作</td>
</tr>
<trid="1">
<td>防滑真皮休閑鞋</td>
<td>12</td>
<td>&yen;568.50</td>
<td><inputname="rowdel"type="button"value="刪除"onclick='delRow("1")'/>
<inputid="edit1"type="button"value="修改"onclick='editRow("1")'/></td>
</tr>
<tr>
<tdcolspan="4"style="height:30px;">
<inputname="addOrder"type="button"value="增加訂單"onclick="addRow()"/></td>
</tr>
</table>
</body>
</html>

這個是我原來上學的時候練習的代碼,練習的是基礎的jsDOM操作,不過建議以後用Jquery 比較方便 有什麼不懂得可以問我

⑼ web前端購物車功能實現

其實思路都是很簡單的,如果你要純前端的實現,那用Javascript或者jquery就可以做了,如果想前後端聯動,那麼具體數據操作你就提交到後台,然後後台重新返回頁面就可以了

⑽ 前端開發中前端開發購物車怎麼做

這個好像是後台的功能吧,只需要請求數據就可以了