第27天：js-表單獲取焦點和陣列宣告遍歷

weixin_34221276發表於2017-09-09
JS陣列

一、表單

1、this指事件的呼叫者
2、input.value 表單更換內容
3、innerHTML更換盒子裡的內容，文字、標籤都能換。
4、isNaN("12")如果裡面的不是個數字，返回true

二、表單自動獲得焦點
txt.focus();//方法
Onfocus事件

三、滑鼠經過選擇表單
select();選擇
txt.onmouseover=function(){
this.select();
}
四、獲取某類元素
getElementById();//獲取一個標籤元素
getElementsByTagName(“li”);//獲取多個標籤，偽陣列
lis[0],lis[i]

五、placeholder表單佔位符
<input type="text" id="txt" placeholder="必敗的國際品牌">

案例：

1、仿淘寶搜尋框

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>仿淘寶搜尋框</title>
 6     <style>
 7         .search{
 8             width: 400px;
 9             height: 30px;
10             margin: 100px auto;
11             position: relative;
12         }
13         .search input{
14             width: 300px;
15             height: 25px;
16             float: left;
17         }
18         .search label{
19             position: absolute;
20             left: 15px;
21             top:5px;
22             color: #c1c1c1;
23             cursor: text;
24         }
25         .search button{
26             display: block;
27             width: 50px;
28             height: 33px;
29             background-color: orange;
30             color: #fff;
31             text-decoration: none;
32             border: 1px solid #f1f1f1;
33             float: left;
34             position: absolute;
35             top:-1px;
36             left: 303px;
37             font-size: 16px;
38             cursor: pointer;
39 
40         }
41     </style>
42     <script>
43         window.onload=function(){
44             function $(id){return document.getElementById(id);}
45             $("txt").oninput=function(){
46                 if(this.value==""){
47                     $("message").style.display="block";
48                 }else{
49                 $("message").style.display="none";
50                 }
51             }
52         }
53     </script>
54 </head>
55 <body>
56 <div class="search">
57     <input type="text" id="txt">
58     <label for="txt" id="message">國際品牌</label>
59     <!--<input type="text" id="txt" placeholder="必敗的國際品牌">-->
60     <button id="btn">搜尋</button>
61 </div>
62 </body>
63 </html>

執行效果：


2、隔行變色

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>隔行變色</title>
 6 </head>
 7 <style>
 8     .box{
 9         width: 500px;
10         margin: 100px auto;
11     }
12     li{
13         list-style: none;
14         line-height: 30px;
15     }
16     li span{
17         margin-right:20px;
18     }
19     .current{
20         background-color: #c1c1c1!important;
21     }
22 </style>
23 <script>
24     window.onload=function(){
25         var lis=document.getElementsByTagName("li");
26         for(var i=0;i<lis.length;i++){
27             if(i%2==0){
28                 lis[i].style.backgroundColor="#eee";
29             }
30             lis[i].onmouseover=function(){
31                 this.className="current";//一定要用this
32             }
33             lis[i].onmouseout=function(){
34                 this.className="";//一定要用this
35             }
36         }
37 
38     }
39 </script>
40 <body>
41     <div class="box">
42         <ul>
43             <li>
44                 <span>上證指數</span><span>3641</span><span>10-5</span><span>0.16%</span>
45             </li>
46             <li>
47                 <span>上證指數</span><span>3641</span><span>10-5</span><span>0.16%</span>
48             </li>
49             <li>
50                 <span>上證指數</span><span>3641</span><span>10-5</span><span>0.16%</span>
51             </li>
52             <li>
53                 <span>上證指數</span><span>3641</span><span>10-5</span><span>0.16%</span>
54             </li>
55             <li>
56                 <span>上證指數</span><span>3641</span><span>10-5</span><span>0.16%</span>
57             </li>
58             <li>
59                 <span>上證指數</span><span>3641</span><span>10-5</span><span>0.16%</span>
60             </li>
61             <li>
62                 <span>上證指數</span><span>3641</span><span>10-5</span><span>0.16%</span>
63             </li>
64             <li>
65                 <span>上證指數</span><span>3641</span><span>10-5</span><span>0.16%</span>
66             </li>
67         </ul>
68     </div>
69 </body>
70 </html>

執行效果：

3、陣列宣告與遍歷

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>陣列宣告與遍歷</title>
 6 </head>
 7 <script>
 8     var num=10;
 9     var arr=[1,3,5,7,9];//宣告陣列
10     var arr=new Array(1,3,5);
11     var textArr=["劉備","諸葛亮","項羽","張飛","趙雲"];
12     console.log(textArr[1]);//使用陣列
13     console.log(textArr.length)//求陣列長度
14     //遍歷陣列一
15     for(var i=0;i<textArr.length;i++){
16         console.log(textArr[i]);
17     }
18     //遍歷陣列二（推薦）
19     for(var i= 0,len=textArr.length;i<len;i++){
20         console.log(textArr[i]);
21     }
22 </script>
23 <body>
24 </body>
25 </html>

4、獲取某類元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7         window.onload=function(){
 8             //獲取某類元素
 9             /*var lis=document.getElementsByTagName('li');
10             //lis[0].innerHTML="abc";
11             for(var i=0;i<lis.length;i++){
12                 lis[i].innerHTML="abc";
13             }*/
14 
15             //金字塔列印
16             /*function line(){
17                 for(var i=1;i<100;i++){
18                    document.write("<hr width="+i+"%/>");
19                 }
20             }
21             line();*/
22 
23             //自動獲取焦點
24             /*var txt=document.getElementById("txt");
25             txt.focus();//focus()自動獲取焦點的方法*/
26 
27             //自動選擇表單內容
28            /* var txt=document.getElementById("txt");
29             txt.onmouseover=function(){
30             this.select();
31             }*/
32         }
33     </script>
34 </head>
35 <body>
36   <!--  <div id="box">
37         <ul>
38             <li>1234567890</li>
39             <li>1234567890</li>
40             <li>1234567890</li>
41             <li>1234567890</li>
42             <li>1234567890</li>
43         </ul>
44     </div>-->
45   <input type="text" id="txt" value="請輸入內容">
46     <button>搜尋</button>
47 </body>
48 </html>

 

相關文章