HTML+JS+CSS 小练习

最新推荐文章于 2022-08-06 08:34:41 发布
最新推荐文章于 2022-08-06 08:34:41 发布
阅读量630 收藏 8
点赞数
分类专栏： html 文章标签： css html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47887988/article/details/123515939
版权

目标图片：

  

主要实现功能：

1、图片浏览

2、购物车数量加减

3、网页跳转

4、全选与全不选

5、删除购物车中物品

6、计算总价

代码（第一个页面）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中袖衬衣2015春季装新款时尚白领修身职业装</title>
    <style type="text/css">
        .four1{
            margin-top: 5px;
            height: 100%;
            width: 48%;
            float: left;
        }
        .f1{
            text-align: center;
            height: 500px;
            width: 500px;
        }
        .four2{
            margin-top: 5px;
            height: 100%;
            width: 52%;
            float: right;
        }
        .f2{
            font-size: 25px;
            line-height: 55px;
        }
        .four3{
            font-size: 35px;
            font-family: 华文楷体;
            position: center;
        }
        .four4{
            color: red;
            text-align: center;
            background-color: pink;
            border-radius: 5px;
            border: 1px solid red;
        }
        .four5{
            color: red;
            font-size: 35px;
        }
        .four6{

        }
        .four7{
            font-size: 34px;
        }
        .four8{
            font-size: 34px;
            color: coral;
            background-color: antiquewhite;
            border: 1px solid coral;
            width: 300px;
            border-radius: 5px;
        }
        .four9{
            font-size: 34px;
            color: white;
            background-color: orangered;
            border: 1px solid red;
            border-radius: 5px;
        }
        .four10{
            width: 90px;
            height: 25px;
            text-align: center;
        }
        .four11{
            line-height: 75px;
            outline-width: 50px;
        }
        .four12{
            line-height: 50px;
            width: 700px;
        }
        .box{
            width: 192px;
            height: 50px;
            margin: 0 auto;
        }
        #left,#center,#right{
            float: left;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: #eee;
            font-weight: bold;
            font-size: 18px;
            cursor: pointer;
        }
        #center{
            width: 90px;
            background: #fff;
            cursor: auto;
        }
        #right {
            float: right;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        <!-- 实现购物车内物品数量的变更 -->
        if (window.addEventListener) {
            window.addEventListener("load",init);
        }
        function init(){
            var left = document.getElementById("left");
            left.onclick = function (){
                leftNum();
            }
            var right = document.getElementById("right");
            right.onclick = function (){
                rightNum();
            }
            function leftNum(){
                var center = document.getElementById("center").innerHTML;
                if (center > 1) {
                    center--;
                    <!-- 实现购物车内物品数量减少 -->
                    currentNum(center);
                } else{
                    alert("购物车物品数不可以小于0");
                }
            }
            function rightNum(){
                var center = document.getElementById("center").innerHTML;
                if (center < 24) {
                    center++;
                    <!-- 购物车内物品数量增加 -->
                    currentNum(center);
                } else{
                    alert("最大库存为24件");
                }
            }
            function currentNum(num){
                <!-- 返回当前物品数目 -->
                center.innerHTML = num;
            }
        }
        function p1(){
            <!-- 点击小图片，浏览大图片（白色） -->
            var imgs=document.getElementsByTagName("img");
            imgs[0].setAttribute("src","images/pic4.png");
        }
        function p2(){
            <!-- 点击小图片，浏览大图片（粉色） -->
            var imgs=document.getElementsByTagName("img");
            imgs[0].setAttribute("src","images/pic2.png");
        }
        function p3(){
            <!-- 点击小图片，浏览大图片（蓝色） -->
            var imgs=document.getElementsByTagName("img");
            imgs[0].setAttribute("src","images/pic3.png");
        }
    </script>
</head>
<body>
<table class="four1">
    <tr>
        <td colspan="3" class="f1" id="p0"><img src="images/pic1.png" style="width: 600px;height: 600px"/></td>
    </tr>
    <tr style="text-align: center">
        <td><input type="image" src="images/pic4.png" style="width: 100px;height: 100px" onclick="p1()"/></td>
        <td><input type="image" src="images/pic2.png" style="width: 100px;height: 100px" onclick="p2()"/></td>
        <td><input type="image" src="images/pic3.png" style="width: 100px;height: 100px" onclick="p3()"/></td>
    </tr>
