HTML 实现购物网站

一、程序代码：

1.HTML代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>结算清单</title><script src="js.js"></script><link rel="stylesheet" href="qd.css"></head>
<body>
<table id="cartTable"><thead><tr><th><label><input id="selectAll" class="check-all check" type="checkbox"/>&nbsp;全选</label></th><th>序号</th><th>商品</th><th>书籍名称</th><th>分类</th><th>出版日期</th><th>价格</th><th>数量</th><th>小计</th><th>操作</th></tr></thead><tbody><tr><td class="checkbox"><input id="item" class="check-one" type="checkbox" onclick="getStart()"/></td><td>1</td><td class="goods"><img src="data:images/phone1.jpg" alt="" /><span>jQuery实战</span></td><td class="sm">jQuery实战</td><td>技术</td><td class="sj">2015-11-19</td><td class="price">35.00</td><td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="1" /><span class="add">+</span></td><td class="subtotal">35.00</td><td class="operation"><span class="delete">删除</span></td></tr><tr><td class="checkbox"><input id="item" class="check-one" type="checkbox" onclick="getStart()"/></td><td>2</td><td class="goods"><img src="data:images/phone1.jpg" alt="" /><span>jQuery实战2</span></td><td class="sm">jQuery实战2</td><td>技术</td><td class="sj">2015-11-19</td><td class="price">35.00</td><td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="1" /><span class="add">+</span></td><td class="subtotal">35.00</td><td class="operation"><span class="delete">删除</span></td></tr><tr><td class="checkbox"><input id="item" class="check-one" type="checkbox" onclick="getStart()"/></td><td>3</td><td class="goods"><img src="data:images/phone2.jpg" alt="" /><span>红楼梦</span></td><td class="sm">红楼梦</td><td>文学</td><td class="sj">2015-11-19</td><td class="price">35.00</td><td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="1" /><span class="add">+</span></td><td class="subtotal">35.00</td><td class="operation"><span class="delete">删除</span></td></tr><tr><td class="checkbox"><input id="item" class="check-one" type="checkbox" onclick="getStart()"/></td><td>4</td><td class="goods"><img src="data:images/phone2.jpg" alt="" /><span>红楼梦2</span></td><td class="sm">红楼梦2</td><td>文学</td><td class="sj">2015-11-19</td><td class="price">35.00</td><td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="1" /><span class="add">+</span></td><td class="subtotal">35.00</td><td class="operation"><span class="delete">删除</span></td></tr><tr><td class="checkbox"><input id="item" class="check-one" type="checkbox" onclick="getStart()"/></td><td>5</td><td class="goods"><img src="data:images/phone3.jpg" alt="" /><span>生活的书</span></td><td class="sm">生活的书</td><td>生活</td><td class="sj">2015-11-19</td><td class="price">35.00</td><td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="1" /><span class="add">+</span></td><td class="subtotal">35.00</td><td class="operation"><span class="delete">删除</span></td></tr><tr><td class="checkbox"><input id="item" class="check-one" type="checkbox" onclick="getStart()"/></td><td>6</td><td class="goods"><img src="data:images/phone3.jpg" alt="" /><span>生活的书2</span></td><td class="sm">生活的书2</td><td>生活</td><td class="sj">2015-11-19</td><td class="price">35.00</td><td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="1" /><span class="add">+</span></td><td class="subtotal">35.00</td><td class="operation"><span class="delete">删除</span></td></tr></tbody>
</table><div class="foot" id="foot"><div class="fr closing" onclick="showTotal()">结 算</div><div class="fr total">合计：￥<span id="priceTotal">0.00</span></div><div class="fr selected">已选商品<span id="selectedTotal">0</span>件</div>
</div>
</body>
</html>

1.2JS代码

