js 小練習

時間  2019-12-12
標籤 練習 欄目 JavaScript 简体版
原文   原文鏈接

js 學習之路代碼記錄css

 

js 加載時間線

1.建立Document對象，開始解析web頁面。解析HTML元素和他們的文本內容後添加Element對象和Text節點到文檔中。這個階段document.readyState="loading"
2.遇到link外部css，建立線程加載，並繼續解析文檔
3.遇到script外部js，而且沒有設置async、defer，瀏覽器加載，並阻塞，等待js加載完成並執行該腳本，而後繼續解析文檔。
4.遇到script外部js，而且設置有async、defer，瀏覽器建立線程加載，並繼續解析文檔。對於async屬性的腳本，腳本加載完成後當即執行。（異步禁止使用document.write()）
5.遇到img等，先正常解析dom結構，而後瀏覽器異步加載src，並繼續解析文檔。
6.當文檔解析完成。document.readyState="interactive"
7.文檔解析完成後，全部設置有defer的腳本會按照順序執行。(注意與async的不一樣，但一樣禁止使用document.write())
8.document對象出發DOMContentLoaded事件，這也標誌着程序執行從同步腳本執行階段，轉化爲事件驅動階段。
9.當全部async的腳本加載完成並執行後、img等加載完成後，document.readyState="complete",window對象出發load事件。
10.今後，以異步相應方式處理用戶輸入、網絡事件等。

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9     <script>
10         // hash
11         // 哈希方式
12         var arr = [1,1,1,1,1,1,2,2,3,3,3,1,1,2,3,3,3,2,1,1];
13         Array.prototype.unique = function (){
14             var obj ={},
15                 arr=[],
16                 len = this.length;
17             for (var i = 0;i < len;i++){
18                 if(!obj[this[i]]){
19                     obj[this[i]] = "a";
20                     arr.push(this[i]);
21                 }
22             }
23             return arr;
24         };
25         a = arr.unique();
26         document.write(a);
27     </script>
28 
29 </body>
30 </html>
數組去重

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>練習</title>
 6 </head>
 7 <body>
 8 
 9 
10     <script>
11 
12         // 2.字符串去重
13 
14         var stri = "qqqwwweee111333222";
15         String.prototype.qc = function () {
16             var len = this.length,
17                 obj = {},
18                 nstr = "";
19             for (var i = 0;i < len; i ++){
20                 if(!obj[this[i]]){
21                     obj[this[i]] = "abc"
22                 }
23             }
24             for (var i in obj){
25                 nstr += i
26             }
27             return nstr
28         }
29     </script>
30 
31 </body>
32 </html>
字符串去重

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>工具jstype</title>
 6 </head>
 7 <body>
 8     <script>
 9         function type(target){
10             var ret = typeof(target);
11             var template = {
12                 "[object Array]" : "array",
13                 "[object Object]" : "object",
14                 "[object Number]" : "number - object",
15                 "[object Boolean]" : "boolean - object",
16                 "[object String]" : 'string - object'
17             }
18             if(target === null){
19                 return "null";
20             }else if (ret == "object"){
21                 var str = Object.prototype.toString.call(target);
22                 return template[str]
23                 // 數組
24                 // 對象
25                 // 包裝類 Object.prototype.toString
26             }else{
27                 return ret;
28             }
29             // 1.分兩類  原始值
30             // 2.區分引用值
31         }
32     </script>
33 
34 </body>
35 </html>
type

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>練習</title>
 6 </head>
 7 <body>
 8 
 9 
