<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??碼云GVP開源項目 12k star Uniapp+ElementUI 功能強大 支持多語言、二開方便! 廣告
                ## 第1天 ### 1.js基本介紹.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <a href="" onclick="alert(1)">百度</a> <!-- JavaScript js是什么? 一種基于客戶端瀏覽器、面向(基于)對象、事件驅動式的網頁腳本語言 js特點: 簡單、易學、易用 跨平臺 動態、交互式的操作方式 js能做什么? 表單驗證 網頁特效 js不能做什么? 不能操作數據庫 不能操作文件 如何學習? 1.基本語法 (ECMAScript) 2.BOM 瀏覽器對象 3.DOM 文檔對象模式 --> </body> <script> // alert(1); </script> </html> ~~~ ### 2.js的引入.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 引入外部的css文件 --> <link rel="stylesheet" href=""> <!-- 4.通過外部引入js文件 --> <script src="./js.js"> 寫在這里面的代碼無效 外部引入的js標簽對里面的內容相當于注釋 alert('我是寫在引入外部js同時,寫的js代碼'); </script> </head> <body> <!-- 2.通過http協議引入js --> <a href="http://www.baidu.com">百度</a> <a href="javascript:alert(1)">百度</a> <!-- 通過return false阻止默認行為 --> <a href="" onclick="return false">去百度</a> <a href="http://www.baidu.com" onclick="return test();">百度1</a> <!-- 3.通過事件引入js代碼 --> <a href="http://www.bai.com" onclick="alert('想去百度?')">去百度</a> <a href="http">去百度</a> </body> <script> //1.直接寫在script標簽里面 //這是寫在js里面的代碼 /* 這是js的多行注釋 */ // alert(1); function test() { return false; } </script> </html> ~~~ ### 3.js能出現的位置.html ### ~~~ <script> // alert(1); </script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> <script> //js代碼可以出現在html中的任何位置,除了title里面 alert(1); </script> </title> <script> // alert(1); </script> </head> <body> <script> // alert(1); </script> <div> <script> // alert(1); </script> </div> </body> <script> // alert(1); </script> </html> ~~~ ### 4.js代碼的執行順序.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style>#box{width:200px; height:200px; background:pink;}</style> </head> <body> <div id="box" title="" style=""></div> <script> //js代碼執行順序跟html代碼同步 // alert(1); </script> <!-- <a href="">我愛你</a> --> <script> //找對象 改屬性 //1.找對象 var box = document.getElementById('box'); // alert(box); //2.改屬性 box.title = '我愛你們'; box.style.width = '400px' box.style.background = 'orange'; // alert(2); </script> </body> </html> ~~~ ### 5.js調試方式.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button onclick="test();">求虐</button> <script> //6.debugger 終斷代碼,點一步執行一步 // debugger; //1.alert(); 彈出框 終斷程序執行 // alert(1); //2.document.write() 相當于php中的echo 有一個致命東西,代碼執行完畢之后,會覆蓋掉你整個文件 // document.write('我愛你'); // document.write('<br>'); function test() { // document.write('我恨你,去死吧!!'); } //test(); //3.console.log() 在控制臺日志里面輸出 不能解析html標簽\r\n console.log(111); console.error('我愛你'); //4.console.dir() 相當于我們php中print_r 打印數組 var list = [1,2,3,4,5]; //定義數組 console.dir(list); //5.document.title document.title = '我愛你'; document.onmousemove = function(e) { document.title = 'X:' + e.clientX + 'Y:' + e.clientY; // document.title = e.clientY; } </script> </body> </html> ~~~ ### 6.跟隨鼠標移動的圖片.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #img{position:absolute; left:100px; top:100px;} </style> </head> <body> <img src="./4.jpg" alt="" width="200px" id="img"> <script> //1.找對象 var img = document.getElementById('img'); //2.改屬性 document.onmousemove = function(e) { img.style.top = e.clientY + 'px'; img.style.left = e.clientX + 'px'; } </script> </body> </html> ~~~ ### 7.奇葩的運算符.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> //js嚴格區分大小寫 //運算符 // + 運算 連接符 // 如果兩邊都是數字的話,那么是運算 var num = 10 + 10; // alert(num); //如果有一邊是字符串,那么就是拼接 // var str = 'hello' + ' world'; var str = 'hello' + 10; // alert(str); //+= var num = 5; num = num += 'hello'; //num = num + 'hello' // alert(num); document.write(10 + 10 +10); //30 document.write('<br>'); document.write('10' + 10 +10); //101010 document.write('<br>'); document.write(10 + '10' +10); //101010 document.write('<br>'); document.write(10 + 10 +'10'); //2010 document.write('<br>'); // . 的 對象屬性訪問 var obj = {name:'jack',age:18} // alert(obj.name); // alert(obj['name']); //. 跟[] 的區別 .不解析變量 []解析變量 var str = 'name'; // alert(obj.str); // alert(obj[str]); //奇葩的分號 ; 命令執行符 //在js代碼中,換行也是命令執行符 document.write('我愛你') document.write('我愛你') //不要讓我看見這樣的代碼 //換行產生錯誤的時候,不再是命令執行符 var num = 10 alert(num); </script> </body> </html> ~~~ ### 8.表格隔行變色.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table width="600" border="1" id="tab"> <tr> <td>001</td> <td>002</td> <td>003</td> <td>004</td> <td>005</td> <td>006</td> <td>007</td> <td>008</td> <td>009</td> <td>010</td> </tr> <tr> <td>001</td> <td>002</td> <td>003</td> <td>004</td> <td>005</td> <td>006</td> <td>007</td> <td>008</td> <td>009</td> <td>010</td> </tr> <tr> <td>001</td> <td>002</td> <td>003</td> <td>004</td> <td>005</td> <td>006</td> <td>007</td> <td>008</td> <td>009</td> <td>010</td> </tr> <tr> <td>001</td> <td>002</td> <td>003</td> <td>004</td> <td>005</td> <td>006</td> <td>007</td> <td>008</td> <td>009</td> <td>010</td> </tr> <tr> <td>001</td> <td>002</td> <td>003</td> <td>004</td> <td>005</td> <td>006</td> <td>007</td> <td>008</td> <td>009</td> <td>010</td> </tr> <tr> <td>001</td> <td>002</td> <td>003</td> <td>004</td> <td>005</td> <td>006</td> <td>007</td> <td>008</td> <td>009</td> <td>010</td> </tr> <tr> <td>001</td> <td>002</td> <td>003</td> <td>004</td> <td>005</td> <td>006</td> <td>007</td> <td>008</td> <td>009</td> <td>010</td> </tr> <tr> <td>001</td> <td>002</td> <td>003</td> <td>004</td> <td>005</td> <td>006</td> <td>007</td> <td>008</td> <td>009</td> <td>010</td> </tr> <tr> <td>001</td> <td>002</td> <td>003</td> <td>004</td> <td>005</td> <td>006</td> <td>007</td> <td>008</td> <td>009</td> <td>010</td> </tr> <tr> <td>001</td> <td>002</td> <td>003</td> <td>004</td> <td>005</td> <td>006</td> <td>007</td> <td>008</td> <td>009</td> <td>010</td> </tr> </table> <script> //1.找對象 var tab = document.getElementById('tab'); var trs = tab.getElementsByTagName('tr'); // console.dir(trs); // alert(trs.length); //2.改屬性 for(var i=0; i<trs.length; i++) { if (i % 3 ==0) { trs[i].bgColor = 'red'; } else if(i % 3 ==1) { trs[i].bgColor = 'green'; } else { trs[i].bgColor = 'blue'; } } </script> </body> </html> ~~~ ### 9.with.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> <script> // alert(this); // with(window){ // document.write('我愛著你'); // document.write('我愛著你'); // document.write('我愛著你'); // } // window.document.write('我愛著你'); with(document){ write('我愛你') write('我愛你') write('我愛你') write('我愛你') write('我愛你') } </script> </html> ~~~ ### 10.js流程控制.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> <script> //流程控制 //分支 if else switch() if else if else var num = 10; if (num > 10) { } else if(num >5) { } else { } var num = '10'; //要求數據類型嚴格匹配 switch(num) { case '10': // alert(num); break; case '20': alert(num); break; } //循環 for whiel do-while() foreach //for-in 增強版for循環 var list = [1,2,3,4,5]; //foreache($list as $key=>$val) for (key in list) { var val = list[key]; document.write(key); document.write(list[key]); } </script> </html> ~~~ ### 11.定時器.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button onclick='stop();'>哥不想等了</button> </body> <script> //定時器 //一次性的 //setTimeout() //第一個參數是一個回調函數 //第二個參數時間 單位毫秒 /* setTimeout('test()',3000); function test() { alert(1); } */ timmer = setTimeout(function(){ alert('大爺來了'); },5000); // clearTimeout(timmer); //周期性 //setInterval() timmer1 = setInterval(function(){ console.log(1); // document.write(111); },1000); function stop() { //清除鬧鐘 clearTimeout(timmer); clearInterval(timmer1); } </script> </html> ~~~ ### 12.移動的盒子.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{width:200px; height:200px; background:pink; position:absolute; left:10px;} </style> </head> <body> <div id="box"></div> </body> <script> //1.找對象 var box = document.getElementById('box'); //2.該屬性 var num = 0; setInterval(function(){ num +=5; box.style.left = num + 'px'; },20); </script> </html> ~~~ ### 13.進度條.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #die{width:600px; height:30px; border:1px solid yellow;} #son{width:10%; height:30px; background:green;} </style> </head> <body> <div id="die"> <div id="son"></div> </div> </body> <script> //1.找對象 var son = document.getElementById('son'); //2.改屬性 var num = 0; timmer = setInterval(function(){ son.style.width = num + '%'; if (num ==100) { clearInterval(timmer); alert('片子下載完成,請欣賞!!'); } num++; },20); </script> </html> ~~~ ### 14.新消息提醒.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> <script> // document.title = '【新消息】'; // document.title = '【  】'; var mark = true; setInterval(function(){ if (mark) { document.title = '【新消息】'; mark = false; } else { document.title = '【   】'; mark = true; } },500); </script> </html> ~~~ ### 15.等待按鈕.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <center> <p>全都說廢話啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>全都說廢話啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>全都說廢話啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>全都說廢話啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>全都說廢話啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>全都說廢話啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>全都說廢話啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>全都說廢話啊啊啊啊啊啊啊啊啊啊啊啊</p> <p>全都說廢話啊啊啊啊啊啊啊啊啊啊啊啊</p> <button id="btn">(10秒后)下一步</button> </center> </body> <script> //1.找對象 var btn = document.getElementById('btn'); //2.改屬性 btn.disabled = 'true'; num = 10; timmer = setInterval(function(){ num--; btn.innerHTML = '(' + num + '秒后)下一步'; if (num == 0) { clearInterval(timmer); btn.disabled = false; btn.innerHTML = '下一步'; } },1000); </script> </html> ~~~
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看