⑴ 用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中的清除方法,调用它即可。