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

                ThinkChat2.0新版上線,更智能更精彩,支持會話、畫圖、視頻、閱讀、搜索等,送10W Token,即刻開啟你的AI之旅 廣告
                ## 第2天 ## ### 1.復習1.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{width:200px; height:150px; background:pink; position:absolute; left:40%; top:40%; display: none;} </style> </head> <body> <div id="box"> <button>確定</button> <button>取消</button> </div> <!-- <form action="./1.php"> <button>提交</button> </form> --> <button onclick="alert(1)">點擊</button> <!-- void() 把這個標簽當成一個普通的標簽使用 --> <a href="javascript:void()" >百度</a> <!-- 通過return false 阻止a標簽的默認行為 --> <a href="http://www.baidu.com" onclick="return false">百度</a> <a href="./1.php?a=del&id=1" onclick="return confirm('數據無價,謹慎操作')">刪除</a> <a href="./1.php?a=del&id=1" onclick="return check()">刪除</a> </body> <script> /* 1.直接寫在script標簽里 2.通過事件引入js代碼 3.通過標簽協議引入js 4.在外部引入js文件 js調試工具 1.alert() 終斷代碼執行 2.document.write() 代碼執行完畢后會覆蓋整個頁面 不能出現在事件 3.console.log() 在控制臺輸出 4.console.dir() 打印數組 5.document.title 6.debugger 斷點 */ // alert(1); // res= confirm('測試'); // alert(res); var str = 'name'; function check() { // 1.找對象 var box = document.getElementById('box'); box.style.display = 'block'; return false; } </script> <script src="./js.js"></script> </html> ~~~ ### 2.復習2.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{width:200px; height:150px; background:pink; position:absolute; left:40%; top:40%; display: none;} </style> </head> <body> </body> <script> /* ☆:嚴格區分大小寫 流程控制 分支 else if swicth() 類型要嚴格匹配 循環 沒有foreach 有for-in for(key in obj) 運算符 + 數學運算 兩邊都是數字的時候 字符串拼接 任何一邊是字符串就是拼接 += 對象訪問 . 相當于的 obj.name [] 可以解析變量 obj[name] obj['name'] ; 命令執行符 換行 定時器 一次性 setTimeout() clearTimeout() 周期性 setInterval() clearInterval() */ name = 'jack'; age = 18; </script> <script src="./js.js"></script> </html> ~~~ ### 3.全選-反選.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> <span></span> <b></b> </div> <input type="checkbox" checked="true">I Love You<br> <input type="checkbox">I Love You<br> <input type="checkbox">I Love You<br> <input type="checkbox">I Love You<br> <input type="checkbox">I Love You<br> <input type="checkbox">I Love You<br> <input type="checkbox">I Love You<br> <input type="checkbox">I Love You<br> <input type="checkbox">I Love You<br> <input type="checkbox">I Love You<br> <input type="checkbox">I Love You<br> <!-- <button onclick="select(true)">全選</button> <button onclick="select(false)">全不選</button> <button onclick="fanxuan();">反選</button> --> <button onclick="get(1)">全選</button> <button onclick="get(2)">全不選</button> <button onclick="get(3);">反選</button> </body> <script> //javascript特效本質 //找對象 改屬性 //Id: docuemnt.getElementById(); 就是一個對象 //標簽名 document.getElementsByTagName('tr') 數組 var inputs = document.getElementsByTagName('input'); // console.dir(inputs); function select(mark) { for(i=0; i<inputs.length; i++) { inputs[i].checked = mark; } } function fanxuan() { for(i=0; i<inputs.length; i++) { inputs[i].checked = !inputs[i].checked; } } function get(num) { switch(num) { case 1: for(i=0; i<inputs.length; i++) { inputs[i].checked = true; } break; case 2: for(i=0; i<inputs.length; i++) { inputs[i].checked = false; } break; case 3: for(i=0; i<inputs.length; i++) { inputs[i].checked = !inputs[i].checked; } break; } } </script> </html> ~~~ ### 4.跑馬燈.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <font size="6" id="myfont">java<font color='red'>s</font>cript跑馬燈</font> </body> <script> // var str = 'JavaScript跑馬燈'; // str = str[4]; // alert(str); var myfont = document.getElementById('myfont'); // res = str.substr(4,1); // alert(res); //定義一個函數,處理我想要的字符串 function getStr(num,str) { var tmp = str.substr(0,num); tmp += '<font color="red" size="7">' + str[num] + '</font>'; tmp += str.substr(num+1); // alert(tmp); return tmp; } // getStr(3,str); var num = 0; setInterval(function(){ if (num >= str.length) num = 0; myfont.innerHTML = getStr(num,str); num++; },100); </script> </html> ~~~ ### 5.數據類型1.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> <script> /* 數據類型 typeof 查看數據類型 1.bool 布爾型 true fales 2.undefined undefined 定義變量沒有賦值 3.object ☆:null一個特殊的對象 空對象 */ // var num =10; // alert(typeof num); var data = null; console.log(data); console.log(typeof data); </script> </html> ~~~ ### 6.奇葩的number數據類型.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> <script> /* 數據類型 typeof 查看數據類型 1.bool 布爾型 true fales 2.undefined undefined 定義變量沒有賦值 3.object ☆:null一個特殊的對象 空對象 4.number 不分整形跟浮點型 浮點型運算不準確 精度高 Infinity 無限大 */ // var num =10; // alert(typeof num); var data = 10; data = 10.2; // alert(0.1+0.2); //浮點型運算不準確 精度高 // if (0.1+0.2 == 0.3) { // alert('Y'); // } else { // alert('N'); // } //進制 //二進制 數值范圍只能在[0-1] data = 0101; //八進制 data = 0704; //十六進制 data = 0xff; //位運算 //數學計數法 data = 2.3e10; //右移 data = 2.3e-2; //左移 //Infinity 無限大 data = 2/0; //js中數值最大的 // alert(Number.MAX_VALUE); //NaN js中一個奇葩的類型 不是一個數的數字 data = 'hello' - 5; //js中唯一一個連自己都不等于自己的奇葩 // if (NaN == NaN) { // alert('Y'); // } else { // alert('N'); // } //與NaN這個奇葩參與運算,那么你也會感染 data = NaN + 5; console.log(data); console.log(typeof data); </script> </html> ~~~ ### 7.類型轉換.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> <script> /* 數據類型 typeof 查看數據類型 1.bool 布爾型 true fales 2.undefined undefined 定義變量沒有賦值 3.object ☆:null一個特殊的對象 空對象 4.number 不分整形跟浮點型 浮點型運算不準確 精度高 Infinity 無限大 */ //js中的變量必須要先聲明在使用 //js也是一門弱類型語言 //類型轉換 //Number() 自動轉換類型 () //isNumber() 判斷這個變量是否是一個數 //parseInt() 強制把一個變量轉換成整數 //parseFloat() 強制把一個變量轉換成浮點數 // var res; // console.log(res); data = true; // res = true + 'true'; // alert(res); data = 10; data = 10.2; data = '10'; data = '10a'; data = null; data = false; data = undefined; data; // box.style.left = 100px; //NaN + 5 + 'px' // parseInt(box.style.left) // res = Number(data); res = parseInt(data); console.log(res); console.log(typeof res); </script> </html> ~~~ ### 8.字符串.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> <script> /* 數據類型 typeof 查看數據類型 1.bool 布爾型 true fales 2.undefined undefined 定義變量沒有賦值 3.object ☆:null一個特殊的對象 空對象 4.number 不分整形跟浮點型 浮點型運算不準確 精度高 Infinity 無限大 5.string 字符串類型 */ /* 單引號不解析變量 雙引號也不解析變量 如果要解析變量的,拼接 單雙引號不能嵌入 解析所有轉義符 */ var num = 10; var res = 'hel{num}lo'; var res = "hel{num}lo"; // tmp = 'hel' + num + 'lo'; res = 'jack\'father'; res = 'name\r\njack'; console.log(res); console.log(typeof res); </script> </html> ~~~ ### 9.對象-函數.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> <script> /* 數據類型 typeof 查看數據類型 1.bool 布爾型 true fales 2.undefined undefined 定義變量沒有賦值 3.object ☆:null一個特殊的對象 空對象 4.number 不分整形跟浮點型 浮點型運算不準確 精度高 Infinity 無限大 5.string 字符串類型 6.function 函數也一種數據類型 */ //定義一個數組 var list = [1,2,3,5]; //定義一個對象 一般不會這樣這樣去寫 找對象 var obj = {name:'jack',age:18} //函數也是數據類型 類似字符串 字符串怎么玩 ,函數就可以怎么玩 function test() { alert(1); } var func = test; func(); alert(func); // console.log(obj); // console.log(typeof obj); </script> </html> ~~~ ### 10.減速運動.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{width:100px; height:100px; border-radius:50%; background:pink; position:absolute; left:100px} </style> </head> <body> <!-- 優先級 --> <div id="box" style="left:10px"></div> </body> <script> //1.找對象 var box = document.getElementById('box'); //這里只能獲取到寫在標簽內的屬性 //alert(box.style.left); var num = 40; setInterval(function(){ // num--; // 摩擦系數 num *= 0.9; box.style.left = parseInt(box.style.left) + num + 'px'; },100); </script> </html> ~~~ ### 11.定點停車.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{width:100px; height:100px; border-radius:50%; background:pink; position:absolute;} #line{width:1px; height:500px;background:red; position:absolute; left:800px;} </style> </head> <body> <!-- 優先級 --> <div id="box" style="left:0px"></div> <div id="line"></div> </body> <script> //1.找對象 var box = document.getElementById('box'); //這里只能獲取到寫在標簽內的屬性 //alert(box.style.left); var num = 40; setInterval(function(){ num = (800-parseInt(box.style.left))/50; num = Math.ceil(num); document.title = num; box.style.left = parseInt(box.style.left) + num + 'px'; },100); </script> </html> ~~~ ### 12.鐘擺.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{width:100px; height:100px; border-radius:50%; background:pink; position:absolute;} #line{width:1px; height:500px;background:red; position:absolute; left:400px;} </style> </head> <body> <!-- 優先級 --> <div id="box" style="left:0px"></div> <div id="line"></div> </body> <script> //1.找對象 var box = document.getElementById('box'); //這里只能獲取到寫在標簽內的屬性 //alert(box.style.left); var num = 40; setInterval(function(){ num += (400-parseInt(box.style.left))/1000; num = Math.ceil(num); document.title = num; box.style.left = parseInt(box.style.left) + num + 'px'; },100); </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>

                              哎呀哎呀视频在线观看