JavaScript购物车

最新推荐文章于 2024-06-18 17:19:20 发布

陈峰806

最新推荐文章于 2024-06-18 17:19:20 发布

阅读量156

点赞数 1

文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/weixin_65768991/article/details/123469994

版权

运用JavaScript写一个购物车

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>gouwuche</title>
		<style>
		       
				
				.al{
					width: 100%;
					height: 1000px;
					
					}
				div{
					position:absolute;
					left:10px;
					width:250px;
					background-color:#cccccc;
					z-index:2;
					text-align:right;
					}
				img{
					width: 300px;
					height: 250px;
				}
		</style>
	</head>
	<body>
		<div id="a1" style="top: 440px;">
			<button onclick="a1.style.display='none'">x</button>
			<br>
		<img src="cions/1.png" alt>
		</div>
		
		<script>
		    //窗口的滑动事件
		    window.onscroll=()=> {
		        //获取到窗口滚动的距离 scrollTop
		        a1.style.top=40+document.documentElement.scrollTop+"px"
		    }
		</script>
		<table border="" class="al">
		    <tr>
		        <td>全选<input type="checkbox" onclick="selectAll(this.checked)"></td>
		        <td>名称</td>
		        <td>单价</td>
		        <td>个数</td>
		        <td>总价</td>
		        <td>操作</td>
		    </tr>
		    <tr>
		        <td><input type="checkbox"></td>
		        <td><img src="cions/dzlx2.png" alt></td>
		        <td contenteditable="true" class="price" onblur="calcRow('',this.parentElement)">19.9</td>
		        <td contenteditable="true" class="count" onblur="calcRow('',this.parentElement)">3</td>
		        <td class="sum">19.9</td>
		        <td>
		            <button onclick="calcRow('+',this.parentElement.parentElement)">+</button>
		            <button onclick="calcRow('-',this.parentElement.parentElement)">-</button>
		            <button onclick="delRow(this.parentElement.parentElement)">删除</button>
		        </td>
		    </tr>
		    <tr>
		        <td><input type="checkbox"></td>
		        <td><img src="cions/jd2.png" alt></td>
		        <td contenteditable="true" class="price" onblur="calcRow('',this.parentElement)">19.9</td>
		        <td contenteditable="true" class="count" onblur="calcRow('',this.parentElement)">3</td>
		        <td class="sum">19.9</td>
		        <td>
		            <button onclick="calcRow('+',this.parentElement.parentElement)">+</button>
		            <button onclick="calcRow('-',this.parentElement.parentElement)">-</button>
		            <button onclick="delRow(this.parentElement.parentElement)">删除</button>
		        </td>
		    </tr>
		    <tr>
		        <td><input type="checkbox"></td>
		        <td><img src="cions/jd1.png" alt></td>
		        <td contenteditable="true" class="price" onblur="calcRow('',this.parentElement)">19.9</td>
		        <td contenteditable="true" class="count" onblur="calcRow('',this.parentElement)">3</td>
		        <td class="sum">19.9</td>
		        <td>
		            <button onclick="calcRow('+',this.parentElement.parentElement)">+</button>
		            <button onclick="calcRow('-',this.parentElement.parentElement)">-</button>
		            <button onclick="delRow(this.parentElement.parentElement)">删除</button>
		        </td>
		    </tr>
		</table>
		<h1>总价: $<font color="green" id="allPrice">0.0</font></h1>
		<button onclick="delCKRow()">删除所选的商品</button>
		<button type="button" onclick="location.href='new_file.html'">增加商品</button>
		<script>
			
		    //计算当前所有商品的总价
		    function calcAll() {
		        //获得页面中所有的行
		        var rs=document.getElementsByTagName("tr")
		        var sum=0;
		        for(let i=1;i<rs.length;i++){
		            //rs[i]就是除了第一行之外的其他的行
		            var s1=rs[i].getElementsByClassName("sum")[0].textContent
		            sum+=parseFloat(s1)
		        }
		        //给页面赋值,只要小书店后两位
		        allPrice.textContent=sum.toFixed(2)
		    }
		
		    //删除选中的行
		    function delCKRow() {
		        //获得页面中所有的行
		        var rs=document.getElementsByTagName("tr")
		        //将集合collection变成数组array
		        rs=Array.from(rs)
		        for(let i=1;i<rs.length;i++){
		            //拿到行中对应的多选框
		            var ck=rs[i].querySelectorAll("input[type='checkbox']")[0]
		            //判断多选框是否被选中
		            if(ck.checked){
		                //删除该行
		                rs[i].outerHTML=""
		            }
		        }
		        calcAll()
		    }
		
		    //全选功能
		    function selectAll(status) {
		        var is=document.querySelectorAll("input[type='checkbox']")
		        for (let i of is){
		            i.checked=status
		        }
		    }
		
		    //按钮点击删除该行
		    function delRow(tr) {
		        tr.outerHTML=""
		        calcAll()
		    }
		
		    //页面数值变化重新计算价格
		    function calcRow(rex,tr) {
		        //rex是运算符号
		        //tr是当前对应的行
		        var td=tr.getElementsByClassName("count")[0]
		        if(rex==="+"){
		            td.textContent=td.textContent*1+1
		        }
		        if(rex==="-"){
		            td.textContent-=1
		        }
		        calc(tr)
		    }
		
		    //写一个函数：算出当前一行中的价格并完成赋值
		    function calc(tr) {
		        //value只有在input或者select
		        //其他的内容全部使用textContent,innerHTML
		        var price=tr.getElementsByClassName("price")[0].textContent
		        var count=tr.getElementsByClassName("count")[0].textContent
		        if(isNaN(price*1)){
		            tr.getElementsByClassName("price")[0].textContent=0
		            price=0
		        }
		        if(isNaN(count*1)){
		            tr.getElementsByClassName("count")[0].textContent=0
		            count=0
		        }
		        //使用单价*数量算出总价 并赋值给对应元素
		        tr.getElementsByClassName("sum")[0].textContent=(price*count).toFixed(2)
		        calcAll()
		    }
		
		    //窗口的加载事件  会在整个页面加载完成之后执行
		    window.onload=()=>{
		        //获得页面中所有的行
		        var rs=document.getElementsByTagName("tr")
		        for(let i=1;i<rs.length;i++){
		            calc(rs[i])
		        }
		    }
		</script>
		
	</body>
</html>

在这里插入图片描述

陈峰806

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript购物车

运用JavaScript写一个购物车<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>gouwuche</title> <style> .al{ width: 100%; height: 1000px; } div{ position:abso
复制链接

扫一扫