114. web前端网页制作购物车网页设计实例大学生期末大作业 html+css+js

仙女网页制作

已于 2024-05-18 23:44:02 修改

阅读量2.2k

点赞数 18

分类专栏： Web网页设计实例农业文章标签： css html5 课程设计 jquery javascript java 3d

于 2024-04-23 20:18:06 首次发布

本文链接：https://blog.csdn.net/A240307/article/details/138136551

版权

Web网页设计实例同时被 2 个专栏收录

788 篇文章

订阅专栏

农业

8 篇文章

订阅专栏

一、前言

农产品购物车网页设计实例，应用html+css+js，购物车价格自动计算，菜单可删减，供大家参考。网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码，点赞收藏博文，您的支持是我创作的动力！3Q！

二、网页文件

三、网页效果

以下为网页正文（节选示例）：

四、代码展示

1.HTML

代码如下（节选示例）：

<html>
<head>
<meta name="keywords" content="农产品、蔬菜、水果"/>
<meta name="description" content="商城是专注于农产品、果蔬的销售、品种齐全。">
<meta charset="utf-8">
<title>我的农产品购物车~</title>
<link rel="shortcut icon" href="images/logo_01.png">
<link rel="stylesheet" href="css/shoppingCar.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/carts.css">

</head>

<body>

<div id="headCon">
   <div>
   <p>我的购物车~</p>
<ol>
<a href="order.html">我的订单</a>

</ol>
</div>
</div>

<div id="contentCon">
   <ul>
   <li>
   <p>我的商品（5）</p>
<span></span>
</li>
</ul>
<section class="cartMain">
<div class="cartMain_hd">
<ul class="order_lists cartTop">
<li class="list_chk">

<input type="checkbox" id="all" class="whole_check">
<label for="all"></label>
全选
</li>
<li class="list_con">商品信息</li>
<li class="list_info">商品参数</li>
<li class="list_price">单价（元）</li>
<li class="list_amount">数量</li>
<li class="list_sum">小计（元）</li>
<li class="list_op">操作</li>
</ul>
</div>

......

2.CSS

代码如下（节选示例）：

html,body{
position: relative;
width: 100%;
min-height: 950px;
}
input[type="checkbox"]{
display: none;
}
label{
position: relative;
display: inline-block;
z-index: 1;
border: 1px solid #b8b8b8;
margin-left: 10px;
border-radius: 1px;
width: 12px;
height: 12px;
cursor: pointer;
}
label.mark{
background: url("../images/mark1.png") no-repeat -1px -1px;
}

a:hover{
color: #fb0000;
text-decoration: underline;
}

.cartMain{
position: relative;
width: 1200px;
min-width: 1200px;
max-width: 1200px;
margin: 0 auto;
padding: 0px 0px 100px;
min-height: 210px;
}
/*购物车头部*/
.cartMain_hd{
background:#eee;
width: 1200px;
height: 50px;
line-height: 50px;
color: #3c3c3c;
}
.cartMain_hd .cartTop{
height: 50px;
}
.cartMain_hd .cartTop .list_chk{
width: 80px;
text-indent: 30px;
}
.cartMain_hd .cartTop .list_con{
width: 312px;
}
.cartMain_hd .cartTop .list_chk label{
position: absolute;
left: 10px;
top:19px;
margin: 0;
}
.cartMain_hd .cartTop .list_info{
padding:0px;
text-indent: 40px;
}
.cartMain_hd .cartTop .list_con{
text-indent: 140px;
}

.cartBox{
width: 100%;
margin-bottom: 15px;
}
.cartBox .shop_info{
position: relative;
width: 100%;
height: 38px;
background-color: #fff;
line-height: 38px;
vertical-align: baseline;
}
.cartBox .shop_info .all_check{
position: relative;
float: left;
width: 30px;
height: 38px;
}

.cartBox .shop_info .all_check input[type="checkbox"]{
position: absolute;
z-index: 0;
left: -20px;
top: -20px;
}
.cartBox .shop_info .all_check .shop{
position: absolute;
top:13px;
}
.cartBox .shop_info .shop_name{
float: left;
}

/*商品列表*/
.cartBox .order_content{
border-top: 1px solid #ccc;
}
.cartBox .order_content a{
display: block;
}
.order_lists{
width: 100%;
height: 130px;
border-bottom: 1px solid #e7e7e7;
}
.order_lists:last-child{
border-bottom: none;
}
.order_lists li{
float: left;
height: 100%;
}

.order_lists .list_chk{
position: relative;
width: 50px;
}
.order_lists .list_chk input[type="checkbox"]{
position: absolute;
z-index: 0;
left: -20px;
top: -20px;
}
.order_lists .list_chk label{
margin: 50px 0 0 24px;
}

.order_lists .list_con{
width: 342px;
}

......

3.JS

代码如下（节选示例）：

/**
* Created by Administrator on 2024/4/19.
*/

