JavaScript基础之第十一天js效果实战2

于 2020-05-02 21:54:40 发布
阅读量168 收藏 1
点赞数
分类专栏： 前端 文章标签： css js html javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/greek7777/article/details/105895067
版权

  1. 元素样式操作

    1. 元素显隐
      1. 代码 
        1. <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- css代码 -->
		<style type="text/css">
			*
			{
				padding: 0px;
				margin:0px;
			}
			#btn
			{
				display: block;
				margin:0 auto;
			}
			/* 盒模型 */
			#xhz
			{
				width: 400px;
				height: 150px;
				border:1px solid black;
				background-color: #245269;
				margin:0 auto;
				text-align: center;
				padding-top:50px;
				color:burlywood;
				font-size: 40px;;
			}
		</style>
	</head>
	<body>
		<!-- HTML代码 -->
		<button id="btn" type="button">点击</button>
		<div id="xhz">我是可显示隐藏盒子</div>
	</body>
		<!-- js代码 -->
	<script type="text/javascript">
		// 获取按钮btn
		var btn=document.getElementById("btn");
		// 获取盒模型div
		var xhz=document.getElementById("xhz" )
		// 按钮点击事件：用户点击按钮之后盒子隐藏，默认情况下显示
		btn.onclick=function()
		{
			xhz.style.display='none';
		}
		// 按钮点击事件增强版:用户能够点击一次隐藏,再点击一次显示效果
		// 类似于设置一个锁:开锁,上锁
		var lock=1;
		btn.onclick=function()
		{
			if(lock==1)
			{
				xhz.style.display='none';
				lock=0;
			}
			else
			{
				xhz.style.display='block';
				lock=1;
			}
		}
	</script>
</html>

           

      2. 效果图
    2. 下滑显隐
      1. 代码
        1.  
      2. 效果
        1.  
    3. 点击变色
      1. 代码 
        1. <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			.box{
				width: 800px;
				height: 600px;
				margin: 0 auto;
			}
			.xhz{
				width: 100px;
				height: 100px;
				float: left;
				margin: 10px;
				text-align: center;
				line-height: 100px;
				color: white;
			}
		</style>
	</head>
	<body>
		<!-- html代码 -->
		<div class="box">
			<div class="xhz" style="background:green"></div>
			<div class="xhz" style="background:green"></div>
			<div class="xhz" style="background:green"></div>
			<div class="xhz" style="background:green"></div>
			<div class="xhz" style="background:green"></div>
			<div class="xhz" style="background:green"></div>
			<div class="xhz" style="background:green"></div>
			<div class="xhz" style="background:green"></div>
			<div class="xhz" style="background:green"></div>
			<div class="xhz" style="background:green"></div>
			<div class="xhz" style="background:green"></div>
			<div class="xhz" style="background:green"></div>
			<div class="xhz" style="background:green"></div>
			<div class="xhz" style="background:green"></div>
			<div class="xhz" style="background:green"></div>
			<div class="xhz" style="background:green"></div>
			<div class="xhz" style="background:green"></div>
			<div class="xhz" style="background:green"></div>			
		</div>
	</body>
	<!-- js代码 -->
	<script type="text/javascript">
		// 获取所有的xhz的元素
		var xhz=document.getElementsByClassName("xhz");
		var lock=1;//开锁
		//lock相当一把锁，
		// 给所有的xhz的元素加上事件
		for(var i=0;i<xhz.length;i++)
		{
			xhz[i].onclick=function()
			{
				if(lock==1)
				{
					// 在事件中this指向了当前对象
					this.style.background='red';
					lock=2;
				}
				else
				{
					this.style.background='blue';
					lock=1;
				}
				// 点击之后盒子内部提示语我变色了
				this.innerHTML='我变色了';
			}
		}
	</script>
