js 小练习

js 学习之路代码记录

 

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>
打印页面加载的四个状态

 

posted @ 2018-08-08 16:47  GCat  阅读(384)  评论(0)  编辑  收藏  举报