js day（3）各种小样例

最新推荐文章于 2022-11-18 17:52:58 发布

谢西顾

最新推荐文章于 2022-11-18 17:52:58 发布

阅读量189

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/yiyiyixin/article/details/81002358

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、图片隐藏（点击图片可选择是否显示该图片）

五、滑过被隐藏的图片也仍然显示图片

二、模拟相册（点击哪个图片，呈现哪个图片在大屏幕上）

六、滑过哪个图片，呈现哪个图片在大屏幕上

七、点击哪个图片，哪个图片变成背景（如果想让div和浏览器没有距离，要自己设置一下margin，marg默认值不是0.调用body标签可以直接使用document.body）

PS：由于同步异步问题，在绑定事件再调用自身要用this

三、value、innerHTML、innerTEXT区别

console.log(input.value);//输出值
console.log(div.innerHTML);//输出全部内容
console.log(div.innerText);//输出双标签内容

四、

1.所有的全局变量都是window的属性

2.所有的全局函数都是window的方法

console.log(document);

八、选中和取消（之后补充）

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript">
		window.οnlοad=function(){
			/*1.图片隐藏
			var button=document.getElementsByTagName('button')[0];
			var img=document.getElementsByTagName("img")[0];
			button.οnclick=function(){
				if(button.innerHTML==="隐藏"){
					button.innerHTML="显示";
					img.style.display="none";
				}
				else{
					button.innerHTML="隐藏";	
					img.style.display="block";
				}
			}*/

			/*2.模拟相册，点击图片，图片改变
			var show=document.getElementById("show");
			var x=document.getElementsByClassName('picture');
			for(var i=0;i<x.length;i++){
				
				x[i].οnclick=function(){
					var url=this.getAttribute("src");
					show.setAttribute("src",url);
					//console.log(this.src);//!!!!!是this
				}
			}*/


			/*3.value、innerHTML、innerTEXT区别
			var div=document.getElementsByTagName("div")[0];
			var input=document.getElementsByTagName("input")[0];
			input.value="000";
			console.log(input.value);//输出值
			console.log(div.innerHTML);//输出全部内容
			console.log(div.innerText);//输出双标签内容
			*/

			/*4.全局属性
			console.log(document);//document是整个文档，它其实也就是body、div这些标签一样
			console.log(document.head);//body、title都行
			window.location.href="https://www.baidu.com";*/

			/*5.图片隐藏和显示进阶
			var x=document.getElementsByTagName("img")[0];
			var y=document.getElementsByTagName("img")[1];
			y.style.display="none";
			x.οnmοuseοver=function(){
				y.style.display="block";
			}
			x.οnmοuseοut=function(){
				y.οnmοuseοver=function(){
					y.style.display="block";
				}
				y.οnmοuseοut=function(){
					y.style.display="none";
				}				
			}*/

			/*6.模拟相册进阶
			var show=document.getElementById("show");
			var x=document.getElementsByClassName('picture');
			for(var i=0;i<x.length;i++){
				
				x[i].οnmοuseοver=function(){
					var url=this.getAttribute("src");
					show.setAttribute("src",url);
				}
			}*/

			/*7.背景切换
			var x=document.getElementsByClassName('picture');
			for(var i=0;i<x.length;i++){
				x[i].index=i+1;//同步异步问题
				x[i].οnclick=function(){									
					console.log(this.index);
					document.body.style.background="url("+this.index+".png) no-repeat";//！！！使用的是document.body
					document.body.style.backgroundSize="cover";
				}
			}*/

			/*8.选中和取消
			var input=document.querySelectorAll("input");

			function $(id){
				return typeof id === "string" ? document.getElementById(id):null;
			}

			$("allchoose").οnclick=function(){
				for(var i=0;i<input.length;i++){
					input[i].checked=true;
				}
			}
			$("allcancel").οnclick=function(){
				for(var i=0;i<input.length;i++){
					input[i].checked=false;
				}
			}
			$("oppositechoose").οnclick=function(){
				for(var i=0;i<input.length;i++){
					if(input[i].checked===true)input[i].checked=false;
					else input[i].checked=true;

			}	
		}*/
	}

	</script>

	<style type="text/css">
		*{
			
			margin: 0px;
		}
		li{
			list-style:none;
			float: left;
			margin-right: 20px;	
		}
		/*7. 
		body{
			background: url(1.png) no-repeat;
			background-size: cover;
		}*/
		#box{
			height:200px;
			background-color: white;
			opacity: 0.5;

		}
	</style>

</head>
<body>
	<!--1.图片隐藏
	<button>隐藏</button>
	<img src="1.png">-->

	<!--2.模拟相册，点击图片，图片改变
	<img id="show" src="1.png">
	<ul>
		<li><img class="picture" src="1.png"></li>
		<li><img class="picture" src="2.png"></li>
		<li><img class="picture" src="3.png"></li>
	</ul>-->

	<!--3.value、innerHTML、innerTEXT区别
	<div>
		<input type="text" value="12345">
		<p>123456789</p>
	</div>-->

	<!--4.
	1.所有的全局变量都是window的属性
	2.所有的全局函数都是window的方法
	-->
	
	<!--5.图片隐藏和显示进阶
	<img src="1.png">
	<img src="2.png">-->

	<!--6.模拟相册进阶
	<img id="show" src="1.png">
	<ul>
		<li><img class="picture" src="1.png"></li>
		<li><img class="picture" src="2.png"></li>
		<li><img class="picture" src="3.png"></li>
	</ul>-->

	<!--7.背景切换
	<div id="box">
	<ul>
		<li><img class="picture" src="1.png"></li>
		<li><img class="picture" src="2.png"></li>
		<li><img class="picture" src="3.png"></li>
	</ul>-->

	<!--8.选中和取消
	<input type="checkbox" class="choose" >1
	<input type="checkbox" class="choose" >2
	<input type="checkbox" class="choose" >3
	<input type="checkbox" class="choose" >4
	<input type="checkbox" class="choose" >5
	<button id="allchoose">全选</button>
	<button id="allcancel">取消选择</button>
	<button id="oppositechoose">反选</button>-->

	

</body>
</html>

谢西顾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js day（3）各种小样例

一、图片隐藏（点击图片可选择是否显示该图片）五、滑过被隐藏的图片也仍然显示图片二、模拟相册（点击哪个图片，呈现哪个图片在大屏幕上）六、滑过哪个图片，呈现哪个图片在大屏幕上七、点击哪个图片，哪个图片变成背景（如果想让div和浏览器没有距离，要自己设置一下margin，marg默认值不是0.调用body标签可以直接使用document.body） PS：由于同步异步问题，...
复制链接

扫一扫