</html>

           

      2. 效果
    4. 围棋效果
      1. 代码 
        1. <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			.box{
				width: 700px;height: 700px;margin: 0 auto;
				background: url(img/wqqp.jpg) no-repeat 0/100% 100%;
				position: relative;
			}
			.wq{
				width: 670px;height: 670px;position: absolute;
				top: 18px;left: 18px;
			}
			.wqqz{
				width: 25px;height: 25px;border-radius:50% ;
				margin: 5px;background: rgba(0,0,0,0);
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="wq">
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
				<div class="wqqz"></div>
			</div>
		</div>
		
		
		<script type="text/javascript">
			var wqqz = document.getElementsByClassName("wqqz");
			var abc = 1;
			for (var i=0;i<wqqz.length;i++) {
				wqqz[i].onclick = function(){
					if(abc==1){
						this.style.background="#000";
						abc = 2;
					}else{
						this.style.background="#ccc";
						abc = 1;						
					};
					
					this.style.boxShadow="3px 3px 1px #666";
				};
			};
		</script>
	</body>
</html>

           

      2. 效果
    5. 选项卡切换 
      <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding:0px;
			}
			li{
				list-style: none;
				float: left;
				border: 1px solid red;
				width: 100px;
				text-align: center;
				cursor: pointer;
			}
			#contentBox{
				border: 1px solid red;
				width: 406px;
				text-align: center;
			}
			#contentBox div{
				height: 300px;
				border: 1px solid red;
			}
			ul{
				overflow: hidden;
			}
			#con_one_2{
				display: none;
			}
			#con_one_3{
				display: none;
			}
			#con_one_4{
				display: none;
			}
			.bg{
				background-color: purple;
			}
			.bgn{
				background-color: white;
			}
		</style>
	</head>
	<body>
		<ul>
			<li id="one1" onmouseover="setTab(1);">
				新闻1
			</li>
			<li id="one2" onmouseover="setTab(2);">
				新闻2
			</li>
			<li id="one3" onmouseover="setTab(3);">
				新闻3
			</li>
			<li id="one4" onmouseover="setTab(4);">
				新闻4
			</li>
		</ul>
		<div id="contentBox">
			<div id="con_one_1">
				
				新闻联播1
			</div>
			<div id="con_one_2">
				新闻联播2
			</div>
			<div id="con_one_3">
				新闻联播3
			</div>
			<div id="con_one_4">
				新闻联播4
			</div>
		</div>
	</body>
	<script type="text/javascript">
		function setTab(n){
		<!-- n=1时 先隐藏，后显示 -->
			for (var i = 1; i < 5; i++){
				var obj1 = document.getElementById("con_one_" + i);//盒子
				var obj1n = document.getElementById("one" + i);//按钮
				obj1.style.display = "none";//所有盒子隐藏
				obj1n.className = "bgn";
			}
			<!-- //以下实现了点击的时候执行对象显示 -->
			var obj = document.getElementById("con_one_" + n);//第n个盒子
			var objn = document.getElementById("one" + n);//第n个按钮
			obj.style.display = "block";//第n个盒子显示
			objn.className = "bg";
		}
		<!-- function setTab1() -->
		<!-- { -->
			<!-- con_one_1.style.display="block"; -->
			<!-- con_one_2.style.display="none"; -->
			<!-- con_one_3.style.display="none"; -->
			<!-- con_one_4.style.display="none"; -->
		<!-- }function setTab2() -->
		<!-- { -->
			<!-- con_one_1.style.display="none"; -->
			<!-- con_one_2.style.display="block"; -->
			<!-- con_one_3.style.display="none"; -->
			<!-- con_one_4.style.display="none"; -->
		<!-- }function setTab3() -->
		<!-- { -->
			<!-- con_one_1.style.display="none"; -->
			<!-- con_one_2.style.display="none"; -->
			<!-- con_one_3.style.display="block"; -->
			<!-- con_one_4.style.display="none"; -->
		<!-- }function setTab4() -->
		<!-- { -->
			<!-- con_one_1.style.display="none"; -->
			<!-- con_one_2.style.display="none"; -->
			<!-- con_one_3.style.display="none"; -->
			<!-- con_one_4.style.display="block"; -->
		<!-- } -->
	</script>
</html>

       

       

      1. 代码

        1.  

      2. 效果

 

geekmice
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值