10     <script>
11         // 1.一個字符串[a-z]組成，請找出該字符串第一個只出現一次的字母；
12         var arr="qwernyweuiotyiotureioputreowyturyetuioperywioptueiwoareuwoityewuiotyueiorubrueioqwtuioruc";
13         function myqc(s){
14             var num = {};
15             var c = 1;
16             var len = s.length;
17             for (var i = 0; i < len; i++){
18                 // if(num[s[i]]){
19                     // num[s[i]][1]++;
20                 // }else{
21                 //     num[s[i]] = [i,1];
22                 // }
23                 // 兩種判斷，一種if判斷，一種三目運算符判斷
24                 num[s[i]] = num[s[i]] ? [i,++num[s[i]][1]] : [i, 1]
25             }
26             for(var j in num){
27                 if (num[j][1] === 1){
28                     if (num[j][0] < len){
29                         len = j
30                     }
31                 }
32             }
33             return len
34         }
35         var a = myqc(arr);
36         console.log(a)
37 
38     </script>
39 
40 </body>
41 </html>
一個字符串[a-z]組成，請找出該字符串第一個只出現一次的字母

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <ul>
 9         <li>a</li>
10         <li>a</li>
11         <li>a</li>
12         <li>a</li>
13         <li>a</li>
14     </ul>
15 
16     <script>
17         // 點擊每個li標籤，返回li的索引
18         // 使用閉包解決此問題
19         var liCol = document.getElementsByTagName("li"),
20             len = liCol.length;
21         for(var i = 0;i < len;i++){
22             (function(j){
23                 liCol[j].addEventListener("click",function () {
24                     console.log(j)
25                 })
26             }(i))
27         }
28 
29 
30     </script>
31 
32 </body>
33 
34 </html>
點擊任意li標籤，返回li的索引

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>拖拽</title>
 6 </head>
 7 <body>
 8 
 9 
10 
11 <div style="width:100px;height:100px;background-color:red;position:absolute;left:0;top:0;"></div>
12 
13     <script>
14 
15         var div = document.getElementsByTagName("div")[0];
16         var disX,
17             disY;
18         div.onmousedown = function (e) {
19             disX = e.pageX - parseInt(div.style.left);
20             disY = e.pageY - parseInt(div.style.top);
21             document.onmousemove = function (e) {
22                 var event = e || window.event;
23                 div.style.left = e.pageX - disX + "px";
24                 div.style.top = e.pageY - disY + "px";
25             }
26             document.onmouseup = function(){
27                 document.onmousemove = null;
28             }
29 
30         }
31 
32     </script>
33 </body>
34 </html>
拖拽box

 

 1         document.onkeydown = function(e) {
 2             console.log(e) //打印出按鍵信息
 3             // 左37 上38 右39 下40
 4             var speed = 5;
 5             switch(e.which){
 6                 case 38:
 7                     div.style.top = parseInt(div.style.top) - speed + "px";
 8                     break;
 9                 case 40:
10                     div.style.top = parseInt(div.style.top) + speed + "px";
11                     break;
12                 case 37:
13                     div.style.left = parseInt(div.style.left) - speed + "px";
14                     break;
15                 case 39:
16                     div.style.left = parseInt(div.style.left) + speed + "px";
17                     break;
18             }
19 
20         }
打印出按鍵信息

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>畫筆工具</title>
 6     <!--畫筆工具，要配合如下css-->
 7     <style>
 8         *{
 9             margin:0;
10             padding:0;
11         }
12         li{
13             box-sizing:border-box;
14             float:left;
15             width:10px;
16             height:10px;
17             /*border:1px solid black;*/
18         }
19         ul{
20             list-style:none;
21             width:1000px;
22             height:1000px;
23             /*設置畫板區域*/
24         }
25     </style>
26 </head>
27 <body>
28     <script>
29 
30         var ul = document.createElement("ul");
31 
32         for(var i = 0; i < 10000; i ++){
33             // 設置畫板像素
34             var li = document.createElement("li");
35             li.setAttribute("img-data", 0);
36             ul.appendChild(li);
37         }
38         document.body.appendChild(ul);
39         ul.onmouseover = function (e) {
40             var event = e || window.event;
41             var target = event.target || event.srcElement;
42             target.style.backgroundColor = "rgb(0, 255," + target.getAttribute('img-data') +")";
43             target.setAttribute('img-data',parseInt(target.getAttribute('img-data' )) + 20 );
44         }
45 
46     </script>
47 
48 
49 </body>
50 </html>
畫筆

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <ul>
 9     <li>1</li>
