HTML+JS+CSS 小练习
2024-05-15 15:55:54
目标图片：
主要实现功能：
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="data:images/pic1.png" style="width: 600px;height: 600px"/></td></tr><tr style="text-align: center"><td><input type="image" src="data:images/pic4.png" style="width: 100px;height: 100px" onclick="p1()"/></td><td><input type="image" src="data:images/pic2.png" style="width: 100px;height: 100px" onclick="p2()"/></td><td><input type="image" src="data: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="data:images/pic4.png" style="height: 50px;width: 50px"></td><td style="height: 100px;width: 100px"><input type="image" src="data:images/pic2.png" style="height: 50px;width: 50px"></td><td style="height: 100px;width: 100px"><input type="image" src="data: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="data:images/sev.png" /> 7天退货</td></tr><tr><td>支付</td><td><img src="data:images/l_4.png" />微信支付</td><td><img src="data:images/l_3.png" />支付宝支付</td><td><img src="data: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"> 店铺：时尚职装商城 <img src="data:images/water.png" /> 990552669</td></tr><tr id="row2"><td><input name="product" type="checkbox" value="2"/></td><td><img src="data: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：应该，还挺像的吧：）
图片是我直接从原图上截取下来的，所以有点糊。
HTML+JS+CSS 小练习相关推荐
- 滑动门套滑动门css,JS+CSS实现带小三角指引的滑动门效果
本文实例讲述了JS+CSS实现带小三角指引的滑动门效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS带小三角指引的滑动门,有朋友说在IE6下看不到效果,其实能看到,因为那个小三角颜色比较淡, ...
- 前端(js/css/html)那些小的知识点，持续更新......
前端(js/css/html)那些小的知识点,持续更新...... 1.行内元素与块级元素有哪些及区别? 块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示.通过样式控制, ...
- JS扫雷小游戏(DOM (html+css+js))
一:效果图: 二:资源 js扫雷小游戏源代码下载地址 js贪吃蛇小游戏链接 python小黄脸大战小游戏链接 vue高仿网易云音乐app 三:源代码: html部分: <!DOCTYPE htm ...
- html 小三角折叠菜单,html+css+js下拉列表小三角
本篇文章主要介绍html+css+js下拉列表小三角,感兴趣的朋友参考下,希望对大家有所帮助. gadf .zijisanjiclass{ width: 220px; border: 1px soli ...
- react.js做小程序_如何使用React.js构建现代的聊天应用程序
react.js做小程序 In this tutorial, I will guide you to build your own group chat application using React ...
- 也分享自己做的JS扫雷小游戏
看了草根程序猿分享的JS扫雷小游戏 想起去年的时候自己也做了一个 于是也拿出来分享之 先上截图~ 引用了jQuery,节省了很多鼠标点击上的判断 界面显然都是照搬Windows的扫雷啦 详细的内容注释 ...
- web开发常用js功能性小技巧(转)
web开发常用js功能性小技巧 -------------------------------------------------------------------------------- < ...
- python博客下载本地文件_解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了...
1.今天网上下载一个博客项目,发现本地访问,js,css加载不了. 我想应该是项目上线的安全措施,但是我想调试项目.找到方法如下 在settings.py里面编辑 添加 STATICFILES_DIR ...
- css compressor java_利用YUI Compressor压缩JS/CSS之终极秘籍
JS/CSS的压缩已经不是什么新鲜话题了,自打YSlow推出后,这方面的优化话题是铺天盖地啊:不过当时作为后知后觉的我,甚至都没法完整地写出一份漂亮的JS/CSS的代码,何尝会去注意呢?! 时至今日, ...
最新文章
- 图像卷积下非极大值抑制 Sobel 的实现
- [Javascript]怎么样让公告不间断的滚动显示
- 这家公司不要求996，但照样市值万亿！
- STM32开发 -- Systick定时器
- 安全编程: 防止缓冲区溢出
- struts1，struts2，springMVC对比
- pandas 机器学习_机器学习的PANDAS
- html+字体图标找不到字体,bootstrap中不显示字体图标问题怎么解决？
- WP7 开发（十五）输入范围和文本框
- 飞机上终于能开着手机连 Wi-Fi 了，它背后的技术原理是什么？
- 【渝粤教育】国家开放大学2018年春季 0239-22T电子商务物流管理 参考试题
- 页面编码和js文件不同导致的IE6下脚本错误
- 使用Python Chord包画出好看的弦图
- ArcCatalog基础操作
- SAP 和 ERP 区别
- 设置电脑保护视力的颜色
- win10系统上安装awvs漏洞扫描器
- android 隐藏Settings菜单的几种方法
- 真王服务器文件,3方位对比谁是2015级真王 唐斯vs波神各有优势
- 二分法算法复杂度简化_让我们简化算法的复杂性！