前端学习案例总结

大床房里学知识

已于 2023-11-28 11:05:25 修改

阅读量26

点赞数 1

分类专栏： html+css+js知识文章标签： javascript 前端开发语言

于 2023-09-03 23:24:49 首次发布

本文链接：https://blog.csdn.net/m0_70808444/article/details/132657317

版权

html+css+js知识专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一.省市区级联菜单的实现

1.效果展示

2.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>省市区定位实现</title>
	</head>
		
	<body>	
		<script type="text/javascript">
				
			//更换省份选项：调用的方法：添加城市信息
			function changePro(){
				//被选中的下拉框的索引：selectedIndex，从0开始
				var index=pro.selectedIndex;//省份的索引：1 2 3 。。。。
			    citys=data[index-1].data1;//当前所选省的所有城市 
			    
				//city.options.length=1;//删除重复
				//qu.options.length=1;//删除重复		
				//先删除之前添加的所有(不包含默认的第一个)数据
				while(city.children.length>1){
					city.removeChild(city.children[1])
				}
				//清空区县的信息
				while(qu.children.length>1){
					qu.removeChild(qu.children[1])
				}
				//遍历城市 的数据，向city中添加子节点
				for(var i in citys){
					var opt=document.createElement("option");//创建子节点
					//给子节点中添加元素
					opt.innerHTML=citys[i].city;
					//在city父节点中添加子元素
					city.appendChild(opt);
				}							
			}
			
			//更换市选项:调用的方法：添加区县信息
			function changeCity(){
				//被选中的下拉框的索引：selectedIndex，从0开始
				var index1=city.selectedIndex;//市的索引：1 2 3 。。。。
				var qus=citys[index1-1].data2;//当前所选市的所有区县
				
				//qu.options.length=1;//删除重复
				//删除区县的信息:先删除之前添加的所有(不包含默认的第一个)数据
				while(qu.children.length>1){
					qu.removeChild(qu.children[1])
				}
				//遍历市的数据，向qu中添加子节点
				for(var i in qus){
					var opt=document.createElement("option");//创建子节点
					//给子节点中添加元素										
				   opt.innerHTML=qus[i];					
					//在qu父节点中添加子元素
					qu.appendChild(opt);
				}							
			}
			
			
		//页面加载事件//onload//页面加载时,获取数据存到省下
			window.onload=function(){
				
				data=[
							{pro:'陕西省',data1:[
									{city:'西安市',data2:['高新区1','雁塔区','未央区','灞桥区']},
									{city:'宝鸡市',data2:['高新区2','宝鸡区']},
									{city:'咸阳市',data2:['高新区3']}
								],
							},
							
							{pro:'山西省',data1:[
									{city:'大同市',data2:['大同区1','大同区2']},
									{city:'太原市',data2:['太原区1']}
								],
						    },
						    
							{pro:'甘肃省',data1:[
									{city:'兰州市',data2:['城关区','安宁区','西关区']},
									{city:'天水市',data2:['秦州区','麦积区']}
								],
							}
						];
						
				 //获得省,市,区标签
			    pro=document.getElementById("pros");
			    city=document.getElementById("city");
			    qu=document.getElementById("qu");
				
				//遍历数据,添加省份信息
				for (var i = 0; i < data.length; i++) {
					//给pros创建option
					var opt=document.createElement("option");
				    //给子节点添加内容
					opt.innerHTML=data[i].pro;
					//将子节点添加到父节点里
					pro.appendChild(opt);
				}	
		}
			
		</script>
		
		
		
		<select id="pros"  onchange="changePro()">
			<option>省</option>
		</select>
		<select id="city" onchange="changeCity()">
			<option>市</option>
		</select>
		<select id="qu">
			<option>区/县</option>
		</select>
		
		
		
	</body>
</html>

二. 多细节图切换展示-放大镜效果

1.效果图