window.onload = function() {var oSelect = document.getElementById("selectAll");var aItems = document.getElementsByClassName("check-one");var oSum = document.getElementById("priceTotal");var oGoods = document.getElementById("selectedTotal");// 全选oSelect.onclick = function() {if (oSelect.checked) {for (var i = 0; i < aItems.length; i++) {if (aItems[i].checked) {} else {oSelect.checked = true;aItems[i].checked = true;getStart();}}} else {//全消for (var i = 0; i < aItems.length; i++) {if (aItems[i].checked) {aItems[i].checked = false;oSum.innerText = 0;oGoods.innerText = 0;} else {}}}}
}function getStart() {var oSelect = document.getElementById("selectAll");var aItems = document.getElementsByClassName("check-one");var oSum = document.getElementById("priceTotal");var oGoods = document.getElementById("selectedTotal");var aSubtotal = document.getElementsByClassName("subtotal");var aCountInput = document.getElementsByClassName("count-input");var a = 0;for (var i = 0; i < aItems.length; i++) {if (aItems[i].checked) {chooseIt(i);a++;if (a == 3) {oSelect.checked = true; //当所有选项都选到时,全选按钮自动勾选}} else {oSelect.checked = false; //任意一个选项没勾选,全选按钮不选chooseIt(i);}}
}function getSum() {var temp = 0;var oSum = document.getElementById("priceTotal");var aItems = document.getElementsByClassName("check-one");var aSubtotal = document.getElementsByClassName("subtotal");//循环,计算选中的商品的总价格for (var j = 0; j < aItems.length; j++) {if (aItems[j].checked) {temp += parseInt(aSubtotal[j].innerText);} else {temp += 0;}}oSum.innerText = temp;
}function getGoods() {var num = 0;var oGoods = document.getElementById("selectedTotal");var aItems = document.getElementsByClassName("check-one");var aCountInput = document.getElementsByClassName("count-input");//循环,计算选中的商品的总数量for (var i = 0; i < aItems.length; i++) {if (aItems[i].checked) {num += parseInt(aCountInput[i].value);} else {num += 0;}}oGoods.innerText = num;
}function getTotal(n) {var aPrice = document.getElementsByClassName("price");var aCountInput = document.getElementsByClassName("count-input");var aSubtotal = document.getElementsByClassName("subtotal");//计算单件商品的总价var oMoney = parseInt(aPrice[n].innerText) * parseInt(aCountInput[n].value);aSubtotal[n].innerText = oMoney;
}function getPlus(n) {var aCountInput = document.getElementsByClassName("count-input");//增加单件商品的数量var temp = parseInt(aCountInput[n].value) + 1;aCountInput[n].value = temp;
}function getReduce(n) {var aCountInput = document.getElementsByClassName("count-input");//减少单件商品的数量var temp = parseInt(aCountInput[n].value) - 1;aCountInput[n].value = temp;//当剪到数量为1件时,停止减if (aCountInput[n].value < 1) {aCountInput[n].value = 1;}
}function showTotal() {var money = document.getElementById("priceTotal").innerText;alert("你总共花了" + money + "money");
}function chooseIt(i) {var aAdd = document.getElementsByClassName("add");var aReduce = document.getElementsByClassName("reduce")var aDel = document.getElementsByClassName("delete");var oTab = document.getElementById("cartTable");aAdd[i].onclick = function() {getPlus(i); //增加单件商品数量getTotal(i); //计算单间商品总价getSum(); //计算总商品价格getGoods(); //计算总商品数量}aReduce[i].onclick = function() {getReduce(i); //减少单件商品数量getTotal(i);getSum();getGoods();}aDel[i].onclick = function() {var oDialog = confirm("确定要删除吗?");if (oDialog) {oTab.tBodies[0].removeChild(aDel[i].parentNode.parentNode);getGoods();getSum();}getStart(); //更新表格中行的数量}getGoods(); //显示初始总商品数量(在勾选了该商品,但未增加数量时,显示默认数量1)getSum(); //显示初始商品总价(在勾选了该商品,但未增加数量时,显示默认总价为1件商品的金额)
}

1.3CSS代码

* {margin: 0;padding: 0;
}
a {color: #666;text-decoration: none;
}
body {padding: 20px;color: #666;
}
.fl{float: left;
}
.fr {float: right;
}
table {border-collapse: collapse;border-spacing: 0;border: 0;text-align: center;width: 1400px;
}
th, td {border: 1px solid #CADEFF;
}
th {background: #e2f2ff;border-top: 3px solid #a7cbff;height: 30px;
}
td {padding: 10px;color: #444;
}
tbody tr:hover {background: RGB(238,246,255);
}
.checkbox {width: 60px;
}
.goods {width: 80px;/* background-color: red; */text-align: center;
}
.sm {width: 120px;/* background-color: red; */text-align: center;
}
.sj {width: 150px;/* background-color: red; */text-align: center;
}
.goods img{margin-left: 70px;width: 80px;/* border: #A7CBFF 2px solid; */display: inline-block;/* float: left; */text-align:center;
}
.goods span {display: block;width: 80px;margin-top: 20px;text-align: center;margin-left: 70px;/* float: left; */
}
.price {width: 80px;
}
.count {width: 90px;
}
.count .add, .count input, .count .reduce {float: left;margin-right: -1px;position: relative;z-index: 0;
}
.count .add, .count .reduce {height: 23px;width: 17px;border: 1px solid #e5e5e5;background: #f0f0f0;text-align: center;line-height: 23px;color: #444;
}
.count .add:hover, .count .reduce:hover {color: #f50;z-index: 3;border-color: #f60;cursor: pointer;
}
.count input {width: 50px;height: 15px;line-height: 15px;border: 1px solid #aaa;color: #343434;text-align: center;padding: 4px 0;background-color: #fff;z-index: 2;
}
.subtotal {width: 80px;color: red;font-weight: bold;
}
.operation {width: 80px;
}
.operation span:hover, a:hover {cursor: pointer;color: red;text-decoration: underline;
}
img {width: 100px;height: 80px;/*border: 1px solid #ccc;*/margin-right: 10px;float: left;
}.foot {width: 1400px;margin-top: 10px;color: #666;height: 48px;border: 1px solid #c8c8c8;background-color: #eaeaea;background-image:linear-gradient(RGB(241,241,241),RGB(226,226,226));position: relative;z-index: 8;
}
.foot div, .foot a {line-height: 48px;height: 48px;
}
.foot .select-all {width: 100px;height: 48px;line-height: 48px;padding-left: 5px;color: #666;
}
.foot .closing {border-left: 1px solid #c8c8c8;width: 100px;text-align: center;color: #000;font-weight: bold;background: RGB(238,238,238);cursor: pointer;
}
.foot .total{margin: 0 20px;cursor: pointer;
}
.foot  #priceTotal, .foot #selectedTotal {color: red;font-family: "Microsoft Yahei";font-weight: bold;
}
.foot .selected {cursor: pointer;
}
.foot .selected .arrow {position: relative;top:-3px;margin-left: 3px;
}
.foot .selected .down {position: relative;top:3px;display: none;
}
.show .selected .down {display: inline;
}
.show .selected .up {display: none;
}
.foot .selected:hover .arrow {color: red;
}
.foot .selected-view {width: 935px;border: 1px solid #c8c8c8;position: absolute;height: auto;background: #ffffff;z-index: 9;bottom: 48px;left: -1px;display:none;
}
.show .selected-view {display: block;
}
.foot .selected-view div{height: auto;
}
.foot .selected-view .arrow {font-size: 16px;line-height: 100%;color:#c8c8c8;position: absolute;right: 330px;bottom: -9px;
}
.foot .selected-view .arrow span {color: #ffffff;position: absolute;left: 0px;bottom: 1px;
}
#selectedViewList {padding: 20px;margin-bottom: -20px;
}
#selectedViewList div{display: inline-block;position: relative;width: 100px;height: 80px;border: 1px solid #ccc;margin: 10px;
}
#selectedViewList div span {display: none;color: #ffffff;font-size: 12px;position: absolute;top: 0px;right: 0px;width: 60px;height: 18px;line-height: 18px;text-align: center;background: RGBA(0,0,0,.5);cursor: pointer;
}
#selectedViewList div:hover span {display: block;
}

