0
点赞
收藏
分享

微信扫一扫

JavaScript BOM编程

三分梦_0bc3 2022-03-11 阅读 50

目录

一、图片的切换

1.自动切换

2.按钮切换

 二、更改方块颜色

1.根据id更改

 2.根据标签更改

3. 根据class属性修改

 4.根据name属性修改

 三、输入框赋值,获得焦点与失去焦点

四、图片隐藏与显示

五、左侧菜单的显隐

六、全选功能 

七、元素总结


今天给大家分享一些有意思的网页制作,废话不多说,咱直接上代码

一、图片的切换

1.自动切换

//此段代码需写在script标签外
<style>
	div{
		width: 400px;
		height: 400px;
		background: url("images/0.jpeg") center/cover; //center/cover是向中间平铺
	}
</style>
<div id="d1"></div>
var a=0;
setInterval(()=>{
	a++;
	d1.style.backgroundImage='url("images/'+(a%4)+'.jpeg")';
},1000)  //一秒切换一张

由于自动切换的效果不好展示,请大家自行去试试吧。

2.按钮切换

//此段代码需写在script标签外
<img id="m1" src="images/0.jpeg" width="400px" height="400px">
<br>
<button onclick="fn01()">点我更改图片</button>
function fn01(){
	m1.src="images/1.jpeg";
}

 

图一是切换前,图二是切换后

 注意:图片需要自己移入到所需要的项目中 

 二、更改方块颜色

编写方块并设置颜色

<style>
	div{
		width: 100px;
		height: 100px;
		background: lightcoral;
		display: inline-block;
	}
</style>

<div id="d1" name="b"></div>
<div id="d2" class="a"></div>
<div id="d3" class="a"></div>
<div id="d4" name="b"></div>
<br>
<button onclick="fun01()">根据id更改</button>
<button onclick="fun02()">根据标签更改</button>
<button onclick="fun03()">根据class属性更改</button>
<button onclick="fun04()">根据name属性更改</button>

 如下图所示:

 

 

1.根据id更改

//根据id更改
function fun01(){
	var d=document.getElementById("d1");
	d.style.background="lightsalmon"
}

 2.根据标签更改

//根据标签更改
function fun02(){
	//标签选择器会拿出多个元素 需遍历后再修改
	var ds=document.getElementsByTagName("div");
	for(let i of ds){
		i.style.background="lightblue"
	}
}

3. 根据class属性修改

//根据class属性修改
function fun03(){
	//类选择器也会拿出多个元素 需遍历后修改
	var c=document.getElementsByClassName("a");
	for(let i of c){
	    i.style.background="lawngreen"
	}
}

 4.根据name属性修改

//根据name属性修改
function fun04(){
	//类选择器也会拿出多个元素 需遍历后修改
	var d=document.getElementsByName("b");
	for(let i of d){
		i.style.background="lightseagreen"
	}
}

 三、输入框赋值,获得焦点与失去焦点

<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<br>
<button onclick="fun('哈哈')">哈哈</button>
<button onclick="fun('嘻嘻')">嘻嘻</button>

定义十个输入框和两个按钮,如下图所示 

 

<script>
	function fun(a){
		//拿到所有的输入框
		var is=document.getElementsByTagName("input")
		//赋值
		for(let i of is){
			i.value=a   //a是传进来的参数,也就是按钮上的字
		}
	}
			
	(()=>{
		var is=document.getElementsByTagName("input")
		for(let i of is){
		//给元素的获得焦点事件赋值
		i.onfocus=()=>{
			i.value=""   //获得焦点后清空输入框
		    }
		//给元素的失去焦点事件赋值
		i.onblur=()=>{
			i.value="失去焦点"   //失去焦点后的赋值
		    }
		}
	})();
</script>

点击“哈哈”按钮后

获得焦点与失去焦点展示,获得焦点清空输入框,失去焦点后给输入框赋值“失去焦点” 

 

四、图片隐藏与显示

<style>
	div{
		width: 200px;
		height: 200px;
		background: url(images/2.jpeg) center/cover;
	}
</style>

<div id="d1"></div>
<button onclick="fun01()">①点我有惊喜</button>
<button onclick="fun02()">②点我有惊喜</button>

 

//隐藏后页面没有空间
function fun01(){
	if(d1.style.display==="none"){
		d1.style.display="block"
	}else{
		d1.style.display="none"
	}
}
			
//隐藏后页面有空间
function fun02(){
	if(d1.style.opacity==0){
		d1.style.opacity=1
	}else{
		d1.style.opacity=0
	}
}

  

一号按钮是调用了 fun01() 函数,隐藏后没有空间。二号按钮是调用了 fun02() 函数,隐藏后有空间,所以按钮上有一片空白。

五、左侧菜单的显隐

编写左侧菜单

    <ul>
			<li><i onclick="fun03('u1')">家电</i>
				<ul id="u1">
					<li>电视机</li>
					<li>冰箱</li>
					<li>洗衣机</li>
				</ul>
			</li>
			<li><i onclick="fun03('u2')">水果</i>
				<ul id="u2">
					<li>苹果</li>
					<li>西瓜</li>
					<li>菠萝</li>
				</ul>
			</li>
		</ul>

 

 菜单的显隐如上图所示。

六、全选功能 

定义多个多选框

    <table>
			<tr><td><input type="checkbox" onclick="fun04(this.checked)"/>全选</td></tr>
			<tr><td><input type="checkbox" /></td></tr>
			<tr><td><input type="checkbox" /></td></tr>
			<tr><td><input type="checkbox" /></td></tr>
			<tr><td><input type="checkbox" /></td></tr>
			<tr><td><input type="checkbox" /></td></tr>
		</table>
function fun04(check){
	var is=document.getElementsByTagName("input")
		for(let i of is){
			i.checked=check
		}
}

 给第一个多选框添加点击事件,当点击第一个多选框后,将剩余当多选框附上第一个多选框的状态。

七、元素总结

 

 

举报

相关推荐

0 条评论