前端学习（2338）：记录解决问题的一次

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">#f {font-size: 50px;font-family: 幼圆;}#btn {width: 50px;height: 30px;opacity: 0.5;background-color: palegoldenrod;}#btn:hover {background-color: burlywood;opacity: 1;}.fonts {line-height: 200px;float: right;font-family: 幼圆;font-size: 20px;}.fontss {line-height: 200px;font-size: 30px;text-align: center;font-family: 幼圆;}.fontsss {line-height: 200px;font-size: 30px;font-family: 幼圆;}.trs:hover {background-color: steelblue;}.a {float: left;text-align: center;line-height: 20px;}#wind {width: 100px;height: 50px;}#last-delete {width: 60px;height: 40px;}#num {color: red;}#main-num {color: red;}.delete-btn:hover {background-color: brown;}.divbtn {width: 25px;height: 17px;background-color: lightsteelblue;}.minus {font-weight: bold;font-size: 12px;text-align: center;}.add {font-weight: bold;font-size: 12px;text-align: cente}#wind:hover {background-color: seagreen;}.delete-btn {height: 100px;width: 90px;opacity: 1;}.td {position: relative;}.foodsbtn {background-color: lightsteelblue;}#aaa {font-size: 60px;font-family: 幼圆;text-align: center;}</style>
</head><body bgcolor="#B0C4DE"><button id="btn">返回</button><center><div id="as"><p id="aaa">◾购物车◾</p></div><div id="fater"><table border="1"><tr bgcolor="steelblue"><th><input type="checkbox" class="checkall">全选</th><th width="600 px" height="30px">商品</th><th width="200px" height="30px">单价</th><th width="250px" height="30px">数量</th><th width="100px" height="30px">小计</th><th width="100px" height="30px">操作</th><tr class="trs"><td><input type="checkbox" class=" foodsbtn"></td><td width="600px" height="260px" valign="center "><img src="img/伍六七.png" width="400px" height=100%><p class="fonts">特价伍六七</p></td><td width="200px" height="260px"><p class="fontss">99</p></td><td width="250px" height="260px"><center><span class="minus" style="cursor:pointer">➖</span><input type="text" class="divbtn" value="1" /><span class="add" style="cursor:pointer" value="1">➕</span></center></td><td width="100px" height="260px"><p class="fontsss">0</p></td><td width="100px" height="260px"><p class="fontsss"><button class="delete-btn">删除</button></p></td></tr><tr class="trs"><td><input type="checkbox" class="foodsbtn"></td><td width="600px" height="260px"><img src="img/姜主任.png" width="400px" height=100%><p class="fonts">新品姜主任</p></td><td width="200px" height="260px"><p class="fontss">599</p></td><td width="250px" height="260px"><center><span class="minus" style="cursor:pointer">➖</span><input type="text" class="divbtn" value="1" /><span class="add" style="cursor:pointer">➕</span></center></td><td width="100px" height="260px"><p class="fontsss">0</p></td><td width="100px" height="260px"><p class="fontsss"><button class="delete-btn">删除</button></p></td></tr><tr class="trs"><td><input type="checkbox" class="foodsbtn"></td><td width="600px" height="260px"><img src="img/梅花十三1.png" width="400px" height=100%><p class="fonts">特价梅花十三</p></td><td width="200px" height="260px"><p class="fontss">199</p></td><td width="250px" height="260px"><center><span class="minus" style="cursor:pointer">➖</span><input type="text" class="divbtn" value="1" /><span class="add" style="cursor:pointer">➕</span></center></td><td width="100px" height="260px"><p class="fontsss">0</p></td><td width="100px" height="260px"><p class="fontsss"><button class="delete-btn">删除</button></p></td></tr><tr class="trs"><td><input type="checkbox" class="foodsbtn"></td><td width="600px" height="260px"><img src="img/梅花十三2.png" width="400px" height=100%><p class="fonts">正品梅花十三</p></td><td width="200px" height="260px"><p class="fontss">699</p></td><td width="250px" height="260px"><center><span class="minus" style="cursor:pointer">➖</span><input type="text" class="divbtn" value="1" /><span class="add" style="cursor:pointer"> ➕</span></center></td><td width="100px" height="260px"><p class="fontsss">0</p></td><td width="100px" height="260px"><p class="fontsss"><button class="delete-btn">删除</button></p></td></tr><table><tr bgcolor="steelblue"><th width="10px" height="50px"><input type="checkbox" class="checkall"></th><th width="50x" height="50px"><p id="a">全选</p></th><th width="850px" height="20px"><button id="last-delete4">删除</button></th><th width="200px" height="50px">已选商品<span id="num">0</span>件<button id="other"></button></th><th width="100px" height="50px">合计:<span id="main-num">0</span>元</th><th width="100px" height="50px"><button id="wind">结算</button></th></tr></table></table></div></center><script type="text/javascript">//全选var checkall = document.querySelectorAll(".checkall");var foodsbtn = document.querySelectorAll(".foodsbtn");//首先历遍两次for循环，第一次i=1是对各全选第二次i=2是第二个全选，然后判断input的状态（onchange函数的意思是改变input是所触发大的函数。点击input也是改变input）//如果点击input执行函数，经历第一次历遍foodsbtn长度的函数，定义每一个单选按钮，让他们的的单击状态跟这个按钮一样，就是定义onchange的按钮（也就是最外层的函数）//在经历第二次历遍，历遍的是两个全选按钮，让这两个按钮的点击状态跟最外层函数的点击状态一样//判断点击状态，开始经历两次for函数的历遍第一次是全部单选按钮跟最外层的函数点击状态一样，第一次历遍是历遍两个全选按钮，让他跟这个按钮的点击状态一样for (var i = 0; i < checkall.length; i++) {checkall[i].onchange = //this指的是这个function() {for (var i = 0; i < foodsbtn.length; i++) {foodsbtn[i].checked = this.checked;}for (var i = 0; i < checkall.length; i++) {checkall[i].checked = this.checked; //this指的是 }totalprice(); //？？？？？？？？？？？？？？？？？？？？？    }}//设置每个按钮的事件，上面的是设置全选按钮的事件//设置每个单选按钮是否全部选中，全部选中触发全选按钮for (var i = 0; i < foodsbtn.length; i++) {foodsbtn[i].onchange = function() { //给每个按钮分发点击事件，点击每个按钮的时候都要判断一下sum是否等于foodbtn。lengthvar sum = 0;for (var i = 0; i < foodsbtn.length; i++) { //判断单选按钮的点击次数if (foodsbtn[i].checked) {sum++;}}for (var i = 0; i < checkall.length; i++) {checkall[i].checked = sum == foodsbtn.length; //判断单选按钮的点击个数是否等于foodbtn。length}totalprice() //当每个单选按钮点击的时候计算总价和总件数}}//计算总价的函数。这里会多次运用这个函数，随意把他封装起来var num = document.querySelector("#num")var divbtn = document.querySelectorAll(".divbtn");var fontss = document.querySelectorAll(".fontss");var main = document.querySelector("#main-num");function totalprice() {var sum = 0;var piece = 0;for (var i = 0; i < foodsbtn.length; i++) {if (foodsbtn[i].checked) {piece = piece + Number(divbtn[i].value);sum = sum + Number(fontss[i].innerHTML);}}num.innerHTML = piece;main.innerHTML = sum;}//设置高级按钮var add = document.querySelectorAll(".add");var minus = document.querySelectorAll(".minus");for (var i = 0; i < add.length; i++) {add[i].value = i;add[i].onclick = function() {console.log(this.value);console.log(divbtn[this.value]);console.log(i);console.log(divbtn[i]);var x = divbtn[this.value].value;x++;divbtn[this.value].value = x;totalprice()}}for (var i = 0; i < minus.length; i++) {minus[i].value = i;minus[i].onclick = function() {var x = divbtn[this.value].value;if (x < 1) {x = 0} else {x--;divbtn[this.value].value = x;totalprice()}}}</script>
</body></html>