2.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>多细节图切换展示-放大镜</title>
		<style type="text/css">
			#left{
				width: 500px;
				height: 600px;
			}
			#big img{
				width: 500px;
				height: 500px;
			}
			.small img{
				float: left;
				width: 100px;
				height: 100px;
			}
			#abslay{
	         width:500px;
	          height:500px;
	          overflow:hidden;/* 溢出属性：超过面积时如何展示 visible可见/hidden隐藏/scroll滚动 */
	          position:absolute;/* 绝对定位 */
	          /*top:8px;
	          left:508px; */
	           display: none;
             }
             #abslay img{
	          width:1000px;
	          height:1000px;
              }
		
		</style>
	</head>
	
	
	<body>
		<div id="left">
			<div id="big" onmouseenter="showdiv(1)" onmouseleave="showdiv(2)" onmousemove="showfd(event)">
				<img src="img/001.jpg" />
			</div>
			
			<div class="small" onmouseenter="changeImg(1)"><img  src="img/001.jpg"/></div>
			<div class="small" onmouseenter="changeImg(2)"><img   src="img/002.jpg"/></div>
			<div class="small" onmouseenter="changeImg(3)"><img   src="img/003.jpg"/></div>
			<div class="small" onmouseenter="changeImg(4)"><img   src="img/004.jpg"/></div>
			<div class="small" onmouseenter="changeImg(5)"><img   src="img/005.jpg"/></div>			   
		</div>
				
		<div id="abslay">
			<img src="#" />
		</div>
		
        
        <script type="text/javascript">
        	window.onload=function(){
        		big=document.getElementById("big");
        		small=document.getElementsByClassName("small"); 
        		abslay=document.getElementById("abslay");
        		
        		//大图在右边进一步展示时,得到进一步展示的图片存在的位置
        		var r=big.getBoundingClientRect();
				abslay.style.top=r.top+"px";
				abslay.style.left=r.right+"px";
        	}
        	
        	//将最小图片路径先传给大图,鼠标经过大图时又在右边进一步放大查看
        	function changeImg(x){        		
        		big.children[0].src=small[x-1].children[0].src;
        		abslay.children[0].src=small[x-1].children[0].src;
        	}
        	//当鼠标停在大图时,右边图片显示,离开大图时,右边图片进行隐藏
        	function showdiv(x){
				//显示/隐藏
				if(x==1){
					//显示
					abslay.style.display="block";
				}else{
					//隐藏
					abslay.style.display="none";
				}
			}
        	
        	function showfd(x){
				//alert(x.clientX+"==="+x.clientY);
				//abslay的左滚动条scrollLeft=((小绿-小蓝)/大红)2000
				//大图   大图右边具体显示图
				var bigr=big.getBoundingClientRect();
				abslay.scrollLeft=((x.clientX-bigr.left)/500)*2000-250;
				abslay.scrollTop=((x.clientY-bigr.top)/500)*2000-250;
			}
        	
        </script>
	</body>
</html>

三. 单击按钮,给购物车数量加一

1.效果

2.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车+1操作</title>
		<style type="text/css">
			.box{
	width: 130px;
	height: 40px;
	background-color: #fff;
	border: 1px solid #999999;
	position: relative;
}
img{
	width: 20px;
	height: 20px;
	position: absolute;
	margin-top: -19px;
	margin-left: 70px;
}
#text{
	font-size: 13px;
	margin-top: 13px;
	margin-left: 4px;
	color: red;
}
#but{
	width: 16px;
	height: 16px;
	background-color: red;
	position: absolute;
	margin-top: -28px;
	margin-left: 90px;
	border: 2px solid red;
	border-radius: 10px;
}
#word{
	font-size: 13px;
	color: #fff;
	margin-top: 5px;
	text-align: center;
}
.but {
	margin-top: 15px;
	color: red;
	line-height: 20px;
	text-align: center;
}			
		</style>
	</head>
	
	<body>
		
		<div class="box">
			<div id="text"><b>我的购物车</b></div>
			     <img src="https://img2.baidu.com/it/u=1329012137,1035134999&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" />
			<div id="but">
			     <span id="word" onclick="change()">0</span>
			</div>
			<button class="but" onclick="change()"><b>更改数量</b></button>
		</div>
		
		<script type="text/javascript">		
		    var i=0;			
			function change(){
				i++;
				var w=document.getElementById("word");
				w.innerHTML=i;
			}
		</script>
		
	</body>
</html>

四. 石头剪刀布猜拳游戏

1.效果

