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

                合規國際互聯網加速 OSASE為企業客戶提供高速穩定SD-WAN國際加速解決方案。 廣告
                ## 第4天 ## ### 1.定時器的注意問題.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{width:80px; height:80px; background:pink; border-radius:40px; position:absolute;} #line{width:100%; height:1px; background:red; position:absolute; top:450px;} </style> </head> <body> <button onclick="start()" >開始</button> <button onclick="stop()" >停止</button> <div id="box" style="top:30px; left:0px " ></div> <div id="line"></div> </body> <script> //找對象 var box = document.getElementById('box'); var timmer; function start() { var speed = 0; // alert(timmer); if (!timmer) { timmer = setInterval(function(){ speed += 5; var tmp = parseInt(box.style.top) + speed; if (tmp >= 370) { speed *= -1; tmp = 370; } box.style.top = tmp + 'px'; box.style.left = parseInt(box.style.left) + 5 + 'px'; },50); console.log(timmer); console.log(typeof timmer); } } function stop() { clearInterval(timmer); console.log(timmer); console.log(typeof timmer); timmer = undefined; } </script> </html> ~~~ ### 2.復習.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> <script> /* 函數定義細節 1.函數可以重復定義 2.函數的形參可以不接受實參,默認值是undefined 3.函數的形參不能給默認值(除了火狐) 4.如果要設置默認值,可以通過判斷形參是否是undefined 5.函數如果沒有返回值,那么默認值undefined */ // function test() // { // } // var res = test(); // alert(res); /* 變量的作用域 1.在函數內使用var定義的變量是局部變量(閉包函數外) 2.可以向上訪問 3.不能向下訪問 4.定義好的局部變量,相當于在函數的第一行就聲明了這個變量(提前聲明機制【只定義,不賦值】) */ function test() { //變量在整個函數內都是有效的 //定義好的局部變量,相當于在函數的第一行就聲明了這個變量(提前聲明機制【只定義,不賦值】) var num; alert(num); var num = 20; alert(num); } // test(); /* 閉包函數 返回函數的函數 */ function die() { var num = 10; function son() { alert(num); } return son; } // var son = die(); // son(); //自調函數 var func = function(){alert(1)}; //寫兩個自調函數的時候,需要使用命令執行符; // (function(){ // alert('I'); // })(); // func(); // (function(){ // alert('I'); // })(); //包裝對象 var str = 'hello'; var str1 = new String('world'); // str.substr(); //包裝對象 臨時對象 特點:隨用隨消 str.name = 'jack'; // alert(str.name); //真正的對象 str1.age = 18; // alert(str1.age); // alert(typeof str); // alert(typeof str1); //對象的原型 模擬繼承 function Person(name) { this.name = name; } var obj = {age:18,eat:function(){alert(1)}} Person.prototype = obj; var p = new Person('lunge'); alert(p.name); alert(p.age); p.eat(); </script> </html> ~~~ ### 3.獲取計算后的樣式.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width:100px; height:100px; background:pink; position:absolute; left:300px; } </style> </head> <body> <div id="box" class=""></div> </body> <script> var box = document.getElementById('box'); //無法直接獲取style樣式 // alert(box.style.width); //獲取box計算后的樣式 // var css = document.defaultView.getComputedStyle(box) // alert(css.width); var css = box.currentStyle; // alert(css.width); //判斷什么瀏覽器 //基本語法 BOM DOM </script> </html> ~~~ ### 4.windon.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{width:10000px; height:10000px;} </style> </head> <body> </body> <script> /* BOM 瀏覽器對象模式 在網頁上聲明的變量、對象等等的父級都是window 在全局聲明的所有變量,對象,函數,都是window的屬性和方法 */ // window.alert(1); //window對象屬性 var res = window.closed; // alert(res); // alert(window.length); // alert(window.name); // alert(this) var num = 10; // alert(self.num); // alert(top.num); // alert(this.num); // alert(window.num); // alert(window.screenLeft); // alert(window.screenTop); //獲取瀏覽器距離屏幕的坐標值 解決兼容性 // alert(window.screenX || window.screenLeft); // alert(window.screenY || window.screenTop); //window對象的方法 // alert(); // confirm(); // focus(); // for (i=0; i<10; i++) { // // window.open('http://www.baidu.com','','width=300px,height=300px'); // } // var newObj = window.open('http://www.baidu.com','','width=300px,height=300px'); // newObj.document.write("This is 'myWindow'") // newObj.focus() // window.print(); //IE 移動瀏覽器 // window.moveBy('10','10'); // IE 把瀏覽器移到固定位置 作用從窗口頂部開始 // window.moveTo('50','100'); //把瀏覽器放大 // window.resizeBy('10','10'); // 調整Ie大小 // window.resizeTo('400','400'); //滾動條 //每刷新一次,移動100像素 // window.scrollBy('100','100'); // 把滾動條回到固定的位置 // window.scrollTo('100','100'); </script> </html> ~~~ ### 5.Navigator.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> <script> // alert(navigator.userAgent); var str = navigator.userAgent; //Mozilla/5.0 (Windows NT 5.1; rv:47.0) Gecko/20100101 Firefox/47.0 // if (str.indexOf('MSIE') == -1) { // alert('標準瀏覽器'); // } else { // alert('坑媽的IE'); // } if (document.all) { alert('坑媽的IE'); } else { alert('標準瀏覽器'); } </script> </html> ~~~ ### 6.history和screen.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> <script> //獲取屏幕的高度,除了任務欄 // alert(screen.availHeight); //獲取屏幕的寬度 // alert(screen.availWidth); //獲取屏幕的分辨率 // alert(screen.width); // alert(screen.height); // alert(history.length); // 回到前一個URL // history.back(); // window.open('1.html'); //去后一個URL // history.forward(); history.go(1); </script> </html> ~~~ ### 7.Location.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button onclick="test();">重新加載</button> </body> <script> //Location // location.href = '1.html'; // location.href = 'http://www.baidu.com'; function test() { location.reload(); } alert(1); </script> </html> ~~~ ### 8.鐘擺加摩擦.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))/10; num = Math.ceil(num); num *= 0.9; document.title = num; box.style.left = parseInt(box.style.left) + num + 'px'; },100); </script> </html> ~~~ ### 9.彈幕.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{width:400px; background:pink; position:absolute;} </style> </head> <body> <!-- 優先級 --> <button onclick="start();">開始</button> <div id="box" style="left:0px;height:20px"></div> </body> <script> //1.找對象 var box = document.getElementById('box'); //這里只能獲取到寫在標簽內的屬性 //alert(box.style.left); function start() { var num = 40; setInterval(function(){ num += (350-parseInt(box.style.height))/10; num = Math.ceil(num); num *= 0.85; document.title = num; box.style.height = parseInt(box.style.height) + num + 'px'; },100); } </script> </html> ~~~ ### 10.蛇形文字.html ### ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> span{position:absolute; top:-100px;} </style> </head> <body> </body> <script> var str = '左三圈,右三圈,脖子扭扭,屁股扭扭'; //循環輸出str的值 for (i=0; i<str.length; i++) { document.write('<span id="snake'+ i + '" >'); document.write(str[i]); document.write('</span>'); } //寫一個函數處理字符串 function move(x,y,i) { var span = document.getElementById('snake' + i); span.style.left = x + 20*i + 20 + 'px'; span.style.top = y + 'px'; } // move(100,100,6); window.onmousemove = function(e) { document.title = 'X:' + e.clientX + 'Y:' +e.clientY; /* //循環輸出所有文字 for (i=0; i<str.length; i++) { }*/ var i = 0; timmer = setInterval(function(){ if (i >= str.length-1) clearInterval(timmer); move(e.clientX,e.clientY,i); i++; },50); } </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>

                              哎呀哎呀视频在线观看