前端学习（2338）：记录解决问题的一次
生活随笔
收集整理的這篇文章主要介紹了
前端学习（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）：记录解决问题的一次的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机 高新 会计电算化,会计软件应用（
- 下一篇： 安全字体