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>
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>
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>
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>
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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