10     <li>2</li>
11     <li>3</li>
12     <li>4</li>
13     <li>5</li>
14     <li>6</li>
15     <li>7</li>
16     <li>8</li>
17     <li>9</li>
18     <li>10</li>
19 </ul>
20 
21 
22     <script>
23 
24         var ul = document.getElementsByTagName("ul")[0];
25         ul.onclick = function (e) {
26             var event = e || window.event;
27             var target = event.target || event.sreElement;
28             console.log(target.innerText);
29         }
30 
31 
32     </script>
33 </body>
34 </html>
事件委託

 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         /*做圖很差保存，so...*/
  8         *{
  9             margin:0;
 10             padding:0;
 11         }
 12         .img1{background-color:red;}
 13         .img2{background-color:yellow;}
 14         .img3{background-color:green;}
 15         .img4{background-color:pink;}
 16         .nav{
 17             border:2px solid black;
 18             width:200px;
 19             height:150px;
 20             float:left;
 21             left:200px;
 22             top:100px;
 23             overflow:hidden;
 24             /*輪播圖切掉*/
 25             position:relative;
 26         }
 27         ul{
 28             position:absolute;
 29             width:1000px;
 30             height:150px;
 31             float:left;
 32             left:0px;
 33             top:0px;
 34         }
 35         li{
 36             width:200px;
 37             height:150px;
 38             list-style:none;
 39             float:left;
 40             left:0;
 41             top:0;
 42             opacity: .6;
 43         }
 44 
 45 
 46 
 47     </style>
 48 </head>
 49 
 50 <body>
 51     <div class="nav">
 52         <ul class="imgs">
 53             <li class="img1"></li>
 54             <li class="img2"></li>
 55             <li class="img3"></li>
 56             <li class="img4"></li>
 57             <li class="img1"></li>
 58         </ul>
 59         <!--<span class="next">></span>-->
 60     </div>
 61 
 62 
 63     <script>
 64 
 65         // 封裝函數上一頁下一頁
 66 
 67 
 68 
 69 
 70 
 71         var ul = document.getElementsByClassName("imgs")[0];
 72         var s = -200;
 73         function start(){
 74             var timer = setInterval(function () {
 75                 if(ul.style.left == "-800px"){//判斷是否滾動完全部
 76                     setTimeout("start()",2000);
 77                     ul.style.left = "0px"
 78                     clearInterval(timer);
 79                     s = -200;
 80                 }else if(ul.style.left != s + "px"){//判斷是否滾動完成一張圖
 81                     ul.style.left = parseInt(getStyle(ul, "left")) - 1 + "px";
 82                     // 循環滾動
 83                 }else{
 84                     clearInterval(timer);//清除定時
 85                     setTimeout("start()",2000);//過2秒從新開啓滾動
 86                     s -= 200;//歸爲默認值
 87                 }
 88             },0.5)
 89         }
 90         // setTimeout("start()",2000);
 91 
 92 
 93 
 94 
 95 
 96 
 97         function getStyle(elem,prop){
 98             if (window.getComputedStyle){
 99                 return window.getComputedStyle(elem,null)[prop];
100             }else{
101                 return elem.currentStyle[prop];
102             }
103         }
104     </script>
105 
106 </body>
107 </html>
第一個本身寫的輪播圖

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="password" >
 9     <script>
10         document.onkeypress = function () {
11             var event = event || window.event;
12             console.log(String.fromCharCode(event.charCode))
13         }
14     </script>
15 </body>
16 </html>
提取密碼框的密碼

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="text" value="請輸入用戶名" style="color:#999" onfocus="if(this.value == '請輸入用戶名'){this.value ='';this.style.color='black'}" onblur="if(this.value == ''){this.value='請輸入用戶名';this.style.color='#999'}" onchange="this.style.color='black'">
 9 </body>
