会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132482个问题

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .items{
            height: 450px;
            padding: 10px;
            background-color: bisque;
            box-sizing: border-box;
            float: left;
        }
        .items>div{
            width: 100%;
            height: 100%;
            background-color: cadetblue;
        }
        @media screen and (max-width: 768px){
            .items{
                width: 50%;
            }
        }
        @media screen and (min-width: 768px) and (max-width: 992px) {
            .items{
                width: 33.33%;
            }
        }
        @media screen and (min-width: 768px){
            .items{
                width: 25%;
            }
        }
    </style>
</head>
<body>
<div class="box">
    <div class="items">11234564631</div>
    <div class="items">2</div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
</div>
</body>

image.png

老师为什么。items里的div没有变颜色呢

WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS盒子模型 14806楼
JAVA 全系列/第十八阶段:亿级高并发电商项目_架构/编码(旧)/电商:基于SpringSecurity实现后台登录功能 14808楼
Python 全系列/第三十阶段:Spark体系之分布式计算(扩展)/Spark分布式计算框架核心基础 14809楼
Python 全系列/下架-第十二阶段:Python_大型电商项目(5天后下架)/Django项目阶段-电商项目(旧) 14811楼
JAVA 全系列/(隐藏)第三十阶段:设计模式/框架源码分析(拓展)/GOF23 设计模式 14812楼
JAVA 全系列/第二阶段:JAVA 基础深化和提高/容器(旧) 14813楼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--引入jd CSS文件-->
		<link rel="stylesheet" type="text/css" href="css/jd.css"/>
		<!--引入reset CSS文件-->
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<!--引入图标-->
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"/>
		<!--引入javascript文件-->
		<script type="text/javascript" src="js/jd.js"></script>
	</head>
	<body>
		<!--导航栏-->
		<div class="nav">
			<div class="warp">
				<ul class="nav_ul1">
					<li><a href=""><i class="iconfont">&#xe8ff;</i>京东首页</a></li>
					<li><a href="">配送到:北京</a></li>
				</ul>
			
				<ul class="nav_ul2">
					<li><a href="">阳阳宝贝</a><span>|</span></li>
					<li><a href="">我的订单</a><span>|</span></li>
					<li><a href="">我的京东</a><span>|</span></li>
					<li><a href="">京东会员</a><span>|</span></li>
					<li><a href="">企业采购</a><span>|</span></li>
					<li><a href="">京东手机</a><span>|</span></li>
					<li><a href="">关注京东</a><span>|</span></li>
					<li><a href="">客户服务</a><span>|</span></li>
					<li><a href="">网站导航</a><span></span></li>
				</ul>
			</div>
		</div>
		<!--导航栏-->
		
		<!--搜索栏开始-->
		<div class="search">
			<div class="warp">
				<img class="search_img" src="img/logo.jpg" />
				<div class="search_div">
					<input class="search_text" type="text" />
					<input class="search_but" type="button" value="搜索" />
				</div>
			</div>
		</div>
		<!--搜索栏结束-->
		
		<!--标题开始-->
		<div class="title warp">
			<h3>全部商品</h3>
			<div>
				<span>配送至</span>
				<select>
					<option>纳溪区</option>
					<option>江阳区</option>
					<option>龙马潭区</option>
					<option>泸县</option>
					
				</select>
			</div>
		</div>
		
		<!--标题结束-->
		
		<!--显示菜单开始-->
		<div class="menu warp">
			<ul>
				<li>
					<input type="checkbox" name="fav" id="all" onclick="checkboxtext1(this)"/>
					全选
				</li>
				<li>商品</li>
				<li>单价</li>
				<li>数量</li>
				<li>小计</li>
				<li>操作</li>
			</ul>
			
		</div>
		
		<!--显示菜单结束-->
		
		<!--显示商品开始-->
		
		<div class="info warp">
			
			<ul>
				<li class="info_1">
					<input type="checkbox" name="fav" onclick="checktext2()"/>
				</li>
				<li class="info_2"> <img src="img/img1.jpg" width="80px"/></li>
				<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
				<li class="info_4"><a>颜色:粉红+灰色</a></li>
				<li class="info_5">182.5</li>
				<li class="info_6">
					<button onclick="checktext3(this,1)" >-</button>
					<input type="text" name="" id="" value="1" />
					<button onclick="checktext3(this,2)" >+</button>
				</li>
				<li class="info_7">¥182.5</li>
				<li class="info_8">
					<a>删除</a> <br/>
					<a>移入我的关注</a>
				</li>
			</ul>
			
		</div>
		
		<div class="info warp">
			
			<ul>
				<li class="info_1">
					<input type="checkbox" name="fav"  onclick="checktext2()"/>
				</li>
				<li class="info_2"> <img src="img/img2.jpg" width="80px"/></li>
				<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
				<li class="info_4"><a>颜色:粉红+灰色</a></li>
				<li class="info_5">182.5</li>
				<li class="info_6">
					<button onclick="checktext3(this,1)" >-</button>
					<input type="text" name="" id="" value="1" />
					<button onclick="checktext3(this,2)" >+</button>
				</li>
				<li class="info_7">¥182.5</li>
				<li class="info_8">
					<a>删除</a> <br/>
					<a>移入我的关注</a>
				</li>
			</ul>
			
		</div>
		
		<div class="info warp">
			
			<ul>
				<li class="info_1">
					<input type="checkbox" name="fav" onclick="checktext2()"/>
				</li>
				<li class="info_2"> <img src="img/img3.jpg" width="80px"/></li>
				<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
				<li class="info_4"><a>颜色:粉红+灰色</a></li>
				<li class="info_5">182.5</li>
				<li class="info_6">
					<button onclick="checktext3(this,1)" >-</button>
					<input type="text" name="" id="" value="1" />
					<button onclick="checktext3(this,2)" >+</button>
				</li>
				<li class="info_7">¥182.5</li>
				<li class="info_8">
					<a>删除</a> <br/>
					<a>移入我的关注</a>
				</li>
			</ul>
			
		</div>
		
		<!--显示商品结束-->
		
		<!--显示结算开始-->
		
		<div class="balence warp">
			
			<ul class="bal_ul1">
				<li>
					<input type="checkbox" name="fav" id="all" onclick="checkboxtext1(this)"/>
					全选
				</li>
				<li><a>删除选中商品</a></li>
				<li><a>移到我的关注</a></li>
				<li><a>清除下柜商品</a></li>
			</ul>
			
			<ul class="bal_ul2">
				<li>已选择<span>1</span>件商品</li>
				<li>总价<span>¥12</span></li>
				<li>
					<button class="button1">去结算</button>
			    </li>
			</ul>
	    </div>
		
		<!--显示结算结束-->
	</body>