$(function () {

//全局的checkbox选中和未选中的样式
var $allCheckbox = $('input[type="checkbox"]'), //全局的全部checkbox
$wholeChexbox = $('.whole_check'),
$cartBox = $('.cartBox'), //每个商铺盒子
$shopCheckbox = $('.shopChoice'), //每个商铺的checkbox
$sonCheckBox = $('.son_check'); //每个商铺下的商品的checkbox
$allCheckbox.click(function () {
if ($(this).is(':checked')) {
$(this).next('label').addClass('mark');
} else {
$(this).next('label').removeClass('mark')
}
});

//===============================================全局全选与单个商品的关系================================
$wholeChexbox.click(function () {
var $checkboxs = $cartBox.find('input[type="checkbox"]');
if ($(this).is(':checked')) {
$checkboxs.prop("checked", true);
$checkboxs.next('label').addClass('mark');
} else {
$checkboxs.prop("checked", false);
$checkboxs.next('label').removeClass('mark');
}
totalMoney();
});

$sonCheckBox.each(function () {
$(this).click(function () {
if ($(this).is(':checked')) {
//判断：所有单个商品是否勾选
var len = $sonCheckBox.length;
var num = 0;
$sonCheckBox.each(function () {
if ($(this).is(':checked')) {
num++;
}
});
if (num == len) {
$wholeChexbox.prop("checked", true);
$wholeChexbox.next('label').addClass('mark');
}
} else {
//单个商品取消勾选，全局全选取消勾选
$wholeChexbox.prop("checked", false);
$wholeChexbox.next('label').removeClass('mark');
}
})
})

//=======================================每个店铺checkbox与全选checkbox的关系/每个店铺与其下商品样式的变化===================================================

//店铺有一个未选中，全局全选按钮取消对勾，若店铺全选中，则全局全选按钮打对勾。
$shopCheckbox.each(function () {
$(this).click(function () {
if ($(this).is(':checked')) {
//判断：店铺全选中，则全局全选按钮打对勾。
var len = $shopCheckbox.length;
var num = 0;
$shopCheckbox.each(function () {
if ($(this).is(':checked')) {
num++;
}
});
if (num == len) {
$wholeChexbox.prop("checked", true);
$wholeChexbox.next('label').addClass('mark');
}

//店铺下的checkbox选中状态
$(this).parents('.cartBox').find('.son_check').prop("checked", true);
$(this).parents('.cartBox').find('.son_check').next('label').addClass('mark');
} else {
//否则，全局全选按钮取消对勾
$wholeChexbox.prop("checked", false);
$wholeChexbox.next('label').removeClass('mark');

//店铺下的checkbox选中状态
$(this).parents('.cartBox').find('.son_check').prop("checked", false);
$(this).parents('.cartBox').find('.son_check').next('label').removeClass('mark');
}
totalMoney();
});
});

//========================================每个checkbox与其下商品的checkbox的关系======================================================

//店铺$sonChecks有一个未选中，全选按钮取消选中，若全都选中，则全选打对勾
$cartBox.each(function () {
var $this = $(this);
var $sonChecks = $this.find('.son_check');
$sonChecks.each(function () {
$(this).click(function () {
if ($(this).is(':checked')) {
//判断：如果所有的$sonChecks都选中则全选打对勾！
var len = $sonChecks.length;
var num = 0;
$sonChecks.each(function () {
if ($(this).is(':checked')) {
num++;
}
});
if (num == len) {
$(this).parents('.cartBox').find('.shopChoice').prop("checked", true);
$(this).parents('.cartBox').find('.shopChoice').next('label').addClass('mark');
}

} else {
//否则，店铺全选取消
$(this).parents('.cartBox').find('.shopChoice').prop("checked", false);
$(this).parents('.cartBox').find('.shopChoice').next('label').removeClass('mark');
}
totalMoney();
});
});
});

//=================================================商品数量==============================================
var $plus = $('.plus'),
$reduce = $('.reduce'),
$all_sum = $('.sum');
$plus.click(function () {
var $inputVal = $(this).prev('input'),
$count = parseInt($inputVal.val())+1,
$obj = $(this).parents('.amount_box').find('.reduce'),
$priceTotalObj = $(this).parents('.order_lists').find('.sum_price'),
$price = $(this).parents('.order_lists').find('.price').html(), //单价
$priceTotal = $count*parseInt($price.substring(1));
$inputVal.val($count);
$priceTotalObj.html('￥'+$priceTotal);
if($inputVal.val()>1 && $obj.hasClass('reSty')){
$obj.removeClass('reSty');
}
totalMoney();
});

$reduce.click(function () {
var $inputVal = $(this).next('input'),
$count = parseInt($inputVal.val())-1,
$priceTotalObj = $(this).parents('.order_lists').find('.sum_price'),
$price = $(this).parents('.order_lists').find('.price').html(), //单价
$priceTotal = $count*parseInt($price.substring(1));
if($inputVal.val()>1){
$inputVal.val($count);
$priceTotalObj.html('￥'+$priceTotal);
}
if($inputVal.val()==1 && !$(this).hasClass('reSty')){
$(this).addClass('reSty');
}
totalMoney();
});

......