當前位置：
首頁 >
js 落幕
發(fā)布時間：2025/3/21
47
豆豆
1.關于路由的跳轉
核心是 a 再取出后綴作為參數(shù)判斷 最后 innerHTML 上
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!--這里返回的都是一個放在路由的后綴--> 9 <a href="#/love">愛</a> 10 <a href="#/myself">我自己</a> 11 <div id="app"></div> 12 13 <script> 14 <!--這里是通過location.hash來取出后綴做判斷--> 15 window.onhashchange = function () { 16 console.log(location.hash); 17 switch (location.hash) { 18 case '#/love': 19 document.getElementById("app").innerHTML = "<h2>我愛你</h2>"; 20 break; 21 case "#/myself": 22 document.getElementById("app").innerHTML = "<h1>你是誰</h1>"; 23 break; 24 default: 25 break 26 } 27 28 } 29 </script> 30 31 </body> 32 </html> 路由跳轉2.變量提升 js 的特殊情況?
在js 中 會把 變量提到最前面顯示?
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <script> 9 10 console.log(a); 11 var a = 3; 12 //由于變量提升 會使其變成 var a console.log(a) 13 // a=3 console.log(a) 14 //結果為 undefinded 3 15 console.log(a); 16 17 18 19 console.log(b); 20 { 21 var b = 5; 22 console.log(b); 23 } 24 console.log(b) 25 // 同理 結果為 undefinded 5 5 26 </script> 27 28 </body> 29 </html> 變量提升 示例3.tab欄選項卡
這里主要是通過聯(lián)動 的 方式使頁面和tab欄實現(xiàn)同步
但是會產生變量提升 所以以后會用let 代替 var 取消 變量提升
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 ul{ 12 list-style: none; 13 } 14 #app{ 15 width: 480px; 16 margin: 20px auto; 17 border:1px solid red; 18 } 19 ul{ 20 width: 100%; 21 overflow: hidden; 22 } 23 ul li{ 24 float: left; 25 width: 160px; 26 height: 60px; 27 line-height: 60px; 28 text-align: center; 29 background-color: yellow; 30 } 31 ul li a{ 32 text-decoration : none; 33 color: darkviolet; 34 } 35 li.active{ 36 background-color: red; 37 } 38 p{ 39 display: none; 40 height: 200px; 41 text-align: center; 42 line-height: 200px; 43 background-color: red; 44 } 45 p.active{ 46 display: block; 47 } 48 49 50 51 52 53 54 55 </style> 56 </head> 57 <body> 58 <div id="app"> 59 <ul> 60 <li class="active"> 61 <a href="#">我</a> 62 </li> 63 <li > 64 <a href="#">我</a> 65 </li> 66 <li > 67 <a href="#">我</a> 68 </li> 69 </ul> 70 <p class="active">首頁內容</p> 71 <p >新聞內容</p> 72 <p>圖片內容</p> 73 </div> 74 <script type="text/javascript"> 75 var olis = document.getElementsByTagName('li'); 76 var ops = document.getElementsByTagName("p"); 77 for ( var i=0;i<olis.length;i++) { 78 //這里用olis[i].index = i 是為了防止產生變量提升 79 olis[i].index = i; 80 olis[i].onclick = function () { 81 for ( var j = 0; j <olis.length;j++){ 82 olis[j].className = ""; 83 ops[j].className = ""; 84 } 85 86 87 this.className = "active"; 88 ops[this.index].className = 'active'; 89 } 90 91 } 92 /* 93 * (2) 94 // * 這里可以使用let 代替 var 不會發(fā)生變量提升 95 let olis = document.getElementsByTagName('li'); 96 let oPs = document.getElementsByTagName('p'); 97 98 99 for(let i = 0; i < olis.length; i++){ 100 101 olis[i].onclick = function() { 102 for(let j = 0; j < olis.length; j++){ 103 olis[j].className = ''; 104 oPs[j].className = '' 105 } 106 this.className = 'active'; 107 oPs[i].className = 'active'; 108 } 109 110 }*/ 111 112 113 </script> 114 115 116 117 118 119 120 121 </body> 122 </html> tab欄4.insertBefore 兄弟之間的包含
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 abc{ 8 width: 100px; 9 height: 100px; 10 background-color: red; 11 display: block; 12 } 13 </style> 14 </head> 15 <body> 16 <div id="box"> 17 <p id="child1">alex</p> 18 </div> 19 <script> 20 21 var oDiv = document.getElementById('box'); 22 var op1 = document.getElementById('child1'); 23 24 // var oP = document.createElement('abc'); 25 //appendChild 是父子之間的包含 26 // oDiv.appendChild(oP); 27 28 var op2 = document.createElement('p'); 29 op2.innerText = 'wusir'; 30 31 //insertBefore 是兄弟之間的包含 32 oDiv.insertBefore(op2, op1); 33 34 35 36 37 38 39 </script> 40 41 </body> 42 </html> insertBefore5.時間
<1> 一次性定時器?
可以做異步
開啟一次性定時器:
var time = setTimeout(fn,1000);定時器函數(shù)
清除:
clearTimeout()
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #box{ 8 width: 100px; 9 height: 50px; 10 background-color: red; 11 } 12 </style> 13 14 </head> 15 <body> 16 <button id="start">開啟</button> 17 <button id="clear">清楚</button> 18 <div id="box"></div> 19 <script> 20 var time =null; 21 document.getElementById("start").onclick = function () { 22 //建立時間的函數(shù) 一次性時間 異步 23 time = setTimeout(function () { 24 console.log(111); 25 },2000); 26 console.log(555) 27 }; 28 document.getElementById("clear").onclick = function () { 29 //這里是清除時間 clearTimeout()后面加參數(shù) 30 //一定要在時間顯示前清楚 要不就沒用了 31 clearTimeout(time) 32 33 } 34 </script> 35 36 </body> 37 </html> 一次性定時器<2>循環(huán)周期定時器
可以做動畫?
js 跟 python 一樣 都有垃圾回收機制
but 定時器對象 垃圾回收收不回
開啟循環(huán)定時器
time = setInterval(fn,1000);
清除:
clearInterval()
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #box{ 8 width: 100px; 9 height: 50px; 10 background-color: red; 11 } 12 </style> 13 14 </head> 15 <body> 16 <button id="start">開啟</button> 17 <button id="clear">清楚</button> 18 <div id="box"></div> 19 <script> 20 // var time =null; 21 // document.getElementById("start").onclick = function () { 22 // //建立時間的函數(shù) 一次性時間 異步 23 // time = setTimeout(function () { 24 // console.log(111); 25 // },2000); 26 // console.log(555) 27 // }; 28 // document.getElementById("clear").onclick = function () { 29 // //這里是清除時間 clearTimeout()后面加參數(shù) 30 // //一定要在時間顯示前清楚 要不就沒用了 31 // clearTimeout(time) 32 // 33 // } 34 var time = null; 35 var count = 0; 36 document.getElementById("start").onclick = function () { 37 var oDiv = document.getElementById("box"); 38 // clearInterval(time); 39 //這里是開啟循環(huán) 40 time = setInterval(function () { 41 count+=10; 42 oDiv.style.marginLeft = count+"px"; 43 },50); 44 document.getElementById("clear").onclick = function () { 45 clearInterval(time); 46 } 47 } 48 </script> 49 50 </body> 51 </html> 循環(huán)定時器?6js 面向對象
1 3.js面向對象 2 //使用Object()內置的構造函數(shù)來創(chuàng)建對象 3 4 5 // new Array() 6 // [] 7 8 /* 9 var person = new Object(); 10 11 person.name = 'alex'; 12 13 person.age = 18; 14 15 person.fav = function() { 16 17 alert(this.name); 18 } 19 person.fav(); 20 */ 21 /* 22 // 1.字面量方式創(chuàng)建對象 23 var person = { 24 name:'玖妖', 25 age:18, 26 fav:function() { 27 alert(this.name) 28 } 29 }; 30 31 person.fav(); 32 */ 33 34 //2.工廠模式創(chuàng)建 35 function createPerson(){ 36 var person = new Object(); 37 person.name = 'alex'; 38 39 person.age = 18; 40 41 person.fav = function() { 42 43 alert(this.name); 44 } 45 return person; 46 } 47 48 49 50 function createFruit(){ 51 var fruit = new Object(); 52 fruit.name = 'alex'; 53 54 fruit.age = 18; 55 56 fruit.fav = function() { 57 58 alert(this.name); 59 } 60 return fruit; 61 } 62 var p1 = createPerson(); 63 var f1 = createFruit(); 64 65 console.log(p1 instanceof Object); 66 console.log(f1 instanceof Object); 67 68 69 //3.自定義構造函數(shù) 70 function Person(name,age) { 71 72 this.name = name; 73 this.age = age; 74 this.fav = function() { 75 alert(this.name); 76 } 77 } 78 79 function Fruit(name,age) { 80 81 this.name = name; 82 this.age = age; 83 this.fav = function() { 84 alert(this.name); 85 } 86 } 87 var p1 = new Person('alex',17); 88 var f1 = new Fruit('wusir',19); 89 console.log(p1 instanceof Object); 90 console.log(f1 instanceof Object); 91 console.log(p1 instanceof Person); 92 console.log(f1 instanceof Fruit); 93 94 95 //4.原型對象創(chuàng)建對象 96 function Person(name,age) { 97 this.name = name; 98 this.age = age; 99 } 100 // Person.prototype 它是person的父類 101 102 103 // 原型 prototype 104 Person.prototype.showName = function() { 105 // this指的是person 106 console.log(this.name) 107 } 108 var p1 = new Person('alex',18); 109 console.log(p1); 110 p1.showName(); js面向對象?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
轉載于:https://www.cnblogs.com/zhangqing979797/p/9714406.html
總結
- 上一篇： MYSQL为用户指定权限有哪些
- 下一篇： Perl匿名数组、hash和autovi