</html>
	//获得所有多选框对象(全局变量)
	var fav = document.getElementsByName("fav")
//判断是否全选操作
function checkboxtext1(th){
	//将多选框是否被勾选的返回值传给flag
	var flag = th.checked;

	//判断flag是否为true,若是,则遍历fav,将所有fav对象赋值为true
//	if(flag){
//		for (var i in fav){
//			fav[i].checked=true;
//		}
//	}else{
//		for (var i in fav){
//			fav[i].checked=false;
//		}
//	}

	//循环遍历fav,将flag的值赋予每个fav,可以达到上面的效果
		for (var i in fav){
			fav[i].checked=flag;
		}
	
}

//单选决定全选操作
function checktext2(){
	//默认flag为true
	var flag = true;
	//遍历第二到第四个多选框,如果这三个多选框有一个不选,则flag返回false,返回false后可直接结束循环
	for (var i=1;i<fav.length-1;i++){
		//如果第i个fav没有勾选
		if(!fav[i].checked){
		flag=false;
		break;
		}
	}
	//决定框是否勾选
	fav[0].checked=flag;
	fav[fav.length-1].checked=flag;
}

//控制数量的增加和减少
function checktext3(th,sig){
	var pre;
	if(sig=="1"){
		//获得下一个节点
		pre = th.nextElementSibling;
		if(Number(pre.value)>0){
		//获得下一个节点的值(并且减一后重新为下一个节点赋值)
		pre.value = Number(pre.value)-1;
		}
	}else{
		//获得上一个节点
		pre = th.previousElementSibling;
		//获得上一个节点的值(并且加一后重新为上一个节点赋值)
		pre.value = Number(pre.value)+1;

	}
	//计算每一个商品的总价
	//获得每一个商品的单价(获取变量pre的父节点的上一个节点里的内容)
	var val = pre.parentNode.previousElementSibling.innerHTML;
	//计算总价
	var all = Number(val)*Number(pre.value);
	//将总价放入总计栏
	pre.parentNode.nextElementSibling.innerHTML=all;
	
	
}

