用html+css+js制作一个订单列表页面
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用html+css+js制作一个订单列表页面相关的知识，希望对你有一定的参考价值。
能不能说下思路 或者给个视频教程
参考技术A 我给你个思路，你要列出订单就应该先在后台处理好数据，将所有的订单都查询出来，放在集合里面，并且将这个集合对象传进前台，在前台接收这个集合后循环遍历它，这样就得到所有订单的所有东西了追问有没有具体点的给个例子参考下
追答我重新给你写个简单的，符合你的作业要求就是了，今下午下了班六点或者7点给你ok否？
追问好的 最好用div+css 别用Table
追答你要是做订单，我觉着还是用table比较好
毕竟那样可以循环tr嘛，对了，单纯的html+div+css+js是做不到的，得加上后台的代码，还要有jstl表达式
那如果要把用户已下的订单一条条列出来 function怎么写
追答我现在也没有时间给你写啊，这个不难
追问帮帮忙咯 网上找不到额
如何用html css javascript php制作购物车？
用html css javascript php制作购物车，就类似淘宝购物车的东西，就是我在这个页面选中之后，在购物车的页面中可以显示出来之前选中的东西，谢谢。
参考技术A <!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="---.css">
<script src="---.js"></script>
</head>
<body>
<div class="container">
<div class="shop">
<div class="header">
<input type="checkbox" class="shop-checkbox">
<span class="shop-icon"></span>
<span class="shop-name">---</span>
<span class="wangwang-icon"></span>
</div>
<div class="items">
<div class="item">
<div><input class="item-checkbox" type="checkbox" name="" id=""></div>
<div>
<span class="item-img"></span>
</div>
<div class="item-name">
<div>----</div>
<div class="promotion-icons"><span></span><span></span><span></span></div>
</div>
<div class="sku">---</div>
<div class="price">
<div class="price-1">---</div>
<div class="price-2" data-price="---">----</div>
</div>
<div class="num-control">
<span class="num-minus">-</span>
<input class="num" type="text" value="1">
<span class="num-plus">+</span>
</div>
<div class="item-price-total">
<span>￥50.13</span>
</div>
<div class="operation">
<div>---</div>
<div>---</div>
</div>
</div>
</div>
</div>
<div class="shop">
<div class="header">
<input type="checkbox" class="shop-checkbox">
<span class="shop-icon"></span>
<span class="shop-name">---</span>
<span class="wangwang-icon"></span>
</div>
<div class="items">
<div class="item">
<div><input class="item-checkbox" type="checkbox" name="" id=""></div>
<div>
<span class="item-img"></span>
</div>
<div class="item-name">
<div>----</div>
<div class="promotion-icons"><span></span><span></span><span></span></div>
</div>
<div class="sku">---</div>
<div class="price">
<div class="price-1">---</div>
<div class="price-2" data-price="---">---</div>
</div>
<div class="num-control">
<span class="num-minus">-</span>
<input class="num" type="text" value="1">
<span class="num-plus">+</span>
</div>
<div class="item-price-total">
<span>￥9.90</span>
</div>
<div class="operation">
<div>移入收藏夹</div>
<div>删除</div>
</div>
</div>
<div class="item">
<div><input class="item-checkbox" type="checkbox" name="" id=""></div>
<div>
<span class="item-img"></span>
</div>
<div class="item-name">
<div>---</div>
<div class="promotion-icons"><span></span><span></span><span></span></div>
</div>
<div class="sku">---</div>
<div class="price">
<div class="price-1">---</div>
<div class="price-2" data-price="---">---</div>
</div>
<div class="num-control">
<span class="num-minus">-</span>
<input class="num" type="text" value="1">
<span class="num-plus">+</span>
</div>
<div class="item-price-total">
<span>￥19.9</span>
</div>
<div class="operation">
<div>移入收藏夹</div>
<div>删除</div>
</div>
</div>
</div>
</body>
</html>
.container
width: 1000px;
margin-left: auto;
margin-right: auto;
color: #444444;
.header
margin: 8px;
.shop-icon, .wangwang-icon, .promotion-icons span
display:inline-block;
width: 15px;
height: 15px;
background-color: rgb(117,192,241);
.promotion-icons span
margin-right: 4px;
.items
border: 1px solid #ebe9e9;
.item
display: flex;
margin: 8px;
.item-img
width:100px;
height: 100px;
display: inline-block;
background-color: aquamarine;
margin-left: 6px;
margin-right: 6px;
.item-name
display: flex;
flex-direction: column;
justify-content: space-between;
.sku, .price,.item-price-total,.operation,.num-control
margin-left: 18px;
.num
width: 18px;
height: 15px;
.num-control
display: flex;
align-items: baseline;
.num-minus,.num-plus
width: 18px;
height: 22px;
display: inline-block;
background-color: #ebe9e9;
.checkout
display: flex;
justify-content: space-between;
.shop
margin-bottom: 20px;
margin-top: 30px;
.goods,.freight,.checkout-button
margin-left: 15px;
.price-1
text-decoration: line-through;
color: gray;
.check-num ,.total-price
font-size: large;
color: red;
margin-left: 3px;
margin-right: 3px;
.checkout-button
height: 30px;
width: 50px;
background-color: beige;
.checkout
margin-top: 15px;
.item-name
width: 25%;
.item-price-total
width: 5%;
.sku
width: 20%;
function updatePrice()
let items = document.querySelectorAll('.item');
let totalNum = 0;
let totalPrice = 0;
items.forEach(function(item)
if(item.querySelector('.item-checkbox').checked)
let num = item.querySelector('.num').value;
totalNum = totalNum + parseInt(num);
let price = item.querySelector('.price-2').getAttribute('data-price');
totalPrice = totalPrice + parseFloat(price) * num;
);
document.querySelector('.check-num').innerText= totalNum;
document.querySelector('.total-price').innerText = totalPrice;
window.onload=function()
let itemCheckboxes = document.querySelectorAll('.item-checkbox');
itemCheckboxes.forEach(function(itemCheckbox)
itemCheckbox.onchange = function()
updatePrice();
);
let minuses = document.querySelectorAll('.num-minus');
minuses.forEach(function(minus)
minus.onclick = function(event)
let num=minus.parentElement.querySelector('.num').value;
if(parseInt(num)>1)
minus.parentElement.querySelector('.num').value=parseInt(num)-1;
updatePrice();
;
);
let pluses = document.querySelectorAll('.num-plus');
pluses.forEach(function(plus)
plus.onclick = function(event)
let num=plus.parentElement.querySelector('.num').value;
plus.parentElement.querySelector('.num').value=parseInt(num)+1;
updatePrice();
);
参考技术B 一两句说不清楚………
用html css做出商品样子和购物车样子，
然后用javascript来对买这个动作做处理，把商品的信息存起来，通过js把商品信息传递给购物车，让购物车能够显示；
另一方面把信息交给php，写入数据库。
我这么说你明白了么……追问
谢谢你的回答，思路是明白了，具体的话html css都好说，js大概也还可以，php是不太明白怎么做，能不能写一段代码给我看一下，就是用html css js php写的购物车
追答你如果不用写进去数据库可以不用php,用php的话，其实就是商品信息放在表单里，提交给一个php文件，在php文件中接收商品的信息，然后连接数据库，保存就好了
我给你发个大概的例子；
//表单<html>
<head>
</head>
<body>
<form action="regist.php" method="get">
user:<input type="text" name="userName">
password:<input type="password" name="password"><br/>
<input type="submit" value="注册" name="res">
</form>
</body>
</html>
你能不能再追问一下 写不下
可以私信跟你聊么？大概是不用提交到数据库的。
追答可以
本回答被提问者和网友采纳以上是关于用html+css+js制作一个订单列表页面的主要内容，如果未能解决你的问题，请参考以下文章