JavaScript背景变色小案列

一日不见,如隔三秋
我还是你们熟悉的——爱笑的陈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>

成品欣赏:

建议:大朋友做完送给小朋友玩也不错哦,可以变色,嘻嘻嘻。

最后祝小朋友儿童节快乐,开开心心,快快乐乐每一天。

你可能感兴趣的:(JavaScript,javascript,前端)