image.png

老师,我的这个弄出来每次刷新了之后,总价能刷新出来,但是数量刷新之后也是保持上一次操作那个数量,而且往上加就一个一个的加,一减就直接到0了

Python 全系列/第七阶段:网页编程基础/JavaScript 14814楼
JAVA 全系列/第五阶段:JavaWeb开发/JSP技术详解(旧) 14816楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 2000px;
       background: linear-gradient('skyblue','pink');
       
        }
    </style>
</head>
<body>
    <span>密码:</span><input type="password"><span class="passwordSpan"></span>
   
    <script>
        var password=document.querySelector('input');
        var passwordSpan=document.querySelector('.passwordSpan');
        var flag=false;
       
        // document.body.onkeydown=function(){
        //     if(event.keyCode==20){
        //         flag=!flag;
        //     }
        //     if(flag){
        //         passwordSpan.innerHTML='现在是大写';
               
        //     }else{
        //      passwordSpan.innerHTML='现在是小写'
        //     }
        // }
        // document.body.onkeydown=function(){
        //     if(event.keyCode==40){
        //         window.onscroll=function(){
        //              var top=document.body.scrollTop||document.documentElement.scrollTop;
                   
        //         top=top-500;
        //         document.body.scrollTop=top;
        //         document.documentElement.scrollTop
        //         console.log(document.body.scrollTop||document.documentElement.scrollTop);
        //         }
               
        //     }
        //     if(event.keyCode==38){
        //         window.onscroll=function(){
        //              var top=document.body.scrollTop||document.documentElement.scrollTop;
        //         top=top+500;
        //         document.body.scrollTop=top;
        //         document.documentElement.scrollTop;
        //         console.log(document.body.scrollTop||document.documentElement.scrollTop);
        //         }
               
        //         }
        //     }
      window.onscroll=function(){
        console.log("top"+document.documentElement.scrollTop||document.body.scrollTop);
      }

        window.onkeydown=function(){
            console.log(event.keyCode);
            if(event.keyCode==65){
                var top=document.documentElement.scrollTop||document.body.scrollTop;
                top-=100;
                document.documentElement.scrollTop=top;

                document.body.scrollTop=top;
             
            }
            if(event.keyCode==68){
                var top=document.documentElement.scrollTop||document.body.scrollTop;
                top+=100;
                document.documentElement.scrollTop=top;

                document.body.scrollTop=top;
             
            }
        }
    </script>
</body>
</html>

老师 系统自带箭头滚动功能怎么搞 我设置了上箭头向上滚动200  还是2 来滚动

WEB前端全系列/第二阶段:JavaScript编程模块/浏览器模型(BOM) 14817楼
JAVA 全系列/第一阶段:JAVA 快速入门/JAVA入门和背景知识 14818楼
JAVA 全系列/第二阶段:JAVA 基础深化和提高/网络编程(旧) 14819楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637