05购物车静态

于 2024-07-19 14:47:52 发布
阅读量80 收藏
点赞数 3
文章标签： es6 javascript 前端 es 开发语言 html r语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64904350/article/details/140549280
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 450px;
            padding: 10px;
            border: 1px solid #ccc;
            margin: 20px auto;
            line-height: 30px;
        }

        .title {
            font-size: 24px;
            color: burlywood;
            font-weight: 800;

        }

        .container table {
            color: #333;
            font-size: 12px;
            margin: 10px 0px;
        }

        .head {
            background-color: aquamarine;
        }

        tr img {
            width: 50px;
            height: 30px;
            display: block;
            float: left;
            margin: 5px;
        }

        .container .num {
            width: 50px;
        }

        .del .go {
            cursor: pointer;
        }

        .total {
            font-size: 24px;
            font-family: 900;
            color: red;
            margin: 10px auto;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="title">
            全部商品
        </div>
        <table>
            <tr class="head">
                <td>
                    <input type="checkbox"> <span>全选</span>
                </td>
                <td>
                    商品
                </td>
                <td>
                    单价
                </td>
                <td>
                    数量
                </td>
                <td>
                    小计
                </td>
                <td>
                    操作
                </td>
            </tr>

            <tr data-id="">
                <td>
                    <input type="checkbox" checked>
                </td>
                <td>
                    <img src="./imgs/a.jpg" alt="">
                    <p>东西1</p>
                </td>
                <td>
                    ￥100
                </td>
                <td>
                    <span>-</span>
                    <input type="number" class="num" value="200">
                    <span>+</span>
                </td>
                <td>
                    小计￥100
                </td>
                <td>
                    <p class="del">删除</p>
                </td>
            </tr>
        </table>
        <div>
            <span>总价：</span>
            <div class="total">100</div>
            <div class="go">去结算</div>
        </div>
    </div>
    <script>

    </script>
</body>

</html>

学前端的坤坤bond
关注
前端学习（146）：伪类选择器checked和disable和focus
歌谣的博客
12-18 639
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
vue3简单的购物车静态页面
weixin_55573035的博客
09-16 2105
vue 3 简易购物车
JQuery绑定事件
04-15
JQuery绑定事件 Js实现 需要理解的可以下载
Jquery事件绑定
过客如期的博客
02-01 3787
一，前言 1.jquery有四种绑定事件的方式。bind,live,delegate,on。其中live已被移除，bind和delegate底层都是on实现的。 2.jquery建议我们使用on来绑定事件。 3.除原生事件外，jquery支持绑定自定义事件。 一，$(selector).on() 1.$(selector).on(type,[selector],[data],fn)。接受四个参数： type 是事件的类型， selector 代表选择器,当selector参数不为空或者null时，那么事件不
jQuery事件绑定
m0_67388537的博客
07-07 2444
jQuery 事件对象常用属性也与之前学过的 DOM 事件对象几乎一致，多了一个。旧的 jQuery 事件绑定方法如。jQuery 允许给同一个 jQ 对象的同一个事件绑定多个不同的事件处理函数。jQuery 事件中的事件对象通过事件处理函数的形参获取，事件中的。指向绑定事件的 jQuery 对象代表的 DOM 对象，如果使用。等都可以使用第一种方式绑定事件，但也有特殊的如输入框的。方式添加的事件委托，委托事件处理函数中的。上的属性，与原生事件中的事件对象一致。jQuery 事件中的。
Jquery中bind和live的区别
czs1012的专栏
12-20 468
Jquery中绑定事件有三种方法：以click事件为例    （1）target.click(function(){});    （2）target.bind("click",function(){});    （3）target.live("click",function(){}); 第一种方法很好理解，其实就和普通JS的用法差不多，只是少了一个on而已 第二、三种方法都是绑定事件，但
购物车静态页面设计
01-16
在网页设计领域，购物车静态页面是电商网站中不可或缺的一部分，它承载了用户选择商品、查看数量、调整选项以及结算等功能。在这个过程中，设计出既美观又实用的购物车页面对于提升用户体验至关重要。以下我们将详细...
购物车_购物车_静态页面_
09-30
在IT行业中，构建一个购物车静态页面是网页开发的基础任务之一，主要涉及到前端技术，如HTML和CSS。这里我们将深入探讨这些技术以及如何利用它们来创建一个类似淘宝购物车的功能。 首先，我们要理解购物车页面的...
购物车静态页面
08-31
本项目名为“购物车静态页面”，意味着它是一个不涉及服务器交互的简单购物车实现，主要关注用户界面和基本功能。下面我们将深入探讨这个项目可能包含的知识点。 首先，我们来分析“天删改查”这四个字。在编程领域...
购物车 静态页面 含javascript
08-08
本项目“购物车静态页面含JavaScript”就是一个专注于实现这些功能的示例。这个页面是静态的，意味着它不依赖服务器端的数据交互，而是通过JavaScript来处理用户的交互和页面动态更新。 首先，让我们深入了解一下...
jQuery---绑定事件
Philo的博客
01-23 7420
js—绑定事件 文章目录一、最常用方法二、bind函数三、on函数四、delegate函数 一、最常用方法 $(“元素选择器”).事件名称(匿名函数) 举例1： //这里的button为元素选择器，click为鼠标点击事件 $("button").click(function(){ //函数内容 }) 举例2： //这里的#btn1为id选择器即id名为btn1的元素，mouseenter为鼠标聚焦事件 $("#btn1").mouseenter(function(){
jQuery事件绑定（三）
bwf_erg的博客
01-03 284
四. delegate方法：向匹配元素添加一个或多个事件处理程序 在jquery1.4增加，适用所有版本，但官方推荐使用on方法代替delegate方法 使用方法： $(selector).delegate(childSelector,event,data,function)      参数： childSelector: 必需项；需要添加事件处理程序的元素，一般为selector的子元
jQuery绑定事件的方法
qiangzhogshou的博客
11-29 151
一、bind方法绑定 <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.3.1.js"></script> </head> <body> <input typ...
jQuery的事件绑定
aqzengkuasheng的博客
02-18 172
bind()绑定事件 为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <!
JQuery 事件绑定
南淮北安的博客
04-06 357
文章目录一、JQuery 标准的绑定方式二、on绑定事件/off解除绑定三、事件切换：toggle 一、JQuery 标准的绑定方式 * jq对象.事件方法(回调函数)； * 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。 * 表单对象.submit();//让表单提交 <script src="js/jquery-3.3.1.min.js"></s...
jquery 绑定事件
态度决定一切，努力奋斗ing QQ:8790671
07-20 87
//textarea length属性为 'mylength' 键盘抬起验证事件 span cation属性 'num' 赋值$("textarea[length='lang']").bind("mouseover blur keyup",function(){$(this).siblings("span[name='inputnum']").html($(this).val().length);...
uniapp购物车静态页面
最新发布
04-12
下面是一个简单的UniApp购物车静态页面的介绍： 1. 页面结构： - 顶部导航栏：显示页面标题和返回按钮。 - 商品列表：展示购物车中的商品信息，包括商品图片、名称、价格和数量等。 - 底部工具栏：显示购物车的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值