</table>
<div class="four2">
    <table class="f2">
        <tr>
            <td colspan="6" class="four3">中袖衬衣2015春季装新款时尚白领修身职业装</td>
        </tr>
        <tr>
            <td>价格</td>
            <td><del>￥180.00</del></td>
            <td> </td>
            <td> </td>
            <td>500</td>
            <td>650</td>
        </tr>
        <tr>
            <td>促销</td>
            <td class="four4">限时促销</td>
            <td class="four5">￥75.00</td>
            <td> </td>
            <td>交易成功</td>
            <td>累计评价</td>
        </tr>
        <tr>
            <td>配送</td>
            <td>云南昆明</td>
            <td>
                至
                <select name="place" class="four10">
                    <option value="0">北京</option>
                    <option value="1">天津</option>
                    <option value="2">南京</option>
                    <option value="3">上海</option>
                </select>
            </td>
            <td>包邮</td>
            <td> </td>
            <td> </td>
        </tr>
    </table>
        <hr align="left" color="pink" width="600px" size="2px" style="float: left"/>
    <div style="font-size: 25px;float: right">
        尺码助手
    </div>
    <table class="four11">
        <tr>
            <td class="four7">尺寸：</td>
            <td><input type="button" name="but1" value="S" style="width: 40px;height: 40px"/></td>
            <td><input type="button" name="but1" value="M" style="width: 40px;height: 40px"/></td>
            <td><input type="button" name="but1" value="L" style="width: 40px;height: 40px"/></td>
        </tr>
        <tr>
            <td class="four7">颜色分类：</td>
            <td style="height: 100px;width: 100px"><input type="image" src="images/pic4.png" style="height: 50px;width: 50px"></td>
            <td style="height: 100px;width: 100px"><input type="image" src="images/pic2.png" style="height: 50px;width: 50px"></td>
            <td style="height: 100px;width: 100px"><input type="image" src="images/pic3.png" style="height: 50px;width: 50px"></td>
        </tr>
        <tr>
            <td class="four7">数量：</td>
            <td colspan="2">
                <div class="box">
                    <div id="left"><</div>
                    <div id="center">1</div>
                    <div id="right">></div>
                </div>
            </td>
            <td>库存：24件</td>
        </tr>
    </table>
    <div>
        <input type="submit" name="submit" value="立即购买" class="four1 four8"/>
        <a href="4.1.html"><input type="button" name="button" value="加入购物车" class="four2 four9"/></a>
    </div>
    <table class="four12">
        <tr>
            <td>服务</td>
            <td colspan="3">
                <img src="images/sev.png" />
                &nbsp;7天退货
            </td>
        </tr>
        <tr>
            <td>支付</td>
            <td>
                <img src="images/l_4.png" />
                微信支付
            </td>
            <td>
                <img src="images/l_3.png" />
                支付宝支付
            </td>
            <td>
                <img src="images/l_1.png" />
                QQ支付
            </td>
        </tr>
    </table>
</div>

</body>
</html>