二、效果图

HTML 实现购物网站相关推荐

电商购物网站开发需要注意这些问题
在当下的网络营销市场中,电商购物网站之间的竞争还是很激烈的,各行各业的企业纷纷掺入其中,这势必会为当下的营销市场带来混乱且持久的战役.而在如此激烈的购物网站市场竞争中,如果想要做出改变就要懂得购物网站 ...
基于php的购物网站源代码,基于PHP的购物网站毕业设计(含源文件).doc
毕业论文题目: 基于PHP的网上购物网站院系名称: 专业班级: 学生姓名: 学号: 指导教师: 教师职称: 摘要随着Internet技术的发展,人们的日常生活已经离不开网络.未来社会人们的生 ...
从0开始利用宝塔linux面板+DSShop搭建一个简单的购物网站
宝塔linux面板的安装详情在这德尚官网利用DSSshop搭建一个单店铺商城在软件商店一键部署找到DSSshop点击一键安装在网站设置出添加一下ip 添加完之后在浏览器上方输入ip地址进行安 ...
经典网页设计：10个响应式设计的国外购物网站
今天我想与大家分享电子商务主题的网站设计,更精确地说是为设计在线商店提供新思想.每个人都知道移动技术的市场发展迅速,已经很难找到一个人没有手机的人了.响应设计给我们提供了一个巨大的机遇:站点的访问量的 ...
paylinks.php_毕业设计-基于PHP的网上购物网站系统设计
毕业设计-基于PHP的网上购物网站系统设计,共45页,14912字,附完整的程序源代码.包括前台,后台的实现,先运行phpStudyAdmin后打开dzsw/install.php 摘要随着Inte ...
商城是用jsp还是php,建设网上购物网站使用JSP系统还是ASP系统
网上购物系统是用来建设网上商城网站的体系架构,也成为电商购物系统和商城系统.网上商城系统的种类有不少,如jsp网上购物系统.asp购物系统和php网购系统等.今天小编来和大家探讨一下建设网上商城网站是 ...
学生PHP校园超市网站制作学生PHP网页毕设源码学生动态数据库网站作品 PHP电子商务商城购物网站
学生PHP校园超市商城购物网站作品源码 PHP网站作品介绍作品介绍前端介绍后台介绍 PHP网站作品截图前端截图后台截图作品源地址 PHP网站作品介绍作品介绍本大学生动态网站毕业设计网页 ...
php实现一个简单的购物网站
实现一个简单的购物网站一.考试时间:8小时二.开发工具:DW 三.数据库:见附件四.需要实现的页面: Index:浏览商品页面,显示商品列表,用户可以点击"购买". View ...
购物网站的商品推荐算法有哪些？
作者:Razzit 链接:https://www.zhihu.com/question/19967564/answer/25015492 来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商 ...
javascript网页设计期末作业购物网站
本次主要介绍下之前上传的作业的主要功能,网页下载地址: 网页设计期末作业购物网站如果对本文章内容还有疑问可以观看视频,也可以在评论区留言: javascript 网页设计期末作业购物网站网页实 ...

HTML 实现购物网站

HTML 实现购物网站相关推荐

最新文章

热门文章