javaScriptWebAPI-02

  1 DOCTYPE html>
  2 html lang="en">
  3 head>
  4     meta charset="UTF-8">
  5     title>javaScriptAPI03title>
  6     style>
  7         #div01{
  8             width: 200px;
  9             height: 200px;
 10         }
 11         
 12     .news{
 13         width: 400px;
 14         height: 300px;
 15         border: 1px solid grey;
 16     }
 17     #hd{
 18         width: 380px;
 19         height: 70px;
 20 
 21         display: flex;
 22     }
 23     #hd span{
 24         display: block;
 25         height: 70px;
 26         flex:1;
 27         background-color: pink;
 28         line-height: 70px;
 29         text-align: center;
 30     }
 31     #hd span:nth-child(1){
 32         
 33         margin-left: 10px;
 34 
 35     }
 36 
 37 
 38     #bd{
 39         position: relative;
 40         width: 370px;
 41         height: 220px;
 42         left: 10px;
 43     }
 44     #bd div{
 45         width: 370px;
 46         height: 220px;
 47         background-color: pink;
 48         position: absolute;
 49     }
 50     .hidden{
 51         display: none;
 52     }
 53     .show{
 54         display: block;
 55 
 56     }
 57     style>
 58 head>
 59 body>
 60 
 61     div id="div01">div>
 62 
 63     input type="button" value="关灯" id="btn01">
 64     
 65     div class="news">
 66     div id="hd">
 67         span>体育span>
 68         span>娱乐span>
 69         span>新闻span>
 70         span>综合span>
 71     div>
 72 
 73     div id="bd">
 74         div>我是体育模块div>
 75         div>我是娱乐模块div>
 76         div>我是新闻模块div>
 77         div>我是综合模块div>
 78     div>
 79     div>
 80 
 81     script >
 82         //样式操作
 83         function myCls$(id){
 84             return document.getElementsByClassName(id);
 85         }
 86         function my$(id){// 函数封装获取id
 87             return document.getElementById(id);
 88         }
 89         function myTag$(id){// 函数封装获取id
 90             return document.getElementsByTagName(id);
 91         }
 92         // console.log(typeof(my$())); //Nunber
 93 
 94         console.log(my$("div01").style);    //全是CSS属性,值都是字符串
 95         
 96         my$("div01").style.backgroundColor = "red";
 97 
 98 
 99         //开关灯操作
100         var off = false;
101         my$("btn01").onclick = function() {
102             if (off == false){
103 
104                 // console.log(myTag$("body")[0].style);
105                 myTag$("body")[0].style.backgroundColor = "black";
106                 
107 
108                 console.log(myTag$("body"));
109                 off = true;
110                 this.value = "开灯";
111 
112             }
113             else{
114                 myTag$("body")[0].style.backgroundColor = "white";
115                 off = false;
116                 this.value = "关灯";
117 
118             }
119         }
120 
121         //新事件 :当鼠标移入 onmouseover
122         //          当鼠标移出 onmouseout
123         //          获得了焦点 onfocus
124         //          失去了焦点 
125 
126 
127         //综合模块切换高亮显示
128 
129         var hd =my$("hd");
130         var bd =my$("bd");
131         // console.log(hd);
132         var spans = hd.getElementsByTagName("span");
133         var divs = bd.getElementsByTagName("div");
134         // console.log(divs[1]);
135 
136 
137         // console.log(spans);
138 
139         //上头的各个模块高亮显示
140 
141     
142 
143         var fn = function(){
144             oldColor = this.style.backgroundColor;
145             this.style.backgroundColor = "grey";
146             var index = this.getAttribute("index");
147             var nIndex = Number(index);
148 
149             for(var i = 0;idivs.length;i++){
150                 if(i == nIndex){
151                     divs[i].className = "show";
152                 }
153                 else{
154                     divs[i].className = "hidden";
155                     divs[i].style.backgroundColor = "grey";
156                 }
157             }
158     
159         }
160 
161         var fn1 = function(){
162             
163             this.style.backgroundColor = oldColor;
164             console.log(this.style.backgroundColor);
165         }
166 
167         for(var i = 0;ispans.length;i++){//啊哈
168 
169             
170             divs[i].className = "hidden";
171             // spans[i].onmouseover = function(){
172                 
173             //     this.style.backgroundColor = "blue";
174             // }
175 
176             spans[i].setAttribute("index",i);//给spans设置一个自定义的值,然后留着给div用,这个div是显示的,其他的div会隐藏
177 
178             spans[i].onmouseover = fn;// 其中,fn中的this等于fn.而fn又等于spans[i],
179 
180             spans[i].onmouseout = fn1;
181         }    
182         console.log(divs.length);
183         
184         
185     script>
186 body>
187 html>