10 </html>
輸入框功能完善

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*做圖很差保存，so...*/
        *{
            margin:0;
            padding:0;
        }
        .img1{background-color:red;}
        .img2{background-color:yellow;}
        .img3{background-color:green;}
        .img4{background-color:pink;}
        .nav{
            border:2px solid black;
            width:200px;
            height:150px;
            float:left;
            left:200px;
            top:100px;
            overflow:hidden;
            /*輪播圖切掉*/
            position:relative;
        }
        ul{
            position:absolute;
            width:1000px;
            height:150px;
            float:left;
            left:0px;
            top:0px;
        }
        li{
            width:200px;
            height:150px;
            list-style:none;
            float:left;
            left:0;
            top:0;
            opacity: .6;
        }

        .pagebutton{
            width:20px;
            height:20px;
            background-color:black;
            opacity:0.4;
            position:absolute;
            top:65px;
            color:#f1f1f1;
            text-aligh:center center;
        }
        .prev{
            float:left;
            left:0;
        }
        .next{
            float:left;
            left:180px;
        }

    </style>
</head>

<body>
    <div class="nav">
        <ul class="imgs">
            <li class="img1"></li>
            <li class="img2"></li>
            <li class="img3"></li>
            <li class="img4"></li>
            <li class="img1"></li>
        </ul>
        <div class="pagebutton-div">
            <span class="prev pagebutton"><</span>
            <span class="next pagebutton">></span>
        </div>

    </div>


    <script>

        var span = document.getElementsByClassName("prev")[0];
        var span1 = document.getElementsByClassName("next")[0];

        span.onclick = function () {
            pageButton(1)
        }

        span1.onclick = function () {
            pageButton(-1)
        }


        // 封裝函數上一頁下一頁

        function pageButton(n){
            start(n)
            console.log(n)
        }

        var ul = document.getElementsByClassName("imgs")[0];
        var s = -200;
        function start(n){

            var timer = setInterval(function () {
                console.log(s,n)
                if(n != undefined){
                    console.log(111)
                    if(ul.style.left != s + "px") {//判斷是否滾動完成一張圖
                        ul.style.left = parseInt(getStyle(ul, "left")) + n + "px";
                        span.onclick=null;
                        span1.onclick=null;
                    }else{
                        n = undefined;
                        s -= 200;//減去
                        span.onclick = function () {
                            pageButton(1)
                        }
                        span1.onclick = function () {
                            pageButton(-1)
                        }
                    }
                }else if(ul.style.left == "-800px"){//判斷是否滾動完全部
                    setTimeout("start()",2000);
                    ul.style.left = "0px"
                    clearInterval(timer);
                    s = -200;
                }else if(ul.style.left != s + "px"){//判斷是否滾動完成一張圖
                    ul.style.left = parseInt(getStyle(ul, "left")) - 1 + "px";
                    // 循環滾動
                }else if(ul.style.left == s + "px"){
                    s -= 200;//減去
                    n = undefined;
                    // console.log(s)
                    clearInterval(timer);//清除定時
                    setTimeout("start()",2000);//過2秒從新開啓滾動
                }
            },0.5)
        }
        setTimeout("start()",2000);




        function getStyle(elem,prop){
            if (window.getComputedStyle){
                return window.getComputedStyle(elem,null)[prop];
            }else{
                return elem.currentStyle[prop];
            }
        }
    </script>

</body>
</html>
還沒完成的帶按鈕的輪播圖

 

 1     <script>
 2         // 打印頁面加載的四個狀態
 3         console.log(document.readyState);
 4         document.onreadystatechange = function () {
 5             console.log(document.readyState);
 6         }
 7         document.addEventListener("DOMContentLoaded", function () {
 8             console.log("DOMContentLoaded");
 9         }, false)
10 
11     </script>
打印頁面加載的四個狀態
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程