2.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>猜拳游戏</title>
		<style type="text/css">
			#box{
	width: 500px;
	height: 500px;
	overflow: hidden;
}
#box1{
	width: 1500px;
	height: 500px;
	background-color: aqua;
}
#box1 img{
	width: 500px;
	height: 500px;
}
#box2{
	width: 500px;
	height: 500px;
	overflow: hidden;
	margin-left: 800px;
	margin-top: -500px;
}
#box3{
	width: 1500px;
	height: 500px;
	background-color: aqua;
}
#box3 img{
	width: 500px;
	height: 500px;
}
#inp{
	margin-left: 1200px;
	width: 80px;
	height: 20px;
}
#ra{
	margin-left: 1000px;
}
		</style>
		<script type="text/javascript" >
			window.onload=function(){
	box=document.getElementById("box");
	box2=document.getElementById("box2");
	img=document.getElementsByClassName("img");
	img1=document.getElementsByClassName("img1");
	index=0;
	indexi=0;
	index1=0;
}
function show(x){
	if(x==0){
		index=0;
	}else if(x==1){
		index=500;
	}else if(x==2){
		index=1000;
	}
	box2.scrollLeft=index;
}
function showimg(){
	box.scrollLeft=indexi;
	indexi+=500;
	if(indexi==1500){
	indexi=0;
	}
}
function pk(){
	clearInterval(A);
	if(box.scrollLeft==box2.scrollLeft){
		alert("平手")
	}
	if(box.scrollLeft==0&&box2.scrollLeft==500){
		alert("玩家输")
	}
	if(box.scrollLeft==0&&box2.scrollLeft==1000||box.scrollLeft==500&&box2.scrollLeft==0||box.scrollLeft==1000&&box2.scrollLeft==500){
		alert("恭喜你,玩家赢")
	}
	if(box.scrollLeft==500&&box2.scrollLeft==1000){
		alert("玩家输")
	}
	if(box.scrollLeft==1000&&box2.scrollLeft==0){
		alert("玩家输")
	}
}


		</script>
	</head>
	<body>
		<div id="box">
			<div id="box1">
				<img class="img1" src="img/shitou.png"/><img class="img1" src="img/jiandao.png"/><img class="img1" src="img/bu.png"/>
			</div>
		</div>
		<div id="box2">
			<div id="box3">
				<img class="img" src="img/shitou.png"/><img class="img" src="img/jiandao.png"/><img class="img" src="img/bu.png"/>
			</div>
		</div>
		
		<div id="ra">
			<input type="radio" name="rad" onclick="show(0)"/>
			<input type="radio" name="rad" onclick="show(1)"/>
			<input type="radio" name="rad" onclick="show(2)"/>
		</div>
		<input id="inp" type="button" value="PK" onclick="A=setInterval('showimg()',100);"/>
		<input id="inp" type="button" value="game over" onclick="pk()"/>
	</body>
</html>

五. 活动截止倒计时效果

1.效果

2.代码

<!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>活动截止倒计时</title>
    <style>
        #content{
            width: 100%;
            height: 300px;
            background-color: antiquewhite;
        }
        #time{
            width: 100%;
            height: 200px;
            background-color: aquamarine;
            display: inline-block;
            position: relative;
            top: 50px;
        }
        #time img{
        	width: 115px;
        	height: 95px;
        	margin-left: 2.5px;
        	margin-top: 55px;
        }
    </style>
</head>
<body>
	<h1 style="color: darkcyan; text-align: center;">睡觉倒计时:</h1>
    <div id="content">
        <div id="time">
            <img src="">
            <img src="">
            <img src="">
            <img src="">
            <img src="">
            <img src="">
            <img src="">
            <img src="">
            <img src="">
            <img src="">
            <img src="">
            <img src="">
        </div>
    </div>
    <script>
        window.onload=function(){
            change();

            setInterval(change,1);
        }
        
        
        function change(){
            d = new Date();
            //获得当前毫秒时间
            time = d.getTime();
            d.setHours(23);
            d.setMinutes(59);
            d.setSeconds(59);
            d.setMilliseconds(999);
            time = d.getTime() - time;
            //获得毫秒
            ms = time%1000;
            time = parseInt(time/1000);
            //获得秒
            s = time%60;
            time = parseInt(time/60);
            //获得分
            m = time%60;
            time = parseInt(time/60);
            //获得时
            h = time%24;
            var times = document.getElementById("time");
            
            times.children[0].src = "img/" + parseInt(h/10) + ".png";
            times.children[1].src = "img/" + (h%10) + ".png";
            times.children[2].src = "img/maohao.png";
            times.children[3].src = "img/" + parseInt(m/10) + ".png";
            times.children[4].src = "img/" + (m%10) + ".png";
            times.children[5].src = "img/maohao.png";
            times.children[6].src = "img/" + parseInt(s/10) + ".png";
            times.children[7].src = "img/" + (s%10) + ".png";
            times.children[8].src = "img/maohao.png";
            times.children[9].src = "img/" + parseInt(ms/100) + ".png";
            times.children[10].src = "img/" + (parseInt(ms/10)%10) + ".png";
            times.children[11].src = "img/" + (ms%10) + ".png";
        };
    </script>
</body>
</html>