运行结果

前端学习（2338）：记录解决问题的一次相关推荐

前端学习记录 —— HTML篇（下）
前端学习记录 -- HTML篇(下) 一.表格标签 table,tr,td 1. 表格标题 <caption></caption><caption></cap ...
前端学习记录 —— JavaScript（一）
前端学习记录 -- JavaScript(一) 前言一.初识 JavaScript JavaScript 的特点 JavaScript的作用编程语言与标记语言的区别 HTML/CSS/JS 的关系 ...
前端学习记录13-CSS-(滑动门技术，微信导航栏实现，淘宝轮播图实现，图标字体实现，过渡效果，获得焦点元素)
前端学习记录13-CSS-滑动门技术,微信导航栏实现,淘宝轮播图实现,图标字体实现,过渡效果,获得焦点元素滑动门技术微信导航栏实现静态轮播图实现网上引用的图标字体设置过渡效果(transit ...
前端学习记录27-JavaScript-(作用域、预解析、自定义对象)
前端学习记录27-JavaScript-作用域.预解析.自定义对象作用域全局作用域局部作用域(函数作用域) 变量作用域全局变量局部变量作用域链预解析变量预解析函数预解析预解析经典面 ...
html表单的课后心得体会,web前端学习心得体会范文
<web前端学习心得体会范文>由会员分享,可在线阅读,更多相关<web前端学习心得体会范文(2页珍藏版)>请在装配图网上搜索. 1.web前端学习心得体会范文web前端学习心得 ...
前端学习笔记——JavaScript进阶
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.JavaScript 面向对象 1. 面向对象编程介绍 1.1 两大编程思想 1.2 面向过程编程 1.3 面向对 ...
“计算机之子”winter：我的前端学习路线与方法
你好,我是winter.今天我们一起来聊聊前端的学习路线与方法. 到现在为止,前端工程师已经成为研发体系中的重要岗位之一.可是,与此相对的是,我发现极少或者几乎没有大学的计算机专业愿意开设前端课程,更 ...
hbuilder前端需要的插件_最新web前端学习路线
随着互联网的深入发展,前端开发工程师已成为市场上极具竞争力的人才.许多学生,包括以前的UI,java,或完全零基础,想学习的前端.下面的思维导图是在互联网上广泛传播的前端学习地图.许多初学者说,当他们 ...
html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解
原标题:web前端学习技术之对HTML5 智能表单的理解 Html5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交. - t ...
黑马程序员：从零基础到精通的前端学习路线
黑马程序员:从零基础到精通的前端学习路线随着互联网的深入发展,前端开发工程师一跃成为市场上非常抢手的人才.很多同学,包括以前做UI的.Java的.或者对于IT完全零基础的同学都想学习前端.下图是网上 ...

前端学习（2338）：记录解决问题的一次

前端学习（2338）：记录解决问题的一次相关推荐

最新文章

热门文章