JavaScript背景变色小案列
作者： 时间：2022-06-21阅读数：人阅读
一日不见，如隔三秋
我还是你们熟悉的——爱笑的陈sir
时间给勤勉的人留下智慧的力量，
给懒惰的人留下空虚和悔恨。
勤学的人，总是感到时间过得太快；懒惰的人，却总是埋怨时间跑得太慢。
今天是六一儿童节，阳光明媚，鸟语花香，看着孩子们天真无邪的笑容，不禁心生感慨!赞曰：
万物有异同，护犊情意浓。
六一是儿童，九五化蛟龙。
今日少年郎，天生有殊荣。
国家逢盛世，百业共兴隆。
未来责任重，千秋露峥嵘。
敢做栋梁才，中华万世雄。
快乐的时光总是短暂的，嘻嘻嘻。
上次写的那一篇英雄联盟轮播图逻辑，写起来麻烦又繁琐，还容易出bug（画面感油然而生），有人反馈有没有一种高效，省时、省力以提高效率的写法呢？事实证明有。今天通过这篇背景变色小案列，进阶一下。
英雄联盟轮播图逻辑
背景变色小案列
<!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>
div{
width: 300px;
height: 380px;
background-color:purple;
margin: 30px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<script>
点击对应div时，让其背景颜色改为红色
通过 id找到对应的元素
var div1=document.getElementById("div1")
var div2=document.getElementById("div2")
var div3=document.getElementById("div3")
点击事件onclick
div1.onclick=function(){
div1.style.backgroundColor="red"
}
div2.onclick=function(){
div2.style.backgroundColor="blue"
}
div3.onclick=function(){
div3.style.backgroundColor="green"
}
for(var n=1;n<4;n++){
//1,2,3
var divn=document.getElementById("divn")
}
在变量定义时 变量名称不能包含其他的变量
var x=100
// console.log(x)
在变量定义时 变量名称不能包含其他的变量
错误演示
var yx=20
//console.log(y)
document.getElementByTagName()
//在文档中通过标签名称找到对应的元素，放入数组中
var divs=document.getElementsByTagName("div")
//console.log(divs)
依次拿出数组中的元素添加事件
for(var n=0;n<divs.length;n++){
// console.log(divs[n])
divs[n].onclick=function(){
//console.log(1)
但点击第一个div n=0 divs[0]
//console.log(n)
this对象：this指向 发送事件的元素 事件源
//console.log(this)
this.style.backgroundColor="skyblue"
}
}
完整版源码：
<!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>
div{
width: 300px;
height: 380px;
background-color:purple;
margin: 30px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<script>
//点击对应div时，让其背景颜色改为红色
//通过 id找到对应的元素
// var div1=document.getElementById("div1")
// var div2=document.getElementById("div2")
// var div3=document.getElementById("div3")
// //点击事件onclick
// div1.οnclick=function(){
// div1.style.backgroundColor="red"
// }
// div2.οnclick=function(){
// div2.style.backgroundColor="blue"
// }
// div3.οnclick=function(){
// div3.style.backgroundColor="green"
// }
// for(var n=1;n<4;n++){
// //1,2,3
// var divn=document.getElementById("divn")
// }
//在变量定义时 变量名称不能包含其他的变量
// var x=100
// console.log(x)
//在变量定义时 变量名称不能包含其他的变量
//错误演示
// var yx=20
// console.log(y)
//document.getElementByTagName()在文档中通过标签名称找到对应的元素，放入数组中
var divs=document.getElementsByTagName("div")
// console.log(divs)
//依次拿出数组中的元素添加事件
for(var n=0;n<divs.length;n++){
// console.log(divs[n])
divs[n].onclick=function(){
//console.log(1)
//但点击第一个div n=0 divs[0]
//console.log(n)
//this对象：this指向 发送事件的元素 事件源
// console.log(this)
this.style.backgroundColor="skyblue"
}
}
</script>
</body>
</html>
成品欣赏：
建议：大朋友做完送给小朋友玩也不错哦，可以变色，嘻嘻嘻。
最后祝小朋友儿童节快乐，开开心心，快快乐乐每一天。
本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：licqi@yunshuaiweb.com
上一篇:前端面试八股文（超详细）
下一篇:如果再写for循环，我就锤自己了
