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.从此，以异步相应方式处理用户输入、网络事件等。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <script>

         // hash

         // 哈希方式

         var arr = [1,1,1,1,1,1,2,2,3,3,3,1,1,2,3,3,3,2,1,1];

         Array.prototype.unique = function (){

             var obj ={},

                 arr=[],

                 len = this.length;

             for (var i = 0;i < len;i++){

                 if(!obj[this[i]]){

                     obj[this[i]] = "a";

                     arr.push(this[i]);

                 }

             }

             return arr;

         };

         a = arr.unique();

         document.write(a);

     </script>

 </body>

 </html>

数组去重

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>练习</title>

 </head>

 <body>

     <script>

         // 2.字符串去重

         var stri = "qqqwwweee111333222";

         String.prototype.qc = function () {

             var len = this.length,

                 obj = {},

                 nstr = "";

             for (var i = 0;i < len; i ++){

                 if(!obj[this[i]]){

                     obj[this[i]] = "abc"

                 }

             }

             for (var i in obj){

                 nstr += i

             }

             return nstr

         }

     </script>

 </body>

 </html>

字符串去重

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>工具jstype</title>

 </head>

 <body>

     <script>

         function type(target){

             var ret = typeof(target);

             var template = {

                 "[object Array]" : "array",

                 "[object Object]" : "object",

                 "[object Number]" : "number - object",

                 "[object Boolean]" : "boolean - object",

                 "[object String]" : 'string - object'

             }

             if(target === null){

                 return "null";

             }else if (ret == "object"){

                 var str = Object.prototype.toString.call(target);

                 return template[str]

                 // 数组

                 // 对象

                 // 包装类 Object.prototype.toString

             }else{

                 return ret;

             }

             // 1.分两类  原始值

             // 2.区分引用值

         }

     </script>

 </body>

 </html>

type

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>练习</title>

 </head>

 <body>

     <script>

         // 1.一个字符串[a-z]组成，请找出该字符串第一个只出现一次的字母；

         var arr="qwernyweuiotyiotureioputreowyturyetuioperywioptueiwoareuwoityewuiotyueiorubrueioqwtuioruc";

         function myqc(s){

             var num = {};

             var c = 1;

             var len = s.length;

             for (var i = 0; i < len; i++){

                 // if(num[s[i]]){

                     // num[s[i]][1]++;

                 // }else{

                 //     num[s[i]] = [i,1];

                 // }

                 // 两种判断，一种if判断，一种三目运算符判断

                 num[s[i]] = num[s[i]] ? [i,++num[s[i]][1]] : [i, 1]

             }

             for(var j in num){

                 if (num[j][1] === 1){

                     if (num[j][0] < len){

                         len = j

                     }

                 }

             }

             return len

         }

         var a = myqc(arr);

         console.log(a)

     </script>

 </body>

 </html>

一个字符串[a-z]组成，请找出该字符串第一个只出现一次的字母

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <ul>

         <li>a</li>

         <li>a</li>

         <li>a</li>

         <li>a</li>

         <li>a</li>

     </ul>

     <script>

         // 点击每一个li标签，返回li的索引

         // 使用闭包解决此问题

         var liCol = document.getElementsByTagName("li"),

             len = liCol.length;

         for(var i = 0;i < len;i++){

             (function(j){

                 liCol[j].addEventListener("click",function () {

                     console.log(j)

                 })

             }(i))

         }

     </script>

 </body>

 </html>

点击任意li标签，返回li的索引

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>拖拽</title>

 </head>

 <body>

 <div style="width:100px;height:100px;background-color:red;position:absolute;left:0;top:0;"></div>

     <script>

         var div = document.getElementsByTagName("div")[0];

         var disX,

             disY;

         div.onmousedown = function (e) {

             disX = e.pageX - parseInt(div.style.left);

             disY = e.pageY - parseInt(div.style.top);

             document.onmousemove = function (e) {

                 var event = e || window.event;

                 div.style.left = e.pageX - disX + "px";

                 div.style.top = e.pageY - disY + "px";

             }

             document.onmouseup = function(){

                 document.onmousemove = null;

             }

         }

     </script>

 </body>

 </html>

拖拽box

         document.onkeydown = function(e) {

             console.log(e) //打印出按键信息

             // 左37 上38 右39 下40

             var speed = 5;

             switch(e.which){

                 case 38:

                     div.style.top = parseInt(div.style.top) - speed + "px";

                     break;

                 case 40:

                     div.style.top = parseInt(div.style.top) + speed + "px";

                     break;

                 case 37:

                     div.style.left = parseInt(div.style.left) - speed + "px";

                     break;

                 case 39:

                     div.style.left = parseInt(div.style.left) + speed + "px";

                     break;

             }

         }

打印出按键信息

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>画笔工具</title>

     <!--画笔工具，要配合以下css-->

     <style>

         *{

             margin:0;

             padding:0;

         }

         li{

             box-sizing:border-box;

             float:left;

             width:10px;

             height:10px;

             /*border:1px solid black;*/

         }

         ul{

             list-style:none;

             width:1000px;

             height:1000px;

             /*设置画板区域*/

         }

     </style>

 </head>

 <body>

     <script>

         var ul = document.createElement("ul");

         for(var i = 0; i < 10000; i ++){

             // 设置画板像素

             var li = document.createElement("li");

             li.setAttribute("img-data", 0);

             ul.appendChild(li);

         }

         document.body.appendChild(ul);

         ul.onmouseover = function (e) {

             var event = e || window.event;

             var target = event.target || event.srcElement;

             target.style.backgroundColor = "rgb(0, 255," + target.getAttribute('img-data') +")";

             target.setAttribute('img-data',parseInt(target.getAttribute('img-data' )) + 20 );

         }

     </script>

 </body>

 </html>

画笔

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <ul>

     <li>1</li>

     <li>2</li>

     <li>3</li>

     <li>4</li>

     <li>5</li>

     <li>6</li>

     <li>7</li>

     <li>8</li>

     <li>9</li>

     <li>10</li>

 </ul>

     <script>

         var ul = document.getElementsByTagName("ul")[0];

         ul.onclick = function (e) {

             var event = e || window.event;

             var target = event.target || event.sreElement;

             console.log(target.innerText);

         }

     </script>

 </body>

 </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;

         }

     </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>

         <!--<span class="next">></span>-->

     </div>

     <script>

         // 封装函数上一页下一页

         var ul = document.getElementsByClassName("imgs")[0];

         var s = -200;

         function start(){

             var timer = setInterval(function () {

                 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{

                     clearInterval(timer);//清除定时

                     setTimeout("start()",2000);//过2秒重新开启滚动

                     s -= 200;//归为默认值

                 }

             },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>

第一个自己写的轮播图

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <input type="password" >

     <script>

         document.onkeypress = function () {

             var event = event || window.event;

             console.log(String.fromCharCode(event.charCode))

         }

     </script>

 </body>

 </html>

提取密码框的密码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <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'">

 </body>

 </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>

还没完成的带按钮的轮播图

     <script>

         // 打印页面加载的四个状态

         console.log(document.readyState);

         document.onreadystatechange = function () {

             console.log(document.readyState);

         }

         document.addEventListener("DOMContentLoaded", function () {

             console.log("DOMContentLoaded");

         }, false)

     </script>

打印页面加载的四个状态

巴特西

js 小练习

最新文章

热门文章