⑴ 用html做一個購物車,能實現簡單的產品數量和價格的加減就行。最後能計算出提交物品價格的總和。
html中的購物車的增減不能直接傳送到後台,可以通過ajax,在js中發送ajax
純前端的話可以參考下面的
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>cart</title>
<styletype="text/css">
body,p,a,input{
margin:0;
padding:0;
font-size:12px;
}
.container{
width:100%;
}
.main{
width:1000px;
height:500px;
margin:100pxauto;
}
.main.cart-containertable{
width:100%;}
.main.cart-containertabletr{
text-align:center;
}
.main.cart-containertabletr:hover{
background:rgba(128,128,128,0.2);
}
.main.cart-containertable.table-header{
height:30px;
background:#d9d9d9;
font-size:1.2em;
}
.main.cart-containertable.table-headertd:first-child{
border-left:solid4pxred;
box-sizing:border-box;
}
.main.cart-containertabletrtd:nth-child(1),
.main.cart-containertabletrtd:nth-child(2){
text-align:left;
}
.main.cart-containertabletrtd:nth-child(2){
width:52%;
}
.main.cart-containertabletrtd:nth-child(3){
width:12%;
}
.main.cart-containertabletrtd:nth-child(4){
width:12%;
}
.main.cart-containertabletrtd:nth-child(5){
width:12%;
}
.main.cart-containertabletrtd:last-child{
width:10%;
}
.cart-good{
height:60px;
}
.cart-goodimg{
float:left;
margin:10px;
width:60px;
}
.cart-goodtdp{
margin:10px0px;
}
/*加、減按鈕*/
.cart-goodtdinput[type='button']{
width:20px;
height:20px;
background:#00f300;
outline:none;
border:none;
}
.cart-goodtdinput[type='button']:disabled{
background:grey;
}
.cart-goodtdinput[type='button']:first-child{
margin-right:-4px;
}
.cart-goodtdinput[type='button']:last-child{
margin-left:-4px;
}
.cart-goodtdinput[type='text']{
width:30px;
height:20px;
outline:none;
border:none;
text-align:center;
}
.table-footer{
display:flex;
justify-content:space-between;
line-height:40px;
}
.table-footerdiv{
font-size:1.2em;
}
.table-footerdivbutton{
background:red;
width:120px;
height:40px;
color:white;
}
</style>
</head>
<body>
<divclass="container">
<header></header>
<sectionclass="main">
<divclass="cart-container">
<tablecellspacing="0">
<trclass="table-header">
<td><inputtype="checkbox"id="chk_alla"></td>
<td>聚美優品發貨</td>
<td>聚美價</td>
<td>數量</td>
<td>小計</td>
<td>操作</td>
</tr>
<!--<trclass="cart-good">-->
<!--<td><inputtype="checkbox"id="001"></td>-->
<!--<td>-->
<!--<imgsrc="https://p2.jmstatic.com/proct/001/293/1293263_std/1293263_60_60.jpg"alt="">-->
<!--<p>[極速免稅]PITTAMASK口罩3枚入</p>-->
<!--<p>型號:新版防曬款容量:3枚入</p>-->
<!--</td>-->
<!--<td>89.00</td>-->
<!--<td>-->
<!--<inputtype="button"value="-">-->
<!--<inputtype="text"value="1">-->
<!--<inputtype="button"value="+">-->
<!--</td>-->
<!--<td>89.00</td>-->
<!--<td><ahref="#">刪除</a></td>-->
<!--</tr>-->
</table>
<divclass="table-footer">
<div>
<inputtype="checkbox"id="chk_allb"><labelfor="chk_allb">全選</label>
<spanstyle="margin-left:20px">繼續購物|清空選中商品</span>
</div>
<div>
共<spanid="good_count">5</span>件商品商品應付總額:<spanid="goods_total">¥229.00</span>
<buttonclass="btn_menu">去結算</button>
</div>
</div>
</div>
</section>
</div>
<script>
(function(){
varskin_procts=[
{
"id":"002",
"title":"EsteeLauder多效智妍精華霜15ml",
"img_url":"http://p0.jmstatic.com/proct/003/565/3565880_std/3565880_350_350.jpg",
"price":249.0,
"number":6,
"acount":"520",
"ischecked":true
},
{
"id":"004",
"title":"EsteeLauder肌透修護潔面乳30ml",
"img_url":"http://p4.jmstatic.com/proct/003/155/3155764_std/3155764_350_350.jpg",
"price":49.9,
"number":1,
"acount":"5911",
"ischecked":false
},
{
"id":"008",
"title":"雅詩蘭黛無痕持妝粉底液",
"img_url":"http://p3.jmstatic.com/proct/003/662/3662318_std/3662318_350_350.jpg",
"price":69.9,
"number":2,
"acount":"3972",
"ischecked":true
},
{
"id":"0012",
"title":"EsteeLauder肌初賦活原生液30ml",
"img_url":"http://p4.jmstatic.com/proct/003/565/3565914_std/3565914_350_350.jpg",
"price":159.0,
"number":1,
"acount":"2338"
},
{
"id":"001",
"title":"雅詩蘭黛無痕持妝粉底液30ml",
"img_url":"http://p2.jmstatic.com/proct/001/648/1648502_std/1648502_350_350.jpg",
"price":298.0,
"number":4,
"acount":"5071",
"ischecked":false
},
{
"id":"009",
"title":"雅詩蘭黛眼部精華霜15ml",
"img_url":"http://p1.jmstatic.com/proct/001/049/1049746_std/1049746_350_350.jpg",
"price":399.0,
"number":1,
"acount":"4022",
"ischecked":false
}
]
//添加商品
functionload(){
vartbody=document.querySelector('.cart-containertabletbody');
for(letgoodofskin_procts){
tbody.innerHTML+=`<trclass="cart-good"id="${good.id}">
<td><inputtype="checkbox"class="good-check"${good.ischecked?"checked":''}></td>
<td>
<imgsrc="${good.img_url}"alt="">
<p>[極速免稅]PITTAMASK口罩3枚入</p>
<p>型號:新版防曬款容量:3枚入</p>
</td>
<td>${good.price}</td>
<td>
<inputtype="button"value="-"${good.number<=1?"disabled":''}>
<inputtype="text"value="${good.number}">
<inputtype="button"value="+">
</td>
<td>${good.price*good.number}</td>
<td><ahref="#">刪除</a></td>
</tr>`
}
totalAcount();
}
load();
//endall..........
//1.為table注冊單擊事件
vartable01=document.querySelector('.cart-containertable');
table01.onclick=function(event){
varnode=event.target
if(node.getAttribute('type')=='button'){
//alert(event.target.value);
changeNumber(event);
subtotal(event);
checkedRow(event);
checkedAllRows();
}elseif(node.className=='good-check'){
checkedAllRows();
}elseif(node.id=='chk_alla'){
varf=event.target.checked;
varchks=document.querySelectorAll('.good-check');
for(varckofchks){
ck.checked=f;
}
for(vargoodofskin_procts){
good.ischecked=f;
}
}elseif(node.nodeName.toLowerCase()=='a'){
vartr=event.target.parentNode.parentNode;
for(vari=0;i<skin_procts.length;i++){
if(skin_procts[i].id==tr.id){
skin_procts.splice(i,1);
console.log(skin_procts);
}
}
tr.parentNode.removeChild(tr);
}
totalAcount();
};
//單擊增加或減少按鈕的方法
functionchangeNumber(event){
varnode=event&&event.target;
varv=0;
if(node.value&&node.value=='+'){
//node.previousElementSibling.value=parseInt(node.previousElementSibling.value)+1;
node.previousElementSibling.value++;
v=node.previousElementSibling.value;
node.previousElementSibling.previousElementSibling.disabled=false;
}else{
//if(node.value&&node.value=='+')
if(node.nextElementSibling.value>1){
node.nextElementSibling.value--;
v=node.nextElementSibling.value;
if(v==1){
node.disabled=true;
}
}
}
//存儲商品數量
varid=node.parentNode.parentNode.id;
for(vargoodofskin_procts){
if(id==good.id){
good.number=v;
}
}
}
//每個商品小計的方法
functionsubtotal(event){
varnode=event&&event.target;
//varid=node.parentNode.parentNode.id;
//for(vargofskin_procts){
//if(g.id==id){
//alert(g.price);
//}
//}
//varprice=;
varprice=node.parentNode.previousElementSibling.innerText;
varnum=node.parentNode.children[1].value;
node.parentNode.nextElementSibling.innerText=(num*price).toFixed(2);
}
//檢驗該商品是否選中
functioncheckedRow(event){
event.target.parentNode.parentNode.firstElementChild.firstElementChild.checked=true;
//event.target.parentNode.parentNode.cells[0].firstElementChild.checked=true;
//vartbody=event.target.parentNode.parentNode.parentNode;
//event.target.parentNode.parentNode.parentNode.rows[3].cells[0].firstElementChild.checked=true;
}
//檢查是否全選
functioncheckedAllRows(){
varchks=document.querySelectorAll('.good-check');
varflag=true;
for(varckofchks){
if(!ck.checked){
flag=false;
break;
}
}
document.querySelector('#chk_alla').checked=flag;
}
//統計商品總量和總價格
functiontotalAcount(){
vartotal=0;
vartotal_price=0;
varchks=document.querySelectorAll('.good-check');
for(varckofchks){
if(ck.checked){
id=ck.parentNode.parentNode.id;
for(vargoodofskin_procts){
if(id==good.id){
total+=~~good.number;
total_price=total_price+(good.number*good.price);
good.ischecked=true;
}
}
}
}
document.querySelector('#good_count').innerText=total;
document.querySelector('#goods_total').innerText=total_price;
}
})();
</script>
</body>
</html>
⑵ 急!!!跪求!關於網購的英文專業術語,例如登錄,秒殺,購物車,包郵等等。越多越專業越好!英文英文
在我空間里 請看
⑶ 如何使用jquerymobile 中的庫 來實現購物車自動計算
js部分的源代碼如下:
$(function() {
var adds=$('.add');
var mins =$('.min');
var selects = $('.goodsList input[type=checkbox]');
// $('.fourthTab').children('.num').eq(1).val(40);
// $('.fourthTab').siblings('.price').eq(1).text(1600);
// $('#total').text(
// parseFloat($('.fourthTab').children('.num').eq(1).val())
// *
// parseFloat( $('.fourthTab').siblings('.price').eq(1).text())
// )
adds.on('click',function(){
var num= $(this).siblings('.num');
console.log("fasdfasd");
num.val(parseInt(num.val())+1);
})
mins.on('click',function(){
var num =$(this).siblings('.num');
if(num.val()>1) {
num.val(parseInt(num.val()) - 1);
}
})
⑷ 點擊查看大圖 和 購物車用英語怎麼說啊
購物車 shopping cart
點擊查看大圖 log and review the bigger picture
⑸ 關於php購物車刪除商品問題
看看這個,http://..com/question/102568465.html
mysql_query("SET CHARACTER SET gb2312");
$sql="DELETE FROM goods WHERE id=".$del;
$sql1="select * FROM goods";
$sql2='select * from goods where id=\''.$id.'\'';
echo $sql.'<br>';
echo $sql2.'<br>';
echo $sql3.'<br>';
DIE();
你吧這三條SQL弄phpmyadmin 中運行一下,看看是什麼,
您寫的語句沒錯,可能是資料庫中只有一條記錄,刪了自然沒有了;
代碼寫得太糟糕了,沒法看,
http://..com/question/102568465.html
⑹ 請高手幫我看看,這個jQuery實現的購物車表單金額統計出不來結果
<tr class="tdprice">
<td class="tdprice"><span>單價抄:</span><span class="price">1.95</span></td>
這里出現兩個tdprice,,很可能導致循環錯亂,
建議修改方案,給tr一個id吧,
按照你的產品id序號給,比如:
<tr id="trprice_<% =id %>" class="trprice">....</tr>
$(".add").click(function(){
.....
var trpriceObj = $(this).parents("trprice").attr("id");
setTotal(trpriceObj);//發送某行dom節點,然後根據節點查找價格數量來計算總價
})
⑺ session+cookies實現購物車功能,javaweb開發
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'shop2.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
</head>
<body>
<%
request.setCharacterEncoding("UTF-8");
Map<String,Integer> itm=(Map<String,Integer>)session.getAttribute("item");
if(itm==null){
itm=new HashMap<String,Integer>();
itm.put("電視", 1);
itm.put("蘋果", 0);
itm.put("香蕉", 1);
itm.put("衣服", 0);
}
String [] buy=request.getParameterValues("c");
for(String b:buy){
if(b.equals("電視")){
int num=itm.get("電視");
itm.put(b, num+1);
}
if(b.equals("蘋果")){
int num=itm.get(b);
itm.put(b, num+1);
}
if(b.equals("香蕉")){
int num=itm.get(b);
itm.put(b, num+1);
}
if(b.equals("衣服")){
int num=itm.get(b);
itm.put(b, num+1);
}
}
session.setAttribute("item", itm);
%>
你所購買的物品<br>
電視:<%=itm.get("電視") %>本<br>
蘋果:<%=itm.get("蘋果") %>個<br>
香蕉:<%=itm.get("香蕉") %>個<br>
衣服:<%=itm.get("衣服") %>件<br>
<p><a href="shop.jsp">再次購買</a></p>
</body>
</html>
下面是購買頁面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'shop.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
歡迎光臨本店! <br>
<form action="shop2.jsp" method="post">
<input name="c" type="checkbox" value="電視" />電視
<input name="c" type="checkbox" value="蘋果" />蘋果
<input name="c" type="checkbox" value="香蕉" />香蕉
<input name="c" type="checkbox" value="衣服" />衣服
<img alt="dddd" src="<%=request.getAttribute("path")%>">
<p> <%=request.getAttribute("yy")%></p>
<input name="" type="submit" value="確認購買" />
</form>
</body>
</html>
下面是使用cookie的
添加Cookie
Cookie uname1=new Cookie("lname",username);
uname1.setMaxAge(24*3600);
Cookie upwd1=new Cookie("lpwd",pwd);
upwd1.setMaxAge(24*3600);
response.addCookie(uname1);
response.addCookie(upwd1);
添加session
session.setAttribute("log_name", username);
以下代碼是對cookie和session的數據操作!
<%
String uname="";
String upwd="";
Cookie[] cookies=request.getCookies(); //一request獲范圍獲取一個
cookie實例
if(cookies!=null){
for(Cookie c: cookies){
if("lname".equals(c.getName())){ //判斷cookie裡面的名字是否等於這
個
uname=c.getValue(); //如果等於就獲取它的值
}
if("lpwd".equals(c.getName())){
upwd=c.getValue();
}
}
String sql2="select * from member where username='"+uname+"'";
ResultSet rs2=null;
rs2=DBHelper.executeQuery(sql2);
boolean is=true;
while(rs2.next()){
String pp=rs2.getString("upwd");
if(pp.equals(upwd)){
is=false;
}
}
if(session.getAttribute("log_name")!=null){ //判斷是否有slog_name這
個session
uname=(String)session.getAttribute("log_name");
is=false;
}
if(is){
response.sendRedirect("index1.jsp");
}
}
%>
<%
application.setAttribute("log", uname);
%>
⑻ 英文網站用語翻譯 (留言,購物車)
市場價 retail price
加盟價 franchise price
會員價 member price
商品單位 proct unit
數量 amount
編號 proct ID
單位 unit
類別 category
產品介紹 proct description
對不起,您還沒有登陸 sorry, you didn't log in yet.
添加購物 add to shopping cart
商品已經成功添加您的購物車 proct added to your shopping cart
商品數量修改成功 proct amount modified successfully
購物車被清空 your shopping is emptied (Your shopping cart is empty)
刪除成功 deleted successfully
您從何處知道本網站 Where you heard our site from
遞交 submit
重寫 reset
你的數據添加成功 your information added successfully
你的數據添加失敗 add information failed
申請會員成功 membership successfully registered
申請失敗 membership apply failed
⑼ opencart 購物車產品一多的時候就很慢,有人試過嗎
這是因為opencart系統默認保存你已經加入購物車的內容,實際是保存入了資料庫表中回,當你再次訪答問網站登錄你的賬戶後,仍然可以對購物車中的物品進一步結算下單。如果你想修改為退出登錄後不再在購物車中保存,可以在logout時清空cart中的商品,詳細查看system/library/cart.php中的清除方法,調用它即可。
⑽ opencart關閉瀏覽器,購物車還能保存商品
這是因為opencart系統默認保存你已經加入購物車的內容,實際是保存入了資料庫表中,內當容你再次訪問網站登錄你的賬戶後,仍然可以對購物車中的物品進一步結算下單。
如果你想修改為退出登錄後不再在購物車中保存,可以在logout時清空cart中的商品,詳細查看system/library/cart.php中的清除方法,調用它即可。