导航:首页 > 编程语言 > html简易购物车代码
html简易购物车代码
发布时间：2021-12-05 02:42:55❶ 如何用html css javascript php制作购物车
一两句说不清楚………
用html css做出商品样子和购物车样子，
然后用javascript来对买这个动作做处理，把商品的信息存起来，通过js把商品信息传递给购物车，让购物车能够显示；
另一方面把信息交给php，写入数据库。
我这么说你明白了么……
❷ 在HTML里用javascript做一个简单购物车部分
给楼主做了一个，JS实现商品计数的加和减，最少不能少于1，最多不大于99，代码里面有注释，方面楼主查看和使用。
❸ 我想玩只用HTML做一个花店的购物车，图片是鼠标悬停的怎么做，求代码
不知道该怎么回答你的提问，，，
❹ 用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>
❺ 静态HTML网页可以实现购物车功能吗而且不用数据库...
没有人会做这样的事情,但是即然说了,可以讨论一下
一般的购物车,都要有专SESSION和COOKIES来做,在没有服务端脚本语言属的情况下操作SESSION是不可能的!
静态HTML里如果可以用JAVASCRIPT脚本,就可以操作COOKIES,将商品的信息保存在COOKIES中,购买成功后,可以用:mailto:[email protected] 的方式发送到邮箱!
❻ 求一个JS代码，就APP购物车的代码，可以在html直接实现的
给楼主做了一个，JS实现商品计数的加和减，最少不能少于1，最多不大于99，代码里面有注释，方面楼主查看和使用。
❼ java简单的购物车代码
packageTest;
importjava.util.LinkedHashMap;
importjava.util.Map;
importjava.util.Map.Entry;
importjava.util.Scanner;
publicclassTest{
publicstaticvoidmain(String[]args){
();//初始化
Map<String,String>map=newLinkedHashMap<>();
while(true){
Scannerin=newScanner(System.in);
map=buy(in,map);//选择
System.out.println();
System.out.println("还要继续购物吗?(Y/N)");
Stringjx=in.nextLine();
if(jx.equals("N")){
break;
}
}
print(map);
}
publicstaticvoidprint(Map<String,String>m){
System.out.println("
******************");
System.out.println("购物车清单");
Integerhj=0;
for(Entry<String,String>entry:m.entrySet()){
Stringkey=entry.getKey();
Stringvalue=entry.getValue();
if(key.equals("1")){
hj+=Integer.parseInt(value)*3;
System.out.println("哇哈哈纯净水:"+value+"件，合计：￥"+Integer.parseInt(value)*3);
}elseif(key.equals("2")){
hj+=Integer.parseInt(value)*5;
System.out.println("康师傅方便面:"+value+"件，合计：￥"+Integer.parseInt(value)*5);
}elseif(key.equals("3")){
hj+=Integer.parseInt(value)*4;
System.out.println("可口可乐:"+value+"件，合计：￥"+Integer.parseInt(value)*4);
}
}
System.out.println("合计金额:￥"+hj);
}
publicstaticvoidinit(){
System.out.println("******************");
System.out.println(" 商品列表
");
System.out.println("商品名称价格");
System.out.println("1.哇哈哈纯净水￥3");
System.out.println("2.康师傅方便面￥5");
System.out.println("3.可口可乐￥4");
System.out.println("******************");
}
publicstaticMap<String,String>buy(Scannerscan,Map<String,String>m){
System.out.print("请输入编号:");
Stringbh=scan.nextLine();
System.out.print("请输入购买数量:");
Stringnum=scan.nextLine();
if(m.size()>0&&m.keySet().contains(bh)){
m.put(bh,(Integer.parseInt(bh)+Integer.parseInt(num))+"");
}else{
m.put(bh,num);
}
returnm;
}
}
❽ JS代码 做一个简易的购物车 效果图如下
楼主是想要点击合计就是出数值还是什么？如果说点击合计就算出值的话如下
<tablewidth="400"border="1">
<tr>
<throws="5">简易购物车</th>
</tr>
<tr>
<td>商品名称</td>
<td>数量(件)</td>
<td>单价(美元)</td>
<td>运费(美元)</td>
<td><buttononclick="fun()">合计</button></td>
</tr>
<tr>
<td><inputtype="text"name="goodsName"/></td>
<td><inputtype="text"name="num"id="num"/></td>
<td><inputtype="text"name="price"id="price"/></td>
<td><inputtype="text"name="freight"id="freight"/></td>
<td><inputtype="text"name="total"id="total"/></td>
</tr>
</table>
<script>
functionfun(){
varnum=document.getElementById("num").value;
varprice=document.getElementById("price").value;
varfreight=parseInt(document.getElementById("freight").value);
vartotal=(price*num)+freight;
document.getElementById("total").value=total;
}
</script>
❾ JSP大作业 求一个 用HTML 做的 简单的购物网站
packagessc.web.controller;
importjava.io.IOException;
importjava.io.PrintWriter;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importssc.domain.Book;
importssc.domain.Cart;
importssc.service.BusinessService;
//完成书籍购买
{
publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException
{
Stringid=request.getParameter("id");
BusinessServiceservice=newBusinessService();
Bookbook=service.findBook(id);
//添加用户的购物车
Cartcart=(Cart)request.getSession().getAttribute("cart");
if(cart==null)
{
cart=newCart();
request.getSession().setAttribute("cart",cart);
}
//把书加入到购物车，完成购买
cart.add(book);
request.getRequestDispatcher("/WEB-INF/jsp/listcart.jsp").forward(request,response);
}
publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException
{
doGet(request,response);
}
}
这是我写的购物车
❿ 如何用html php制作购物车
网上有好多教程你随便搜一下就有了
与html简易购物车代码相关的资料
- javaeessh三大框架知识点
- javaee配置jdk
- 登陆js实现
- hs光流法matlab代码
- java爬虫招聘数据
- js的fill
- jstlfmt浏览器
- php程序获取404
- 淘宝突破全屏限制代码
- 用java写一个栈
- java限制鼠标移动范围
- vuejsmouseenter
- java声明空数组
- 最基本的程序设计要求是
- 数控编程中代码大全
- 简述java的事件处理机制
- 2803代码指什么
- 省市区js
- 淘宝全屏海报显示代码
- java证书生成
- js生成桌面快捷方式
- pb焦点程序
- 浏览器修改js代码
- 锅打灰太狼代码原理
- php调用html代码
- java自动生成变量
- jsp页面划分
- js替换img
- java字符串操作
- c考试程序开发题目关于面积
- js禁止右键复制
- js常见算法实现汇总pdf
- 移动硬盘清除占用程序
- js日期格式转换
- js改变src动画
- java批量下载
- jstatd默认端口
- stm3并转串程序
- 依云js
- 若在程序中用到strlen
- flash静音代码
- dojojson解析