第二个页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <style type="text/css">
        #left,#center,#right{
            float: left;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: #eee;
            font-weight: bold;
            font-size: 18px;
            cursor: pointer;
        }
        #center{
            width: 90px;
            background: #fff;
            cursor: auto;
        }
        #right {
            float: right;
            cursor: pointer;
        }
        .tablebor{
            border: 1px solid #407D2A;
        }
        .tabl1{
            width: 100%;
            margin-top: 15px;
        }
        .cel1{
            width: 300px;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        if (window.addEventListener) {
            window.addEventListener("load",init);
        }
        function init(){
            var left = document.getElementById("left");
            left.onclick = function (){
                leftNum();
            }
            var right = document.getElementById("right");
            right.onclick = function (){
                rightNum();
            }
            function leftNum(){
                var center = document.getElementById("center").innerHTML;
                if (center > 1) {
                    center--;
                    <!-- 购物车内物品数量减少 -->
                    currentNum(center);
                } else{
                    alert("购物车物品数不可以小于0");
                }
            }
            function rightNum(){
                var center = document.getElementById("center").innerHTML;
                if (center < 24) {
                    center++;
                    <!-- 购物车内物品数量增加 -->
                    currentNum(center);
                } else{
                    alert("最大库存为24件");
                }
            }
            function currentNum(num){
                center.innerHTML = num;
                <!-- 购物车内物品当前数量 -->
                tol.innerHTML=num*75;
                <!-- 购物车内物品总价格 -->
                tol1.innerHTML=num*75;
                <!-- 购物车内物品总结算价格 -->
            }
        }
        function check(){
            <!-- 由于有两个全选，所以当第一个全选为true时，其他的全部勾选，为false，其他的全部不勾选；另一个false同理 -->
            var oInput=document.getElementsByName("product");
            for (var i=0;i<oInput.length;i++){
                if (document.getElementById("all").checked==true){
                    oInput[i].checked=true;
                }else if(document.getElementById("all1").checked==true){
                    oInput[i].checked=true;
                }else if (document.getElementById("all").checked==false){
                    oInput[i].checked=false;
                }else if (document.getElementById("all1").checked==false){
                    oInput[i].checked=false;
                }
            }
        }
        function delRow(){
            <!-- 删前当前购物车内物品 -->
            document.getElementById("myTable").deleteRow(2);
            <!-- 删除完全部物品后，总价格设为0 -->
            tol1.innerHTML=0;
        }
    </script>
</head>
<body>
<table class="tabl1" id="myTable">
    <tr>
        <td><input id="all" type="checkbox" value="全选" onclick="check();" /></td>
        <td>全选</td>
        <td class="cel1">商品信息</td>
        <td class="cel1">规格</td>
        <td class="cel1">单价（元）</td>
        <td class="cel1">数量（件）</td>
        <td class="cel1">金额（元）</td>
        <td class="cel1">操作</td>
    </tr>
    <tr id="row1">
        <td><input name="product" type="checkbox" value="1"/></td>
        <td colspan="7">&nbsp;&nbsp;店铺：时尚职装商城&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/water.png" />&nbsp;&nbsp;990552669</td>
    </tr>
    <tr id="row2">
        <td><input name="product" type="checkbox" value="2"/></td>
        <td><img src="images/pic2.png" style="width: 100px;height: 100px"/></td>
        <td style="text-align: center">
            <p>中袖衬衣2015春季新款</p>
            <p>白领时尚修身职业装</p>
        </td>
        <td style="text-align: center">
            <p>颜色：<input type="text" name="col" value="red" style="border:0px"/></p>
            <p>尺码：<input type="text" name="siz" value="m" style="border:0px"/></p>
        </td>
        <td style="color: red">
            <del>原价：100</del>
            <p>现价：75</p>
            <p style="border: 1px solid black;border-radius: 5px;text-align: center">卖家促销</p>
        </td>
        <td>
            <div class="box">
                <div id="left"><</div>
                <div id="center">2</div>
                <div id="right">></div>
            </div>
        </td>
        <td style="text-align: center">价格：</td>
        <td style="color: red;font-size: 30px;font-weight: bold;text-align: left" id="tol">150</td>
    </tr>
</table>
<table class="tablebor tabl1" style="background-color: gainsboro">
    <tr>
        <td><input id="all1" type="checkbox" value="全选" onclick="check();" /></td>
        <td>全选</td>
        <td><input id="b1" type="button" value="删除" onclick="delRow()" /></td>
        <td>加入收藏夹</td>
        <td>分享</td>
        <td style="width: 600px"> </td>
        <td style="text-align: right">合计（含运费）</td>
        <td style="font-size: 30px;color: red;font-weight: bold;text-align: center">￥：</td>
        <td style="font-size: 30px;color: red;font-weight: bold;text-align: left" id="tol1">150</td>
        <td><input type="submit" name="jiesuan" value="结算" style="color: red;width: 100px"/></td>
    </tr>
</table>
</body>
</html>

运行结果：

 

 

内心OS：应该，还挺像的吧：）

图片是我直接从原图上截取下来的，所以有点糊。

 

千和儿
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html+css+js之20个练手小项目-relax app
qq_40312477的博客
05-10 4194
Relax app的功能在于帮助你用于调整呼吸，放松身心。吸气~ 保持~ 呼气。 **需要实现：** - CSS-页面布局，包括圆环与移动的小球 - JS-随着呼吸，圆圈的缩放以及文本的改变
50个html+css+js项目小练习（二：动画的倒计时效果）
m0_54088431的博客
11-26 940
本案例使用css+js+html实现倒计时效果，知识点为：使用classList添加class、删除class、查询class；行内块、行内、块级元素nextSibling 和nextElementSibling。
JavaScript 30 原生项目练习 - html+css+js 实现钟表
yss778的博客
08-03 504
学习基础三件套可以实现的效果-钟表制作，适合新手，培养编程的思维和练习。
01-HTML+CSS+JS【常用总结+案例练习】
欢迎来到编程小栈
04-25 6886
文章目录HTML第一部分第二部分第三部分总结CSS选择器常用样式总结JavaScriptECMA Script基本语法JS对象BOM浏览器对象模型DOM文档对象模型事件案例：案例1-注册表单校验案例2-5秒后跳转到百度官网案例3-全选和全不选和反选案例4-省市二级联动案例5-表格隔行换色案例6-轮播图案例7-定时弹广告案例8-会跳动的时钟 不要死记硬背，要学会运用，案例驱动，通过案例学习 不要死记硬背，要学会运用，案例驱动，通过案例学习 不要死记硬背，要学会运用，案例驱动，通过案例学习 前端知识点 细，碎，
HTML+JS+CSS培训课件和练习(含答案)
08-24
HTML+JS+CSS培训课件和练习(含答案),课件对HTML+CSS+JS+XML等重要知识点进行了讲解，练习也很经典，适合新手入门的好材料，拿来和大家分享！各种内部资料，持续更新中！
html+css+js高仿汤姆猫
12-15
个人仿写的小游戏汤姆猫资源包括完整的HTML css js 代码和图片字体等资源，适合新手查看和仿写练习。由于自己仿写可能不够完美，所有的人问题请及时联系我也可以向我提建议。
HTML+CSS网页练习.zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
html+less(css)+javascript实现网页练习.zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
html+css+js新手练习项目
10-08
html+css+js新手练习项目，里面包含例子源码，还有单独文件夹分类。适合新手练习用
HTML+css+JQ 网页实例练习.zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
html-css-js：练习HTML，CSS和Javascript
02-10
html-css-JS 练习HTML，CSS和Javascript
学生HTML网页作业：基于HTML+CSS+JavaScript画家企业8页
QQ_____365392777的博客
08-06 1654
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站......
HTML,CSS,JS实例分析
Lnd_Niu的博客
07-31 1万+
昨天我们大概只说了js的大体知识和语法，结构等基本内容，那么我们今天就来一起写一个具体例子帮助大家理解一下: 首先给大家补充一下昨天没有说的知识点。 js中的数列 的定义以及使用方法： 创建一个固定长度的数组对象： var 数组名称=new Array(数组长度);（最常用的数组创建方式） 创建一个已知元素的数组对象： var 数组名称=new Array(元素，元素，元素.....
前端基础HTML+CSS+JS（期末复习用）
老马非马的博客
06-03 6822
前端技术：1、HTML/H5 认识并熟悉一些常用的标签  1)网页结构  2)图img、文p pre h1-h6 font(h5过时)、视频 &lt;video&gt; 、音频 &lt;audio&gt;   3）表格  4）表单/表单属性（特别常用）     input  ----text、password、radio、checkbox、button、reset、submit、file、hidd...
自制登陆页面（前端HTML,CSS,JS练习）
MPF1230的博客
10-14 2544
自制静态登陆页面,在同一页面中，实现点击注册按钮，变换到注册的盒子，并且实现两次输入密码不一致的提示操作，登陆密码错误提示，并且3次失败后拒绝登陆 源代码获取： https://github.com/akh5/web/tree/master/login 实现效果： 登陆，注册按钮有一个延时填充颜色的效果 点击注册后会切换盒子到注册 密码不一致时提示 密码错误提示 三次失败后，移除登陆按...
《Web前端开发技术(HTML+CSS+JavaScript)》题库附答案
热门推荐
m0_63394128的博客
03-14 1万+
什么是Web技术？ 答：Web即全球广域网（World Wide Web），也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。它是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超链接将Internet上的信息节点组织成一个互为关联a的网状结构。 什么是Web前端？ 答：Web前端是指基于Web（现在一般指动态页面技术）的客户端软件，也就是通常说的在浏览器端运行的网页程序...
Java面试题 HTML+CSS 部分
dayu
04-30 3897
java面试题 HTML+CSS部分
可以当做笔记的前端面试题（一：HTML和CSS、JS基础）
竹叶轻拂水
01-18 1951
我的
html+css+js学习
最新发布
02-09
4. 综合实践：通过实际项目或练习，将HTML、CSS和JavaScript结合起来，实现一个完整的网页或Web应用程序。 在学习过程中，可以参考一些优秀的教程和资源＊＊＊www.w3schools.com/）等。此外，还可以通过阅读相关...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值