HTML 实现购物网站

最新推荐文章于 2024-05-24 13:24:31 发布
最新推荐文章于 2024-05-24 13:24:31 发布
阅读量1w 收藏 157
点赞数 22
文章标签： html servlet 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48516121/article/details/127264963
版权

一、程序代码：

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="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="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="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="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="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="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;
}

二、效果图

 

外太空程序员
关注
  • 22
    点赞
  • 踩
  • 157
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5购物网站带登录
07-11
《HTML5购物网站实现详解：从登录到购物车》 在现代互联网技术中，HTML5作为新一代的网页标准，以其强大的功能和丰富的交互性，在构建购物网站方面扮演着至关重要的角色。结合CSS3和JavaScript（包括jQuery库），...
商城商品列表展示的完整代码
02-21
、初始化表格请求的url：/item/list 2、Datagrid默认请求参数： 1、page：当前的页码，从1开始。 2、rows：每页显示的记录数。 3、响应的数据：json数据。EasyUIDataGridResult
html+css+简单的js制作的超市页面
qq_57049935的博客
09-12 3651
css部分：此部分先将全体对象的间距设置为0，字体设置为微软雅黑，设置所有a标签的颜色并且取消a标签的下划线。然后设计版心的宽度，注意每个部分都会使用版心，因此不设计版心的高度，由具体部分具体给指定的高度。根据上图成果，此部分是在版心之中分为左右两部分进行设计，使用div将其分为两块，然后进行css的样式设计。分为三部分进行设计，左边一个logo，中间搜索框以及下面的文字，右边设计扫描的二维码。这里注意设计给的是具体的位置，所以给宽度和高度时要使用工具确定具体的px值。
【简单html静态网页代码】基于HTML在线图书商城购物项目设计与实现
而风不止
01-04 1712
📂文章目录二、✍️网站描述三、📚网站介绍四、🌐网站演示五、⚙️ 网站代码🧱HTML结构代码💒CSS样式代码六、🥇 如何让学习不再盲目七、🎁更多干货 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】 # 一、👨‍🎓网站题目 🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。 二、✍️网站描述 🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+C
html静态网站基于品优购电商购物网站网页设计与实现共计3个页面 html+css+javascript网页设计实例 企业网站制作
最新发布
网页设计与制作
05-24 436
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
基于HTML电商购物项目的设计与实现——html+css+javascript+jquery+bootstarp响应式图书商城
dreamweaver网页设计
03-08 600
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。 ⚽精彩专栏
用HTML写一个简单的静态购物网站
捉只树袋熊的博客
07-27 2952
用HTML写一个简单的静态购物网站
制作购物网页设计（html+css）
热门推荐
木头博客
06-04 4万+
一、实现效果： 点击右上角按钮可实现页面跳转，及点击“今日推荐”里的图片可直接跳转到该官网，点击“…区”可呈现出相关按钮 所有的图片可在耐克官网搜到，资源已上传资源库， 有疑问或需要资源可直接加V：mutou88848 二、具体代码： style标签中时css部分，要求html与css分开显示可直接复制粘贴。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
html简单网页代码：于品优购电商购物网站网页设计与实现共计3个页面 html+css+javascript网页设计实例 企业网站制作
12-17 4242
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。 ⚽精彩专栏
分享111个HTML电子商务模板，总有一款适合您
zy0412326的专栏
02-14 1206
HTML
基于HTML5的年货购物网站前端网页设计
毕业作品网站
10-02 7170
JadeSnow购物网站的开发，在刚开始的时候我和我的组员讨论一下网站的布局，到底写几个页面，以及网站的页面的分配，在分配好以后我们开始讨论网站的页面的大体颜色，因为我们想做一个颜色比较鲜明的网站，所以我们就用了红黑两种颜色。颜色设置好以后我们就开始铺页面，在铺页面的过程中我们会进行交流，尽量做到页面的对称。id=10401页面铺好以后我们就开始实现其中的一些所必须的功能，以及数据的添加，后台编写，以及数据库的创建。考虑HTML5购物网站的定位、主要受众群体和设计目标，我们采用的设计风格简洁大方，稳重。
基于Html+css+js实现的静态购物网站
06-30
2.添加并设计网站导航栏(导航栏目内容和样式自定)，链接为空链接； 3.添加并设计商品轮播图，图片、位置、大小等自定义; 4.设计商品分类展示效果(样式自定义)，每件商品必须有：商品名称、图片、价格内容；商品数目...
产品展示模版html 好用
07-07
这个是产品得模板，有相关得展示，值得你拥有 ！这个是产品得模板，有相关得展示，值得你拥有 ！
购物商城 html
04-23
此项目为实操项目简化版，包含html静态页面，JS，CSS，能实现网站模板基本要求
网页购物车源代码
03-18
网页购物车开发源代码，使用eclipse编写
购物网站 html
04-12
在构建一个购物网站的过程中，HTML（HyperText Markup Language）起着至关重要的作用，它是网页内容的基础结构语言。HTML用于创建网页布局，定义文本样式，插入图像、视频等多媒体元素，并设置超链接，使得用户能够...
手机购物商城网站HTML源码
12-04
手机购物商城网站HTML源码是构建移动互联网时代电商平台的基础元素，它主要由HTML（超文本标记语言）编写，用于展示商品、实现购物功能、管理用户账户等。在这个压缩包中，包含了一系列与购物商城相关的网页文件，...
HTML+CSS购物网站——小米有品
03-23
HTML和CSS是构建网页的基本技术，本项目是一个以"小米有品"为主题的购物网站实现，涵盖了用户在在线购物过程中可能遇到的各种页面。下面将详细解释这些知识点。 首先，HTML（HyperText Markup Language）是用于创建...
制作电商页面（Html）
jjlkjjlk的博客
10-05 2081
HTML制作电商网页
商品详情页面html代码
05-02
抱歉，我无法提供具体的商品详情页面 HTML 代码，因为每个网站的代码结构和样式都是独特的。不过，一般的商品详情页面通常包含以下组成部分： 1. 商品图片展示区域 2. 商品标题 3. 商品价格 4. 商品描述和特性 5. 商品规格参数 6. 商品评价和评论 7. 加入购物车和立即购买按钮 8. 相关商品推荐 这些元素的具体排版和样式可能因网站而异。如果您需要更详细的帮助，建议您参考具体的网站或者向该网站的技术支持人员咨询。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值