Javascript學習筆記

来源:http://www.cnblogs.com/FireNowiii/archive/2017/01/04/6249250.html
-Advertisement-
Play Games

Javascript 2016年12月19日整理 JS基礎 Chapter1 1. JS是一門運行在瀏覽器客戶端的腳本編程語言，前臺語言 1. 組成部分 1. ECMAscript JS標準 2. DOM 通過JS操作網頁元素 3. BOM 通過調用API操作瀏覽器 2. 特點： 封裝，繼承，多態 ...


Javascript

2016年12月19日整理

JS基礎

Chapter1

  1. JS是一門運行在瀏覽器客戶端的腳本編程語言，前臺語言

    1. 組成部分

      1. ECMAscript   JS標準
2. DOM          通過JS操作網頁元素
3. BOM          通過調用API操作瀏覽器

    2. 特點：封裝，繼承，多態

      1. 簡單易用
2. 基於對象
   編程中萬事萬物皆對象。
   相對的是：基於過程
3. 解釋執行（JS屬於解釋執行的語言）

    3. 使用範圍

      1. 表單驗證
2. 輪播特效
3. 游戲開發
  2. JS書寫位置非常自由

    1. 行內式寫法
      一般採取的是 外雙內單的格式

      <button onclick="alert('你好嗎')">點擊我</button>
<a href=”javascript: void(0);”></a>

    2. 內嵌式寫法

      <script type="text/javascript">
    ...
</script>

    3. 外鏈式寫法

      <script type="text/javascript"  src="xxx.js">這面不能寫任何代碼</script>
  3. 頁面中輸入消息的幾種方法

    1. 在頁面中以彈窗的形式輸出消息

      alert(“信息”);  
早期用來配合js代碼調試。

    2. 頁面輸出消息顯示，確定和取消按鈕

      confirm(“消息”);
一般和條件判斷配合使用

    3. 接收用戶輸入信息，得到的是字元串

      prompt(“信息”);

    4. 在網頁控制台顯示消息的方式

      console.log("信息");

    5. 直接在頁面中輸出消息，可以寫上html標簽

      document.write("信息");
  4. 代碼註釋
    1. 單行註釋 // 或者 <!--（不推薦）
    2. 多行註釋 /* */
      在寫js代碼過程中分號 “ ; ” 必須的寫。
  5. 變數var
    1. 不需要給變數添加引號
    2. 變數名中不能有空格

    3. 變數的命名規範
      只能由英語字母、數字、下劃線、美元符號$構成，且不能以數字開頭，並且不能是JavaScript保留字

      1. 不能使用純數字或者以數字開頭定義變數
2. 不推薦使用漢字定義變數
3. 不能使用純特殊字元或者以特殊字元開頭（"_"除外）定義變數        
4. 不能使用關鍵字定義變數
5. 不推薦使用保留字定義變數
6. JS中是嚴格區分字母大小寫
    4. 變數的作用域
      根據變數的作用範圍,可以分為全局變數和局部變數

      1. 全局變數

        1. 在最外層聲明的變數
2. 隱式的全局變數: 在函數體內部，但是沒有聲明var的變數也是全局變數

      2. 局部變數

        1. 在函數體內部聲明的變數
  6. 數據類型

    1. 簡單數據類型

      1. number       數字類型
2. string       字元串類型  
   “直接量”也稱為“字面量”，簡單的直接量有2種：數字、字元串
3. boolean      布爾類型
4. undefined    變數未初始化

    2. 複雜數據類型

      1. object   對象
2. Array    數組
  7. 數字類型（number）：所有的數字賦值給以變數，那麼該變數的數據類型就是數字類型

    1. 分類

      1. 小數
2. 負數
3. 正數

    2. 取值範圍

      能表示的最大值是±1.7976931348623157乘以10的308次方
能表示的最小值是±5 乘以10的-324次方

    3. 表示方式

      1. 十進位表示法
2. 十六進位表示法
    以0x開頭 數字0-9 和 a(A)-f(F)
3. 八進位表示法
    以數字0開頭   0-7之間的組合。
  8. 字元串類型：所有用雙引號或者單引號包含起來的都是字元串類型

    1. 轉義字元

      \"      轉雙引號
\'      轉單引號
\r      回車
\n      換行

  9. 布爾數據類型（boolean）

    true
false
數據類型轉換中：數字1代表true，數字0代表false
  10. 比較運算符 > < >= <=
    比較運算符最後的結果為： true 和false
  11. undefined 變數未初始化
    定義了變數，但是沒有過給變數進行賦值
  12. 變數取值為null的時候：該變數的引用為空，記憶體中不存在該值
  13. 數據類型的判斷：typeof(變數)

  14. 算術運算符、算數運算符

    +，如果加號兩邊都是數值，此時是加。否則，就是連字元，可以連接字元串
-
*
/
%   取餘（獲取餘數）
()  優先順序
    1. 加運算
      1. 兩個數字類型變數相加，結果為數字類型
      2. 一個數字類型和一個字元串類型變數相加，最後結果為字元串，加號起的是一個連接的作用。
    2. 減運算
      1. 如果兩個數字類型的變數相減，最後的結果為數字類型
      2. 如果一個數字類型的變數和一個數字的字元串類型的變數相減，最後結果為數字類型
      3. 如果一個數字類型的變數和一個非數字類型的變數相減，最後結果為NaN
      4. NaN: not a number （不是一個數字）
        NaN的數據類型屬於number類型。
    3. 除運算
      1. 如果兩個數字類型的變數相除，最後結果為數字類型
      2. 如果一個數字類型的變數和一個數字的字元串變數相除，最後結果為數字類型
      3. 如果一個將數字0作為除數，得出的結果是infinity（無窮大）
        infinity的數據類型屬於number類型
    4. 取餘
      1. 獲取最後結果的餘數
    5. 優先順序()
      1. 有括弧先計算括弧裡面的數據

  15. 帶操作的賦值的運算符

Chapter2

  1. Date用法

    getTime() 返回累計毫秒數(從1970/1/1午夜)
    getMilliseconds() 獲取當前的毫秒
    getYear()返回的值不總是4位的數字，對於介於1900與1999之間的年份，getYear()方法返回兩位數字。
    對於1900與1999之後的年份，則返回4位數字
    從ECMAscript v3開始，javascript就不不使用該方法，改用getFullYear()

    // 得到當前的距離1970.1.1的秒數
var date  = new Date();  // 聲明
console.log(date.getTime());  // 提倡使用的
console.log(date.valueOf());
//直接使用Date
console.log(Date.now());
console.log(+new Date());
  2. Math對象

    1. Math.ceil() 天花板函數

      返回一個數字的整數部分。對該數字進行向上舍入。
註意：該方法不會對數字進行四捨五入運算。

    2. Math.floor() 地板函數

      返回一個數字的整數部分。對該數字進行向下舍入

    3. Math.round(x)

      對數字進行四捨五入運算，最後的結果為整數
    4. Math.max(x,y)
    5. Math.min(x,y)

    6. Math.random()

      返回0-1之間的隨機數

    7. Math.pow(x,y)

      返回x值的y次方

    8. Math.sqrt(x)

      返回x的開根號
  3. 數據類型轉換
    1. 隱式類型轉換
      將變數參與到程式運算中，程式將變數進行類型轉換（不是程式員直接進行的類型轉換）
    2. 強制類型轉換

      1. 將數字轉換為字元串

        1. 方法：String(number)  
2. number.toString(進位/基數);預設是10進位
2. number + ""

      2. 將字元串轉換為數字

        1. 利用 -  *  / 都可以轉換
2. Number() 可以將數字類型的字元串轉換為數字
    1. 如果是數字類型的字元串，最後的結果保留的原數據，不會對數字進行四捨五入運算
    2. 如果是非數字類型的字元串，最後結果為NaN
3. parseInt(值, 進位)（預設是十進位）  
    parseInt帶有自動凈化的功能，會清除字元串後面的不是數字類型的字元。自動帶有截斷小數功能
    1. 如果是數字類型的字元串，最後的結果只保留數字的整數部分，不會進行四捨五入運算
    2. 如果在數字後加上非數字的字元，也可以轉換成功
    3. 非數字類型的字元串轉換後的結果為NaN
4. parseFloat()
    1. 如果是數字類型的字元串，最後的結果保留原數據，不會對數字進行四捨五入運算
    2. 如果在數字後加上非數字的字元，也可以轉換成功

      3. 將其他類型轉換為Boolean類型

        1. !!number
2. Boolean()
    1. false、0、undefined 、null、"" 為 false
    2. true、1、"somestring"、[Object]  為 true

  4. 邏輯運算符

    或運算（||）
且運算（&&）
非運算（!）
    1. 邏輯運算的前提：必須是兩個boolean類型的結果進行運算
    2. 或運算：一真則真，相當於並聯電路
      1. 只有一個結果為true,最後的結果為true
      2. 兩個結果都為false,最後的結果為false
    3. 且運算：一假則假，相當於串聯電路
      1. 只有一個結果為false ,最後的結果都為false
      2. 只有兩個結果都為true的時候，最後的結果才為true
    4. 非運算
      1. 一個結果為false ,非運算後結果為true
      2. 一個結果為true，非運算後結果為false
  5. 等號運算符
    1. "=" 賦值運算符
    2. '==" 判斷是否相同
      判斷變數是否相同，只判斷變數的內容是否相同，與變數的數據類型無關。
    3. "===" 判斷是否相同
      判斷變數是否相同，除了判斷變數的內容還要判斷變數的數據類型是否一致。
    4. "!=" 不相等
      判斷內容是否不相同，不考慮數據類型
    5. "!==" 不相等
      判斷的是內容和數據類型是否不相同

  6. 逗號運算符","：可以將變數進行集體聲明

    Var a = 10, b = 20;
等價於
Var a = 10;
Var b = 20;

  7. 選擇語句、條件判斷語句，如果else內部沒有執行的語法，else部分可以省略

    if(條件表達式) {
    如果結果為true,執行該處代碼，後面的代碼不再執行
} else if (條件表達式) {
    如果結果為true,執行該處代碼，後面的代碼不再執行
} else if (條件表達式) {
    如果結果為true,執行該處代碼，後面的代碼不再執行
} else {
    如果以上條件都不滿足，執行該處代碼
}

  8. 三元運算符
    表達式 ? 如果表達式結果為true執行這裡的代碼 : 如果表達式結果為false執行冒號後面的代碼 ;

    一元：  a++  b++    +a  -a 
二元:   a+b   a>=b

  9. 運算符計算順序

    1  () 
2  !、-、++、--    (-10)  負號  正號
3 *、/、% 
4 +、-
5 <、<=、<、>=
6 ==、!=、===、!==、
7 && 
8 || 
9 ?: 
10 =、+=、-=、*=、/=、%=     賦值
  10. 記憶，容易混淆
    1. a && b 相當於串連電路
      1. 如果 a 為假，則返回 a
      2. 如果 a 為真，則返回 b
      3. var cc = 1&&10; //cc = 10;
    2. a || b 相當於並聯電路
      1. 如果 a 為假，則返回b
      2. 如果 a 為真，則返回a

Chapter3

  1. switch語句

    1. switch語句後面的變數數據類型必須和case後面的數據類型保持一致

      switch (變數n) {
    case n1:
        執行的代碼;
        break; //讓程式停止執行
    case n2:
        執行的代碼;
        break;
    case n3:
        執行的代碼;
        break;
    default:
        執行的代碼;
        break;
}

    2. switch語句可以對變數進行集體判斷

      switch (變數n) {
    case n1:
    case n2:
    case n3:
        執行的代碼;
        break;
    default:
        執行的代碼;
}
  2. 自增 i++/ ++i 自減 i--/ --i

  3. while迴圈
    while迴圈的過程中，首先在while迴圈外部定義一個變數，然後判斷條件

    while(條件表達式){
    當條件表達式結果為true,會一直執行while迴圈體內的代碼。
    當條件表達式的結果為false，while迴圈不再執行。
}

  4. do...while迴圈
    do...while迴圈在條件不滿足的情況下會比while迴圈多執行一次代碼

    do{
    迴圈體;
}while(條件表達式);

  5. for迴圈

    for(var i=0; i<=10; i++){
    迴圈體代碼
}
  6. break語句
    1. 在迴圈體內，只要代碼遇到break,程式立馬結束當前迴圈體
    2. 當前迴圈指的是break語句所在的迴圈體
  7. continue語句
    continue語句指的是跳出本次迴圈，該語句後面的代碼不再執行
  8. 數組（定義，賦值，取值）
    1. 定義
      1. 通過創建對象得方式創建數組
        var ary = new Array();
      2. 直接創建一個數組
        var ary1 = [];
    2. 賦值
      數組中通過下標的方式進行賦值。下標從0開始
    3. 屬性介紹
      1. 數組名.length 可以獲取數組中的元素個數

      2. 數組遍歷及賦值

        var ary = [2, 4, 5, 6, 7, 8, 9];
for (var i = 0; i < ary.length; i++) {
    if (ary[i] % 2 == 0) {
        alert(ary[i]);
    } else {
    }
}

      3. 數組合併
        數組的合併 （將ary和ary1進行合併，最後得到的依然是一個數組）

        var ary = [123,456];
var ary1 = ["asdf","dsaf"];
var ary3 = ary.concat(ary1);

      4. join方法將數組返回的是一個字元串

        var ary = [123, 456, 789];
var str = ary.join("|");
  9. 函數（函數的定義和調用）
    函數，是一種封裝。就是將一些語句，封裝到函數裡面。通過調用的形式，執行這些語句。
    函數是由事件驅動的或者當它被調用時執行的可重覆使用的代碼塊。
    1. 函數的聲明
      定義函數，可以在調用的後面：這是JS的語法特性，函數聲明頭的提升

      1. 自定義函數：

        function  test(形式參數) {
    JS代碼; 
}
test(實際參數);

      2. 函數直接量聲明：

        var fun1 = function(){
    JS代碼;
}
fun1(實際參數);

      3. 通過Function這個關鍵字：

        var fun2 = new Function("var a = 10; var b = 20; alert(a+b)");
fun2();

    2. 函數的調用

      函數名字(實際參數);

    3. 函數的返回值return

          1. 函數裡面可以沒有return，如果有，只能有一個。不能有多個return；
    2. 函數裡面，return後面不允許書寫程式了，也就是說寫在後面的程式無效；
    3. return 後面不要換行

    4. 變數聲明提升
      在函數體內部，聲明變數，會把該聲明提升到函數體的最頂端。 只提升變數聲明，不賦值。

      function fun(){
    console.log(num);
    var num = 20;
}

      相當於 ---

      function fun(){
    var num;
    console.log(num);
    num = 20;
}
    5. 函數參數、arguments
      1. arguments存儲了函數傳送過過來實參
      2. Javascript在創建函數的同時，會在函數內部創建一個arguments對象實例
      3. arguments對象只有函數開始時才可用。函數的 arguments 對象並不是一個數組，訪問單個參數的方式與訪問數組元素的方式相同
      4. arguments對象的長度是由實參個數而不是形參個數決定的
      5. arguments.length; 返回的是實參的個數。但是這個對象有講究，他只在正在使用的函數內使用。

      6. arguments.callee; 返回的是正在執行的函數。 也是在函數體內使用。
        在使用函數遞歸調用時推薦使用arguments.callee代替函數名本身。

        function fn() { console.log(arguments.callee); }
這個callee 就是： function fn() { console.log(arguments.callee); }

JS進階

Chapter1

  1. 事件三要素
    1. 事件源： 要觸發的對象，一般情況下是個名詞
    2. 事件： 怎麼觸發的這個事情，一般情況下這個是動詞

    3. 事件處理程式： fucntion(){ 執行的代碼 }

      onclick     滑鼠單擊
ondblclick  滑鼠雙擊
onkeyup     按下並釋放鍵盤上的一個鍵時觸發 
onchange    文本內容或下拉菜單中的選項發生改變
onfocus     獲得焦點，表示文本框等獲得滑鼠游標。
onblur      失去焦點，表示文本框等失去滑鼠游標。
onmouseover 滑鼠懸停，即滑鼠停留在圖片等的上方
onmouseout  滑鼠移出，即離開圖片等所在的區域
onload      網頁文檔載入事件
onunload    關閉網頁時
onsubmit    表單提交事件
onreset     重置表單時

  2. 入口函數

    window.onload = function(){ 
    js代碼
}
    當我們頁面載入完畢（包括頁面的圖片全部載入完畢）之後，才執行函數體裡面的js部分
  3. this： 指向的是事件的調用者，或者是函數的使用者
    一般情況下，我們喜歡 var that = this;
  4. 方法
    1. .className
    2. .innerHTML
    3. .isNaN("xxx") 如果裡面的不是個數字,返回 true 否則返回false
    4. .value;（屬性，不是方法） 表單的內容
    5. .focus(); 表單自動獲得焦點
    6. .select(); 選擇表單內容
    7. .oninput 正常瀏覽器檢測用戶表單輸入內容

    8. .onpropertychange IE678檢測用戶表單輸入內容

      $("txt").oninput = $("txt").onpropertychange = function {
    if (this.value == " ") {
        $("message").style.display = "block";
    } else {
        $("message").style.display = "none";
    }
}
  5. 數組 array

    1. 聲明數組

      var arr = [1,3,5,7,9];
var arr = new Array(1,3,5);

    2. 使用數組

      數組名[索引值];

    3. 數組的長度

      數組名.length;

      4.遍曆數組

      使用for迴圈
  6. 排他思想
    1. 先用for迴圈清空全部

    2. 再用this.className

      window.onload = function() {
    var btns = document.getElementsByTagName("button");
    for (var i = 0; i < btns.length; i++) {
        btns[i].index = i; // 給每個button 定義了一個index屬性 索引號
        btns[i].onclick = function() {
            //清除所有人的類名,只能用 for 遍歷
            for (var j = 0; j < btns.length; j++) {
                btns[j].className = "";
            }
            //就剩下自己，而且是點擊那個
            this.className = "current";
        }
    }
}

7.多個的tab欄切換

    window.onload = function() {
        function tab(obj) {
            var target = document.getElementById(obj);
            var spans = target.getElementsByTagName("span");
            var lis = target.getElementsByTagName("li");
            for (var i = 0; i < spans.length; i++) {
                spans[i].index = i; // 難點
                spans[i].onmouseover = function() {
                    //讓所有的span, li的類名清空
                    for (var j = 0; j < spans.length; j++) {
                        spans[j].className = "";
                        lis[j].className = "";
                    }
                    // 當前的span的添加類名
                    this.className = "current";
                    //先隱藏下麵所有的 div盒子
                    //留下中意的那個，跟點擊的序號有關係的
                    lis[this.index].className = "show";
                }
            }
        }
        tab("one");
        tab("two");
        tab("three");
    }

Chapter2

  1. 數組操作
    1. 添加
      1. push() 向數組的末尾添加一個或多個元素，並返回新的數組的長度
      2. unshift()可向數組的開頭添加一個或更多元素，並返回新的數組的長度
    2. 刪除
      1. pop() 刪除最後一個元素，並返回返回刪除的最後一個元素的值
      2. shift() 刪除第一個元素，並返回返回刪除的第一個元素的值
    3. concat()連接兩個數組
      1. 數組a.concat(數組b);
      2. 該方法用於連接兩個或多個數組。它不會改變現有的數組，而僅僅會返回被連接數組的一個副本
    4. join() 把數組轉換為字元串
      1. 數組名.join("separator")
      2. 將數組各個元素是通過指定的分隔符進行連接成為一個字元串
      3. 如果省略separator，則使用逗號作為分隔符
    5. split() 把字元串轉換為數組
      1. stringObject.split(separator,howmany)
      2. 如果省略separator，則使用逗號作為分隔符
      3. howmany 可選。該參數可指定返回的數組的最大長度
  2. DOM (重點)為文檔提供了結構化表示，並定義瞭如何通過腳本來訪問文檔結構
  3. 節點
    1. 元素節點 nodeType == 1
    2. 屬性節點 nodeType == 2
    3. 文本節點 nodeType == 3
  4. 訪問節點
    1. document.getElementById("");
    2. document.getElementsByClassName("");（少用，IE678瀏覽器有相容問題）
    3. getElementsByTagName(""); 得到的是一個偽數組

  5. 節點之間的關係

    1. IE678認識
      nextSibling/previousSibling/firstChild/lastChild
    2. 其他瀏覽器認識的
      nextElementSibling/previousElementSibling/firstElementChild/lastElementChild
    3. 為了相容，可以合寫： 必須先寫正常瀏覽器，後寫IE678
      var div = one.nextElementSibling || one.nextSibling;
    4. childNodes：它是標準屬性，它返回指定元素的子元素集合
      包括HTML節點，所有屬性，文本節點（嫡出）
      火狐，谷歌等高本版會把換行也看做是子節點
      可以利用 nodeType == 1 時才是元素節點，來獲取元素節點
    5. children： 選取所有的孩子（只有元素節點）（庶出）
      IE678包含註釋節點，這個要避免開
  6. 節點操作

    1. 創建新節點

       var div = document.creatElement("li");

    2. 插入子節點

      1. 父節點.appendChild();  
    添加孩子，放到盒子的最後面
2. 父節點.insertBefore(插入的子節點，參照子節點);  
    添加孩子到參照子節點的前面  
    1. 如果第二個參數為null，則預設這新生成的子節點放到最後面  
    2. 父節點.insertBefore(插入的子節點，null);相當於父節點.appendChild();

    3. 移除子節點

      父節點名字.removeChild(子節點);

    4. 克隆節點

      1. 要複製的節點.cloneNode(true); 深層複製，除了複製本節點，還複製所有子節點
2. 要複製的節點.cloneNode(false); 淺層複製，只複製本節點，不複製子節點
3. 預設是false
  7. 設置節點屬性
    1. 獲取節點屬性
      節點.getAttribute("屬性")
    2. 設置節點屬性
      節點.setAttribute("屬性","值");
    3. 刪除某個屬性
      節點.removeAttribute("屬性");

  8. 封裝自己class類

    window.onload = function() {
    //封裝自己的類名
    function getClass(classname) {
        //判斷瀏覽器支不支持
        //如果支持
        if (document.getElementsByClassName) {
            return document.getElementsByClassName(classname);
        }
        //如果不支持
        var arr = []; //用於返回數組
        var dom = document.getElementsByTagName("*");
        for (var i = 0; i < dom.length; i++) {
            //分割類名，並且轉換為數組
            var txtArr = dom[i].className.split(" "); 
            for (var j = 0; j < txtarr.length; j++) {
                if (txtArr[j] == classname) {
                    //將我們選擇的類名所選擇的單個元素添加進數組
                    arr.push(dom[i]); 
                }
            }
        }
    return arr;//得到我們選擇的類名所選擇的所有元素
}

  9. 封裝自己class類，帶id父親

    window.onload = function () {
    function getClass(classname,id) {
        if(document.getElementsByClassName) {
            if(id) {
                var eleId = document.getElementById(id);
                return eleId.getElementsByClassName(classname);
            } else {
            return document.getElementsByClassName(classname);
            }
        }
        if(id) {
            var eleId = document.getElementById(id);
            var dom = eleId.getElementsByTagName("*");
        } else {
            var dom = document.getElementsByTagName("*");
        }
        var arr = [];
        for(var i=0; i<dom.length; i++) {
            var txtArr = dom[i].className.split(" ");
            for(var j=0; j<txtArr.length; j++) {
                if(txtArr[j] == classname) {
                    arr.push(dom[i]);
                }
            }
        }
    return arr;
    }##  ##
}

Chapter3

  1. 定時器
    1. window.setInterval(“執行的函數”,間隔時間（毫秒數）)
    2. setInterval(fun, 1000);
    3. setInterval("fun()",1000)
    4. setInterval(function(){}, 1000)
    5. 不能setInterval(function(), 1000)
    6. setTimeout(“函數”, 時間) 只執行一次
    7. setInterval與setTimeout定時器的區別
      1. setInterval是排隊執行的。
      假如間隔時間是1秒， 而執行的程式的時間是2秒。上次還沒執行完的代碼會排隊, 上一次執行完下一次的就立即執行, 這樣實際執行的間隔時間變為2秒
      2. 假如setTimeout延遲時間為1秒執行, 要執行的代碼需要2秒來執行,那這段代碼上一次與下一次的執行時間為3秒
  2. 定義自己的時間
    1. var endTime = new Date(“2015/12/12 17:30:00”);
      如果date括弧裡面寫日期，就是定義自己的時間
    2. var date = new Date();
      如果date括弧裡面不寫日期，就是當前時間

  3. 設計倒計時搶購

    window.onload = function() {
    var demo = document.getElementById("demo");
    var endTime = new Date("2017/1/1 17:30:00"); // 最終時間
    setInterval(clock, 1000); // 開啟定時器
    function clock() {
        var nowTime = new Date(); // 一定是要獲取最新的時間
        var second = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
        // 用將來的時間毫秒 - 現在的毫秒 / 1000 得到的還剩下的秒數，可能不斷取整
        // 一小時 3600 秒
        // second / 3600  一共的小時數  /24   天數
        var d = parseInt(second / 3600 / 24); //天數
        var h = parseInt(second / 3600 % 24); // 小時
        var m = parseInt(second / 60 % 60);
        var s = parseInt(second % 60); // 當前的秒數
        d < 10 ? d = "0" + d : d;
        h < 10 ? h = "0" + h : h;
        m < 10 ? m = "0" + m : m;
        s < 10 ? s = "0" + s : s;
        demo.innerHTML = "距離搶購時間還剩: " + d + "天 " + h + "小時 " + m + "分鐘 " + s + "秒";
    }
}

  4. 製作日曆

    window.onload = function() {
    var box = document.getElementById("box");
    var boys = box.children;
    //日期函數
    var arr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    var date = new Date(); // 聲明日期函數
    boys[0].innerHTML = date.getFullYear() + "年" + (date.getMonth() + 1) +
    "月" + date.getDate() + "日" + "  " + arr[date.getDay()];
    boys[1].innerHTML = date.getDate(); // 今天的日子
    }

  5. 模仿微博發佈

    window.onload = function() {
    //獲取對象   再次操作對象
    var btn = document.getElementsByTagName("button")[0];
    var txt = document.getElementsByTagName("textarea")[0];
    var ul = document.createElement("ul"); // 創建ul
    btn.parentNode.appendChild(ul); // 追加到  他的父親裡面
    btn.onclick = function() {
        if (txt.value == "") {
            alert("輸入不能為空");
        return false; // 終止函數執行
        }
        var newli = document.createElement("li");
        newli.innerHTML = txt.value + "<a href ='javascript:;'>刪除</a>"; // 吧表單的值給  新li
        txt.value = ""; // 清空 表單
        var lis = ul.children; // 獲得有多少個li
        //  if else  這個片段  讓我們新發佈的內容 最上顯示
        if (lis.length == 0) { //  第一次創建
            ul.appendChild(newli); // ul 的後面追加
        } else {
            ul.insertBefore(newli, lis[0]); // 每次生成的新的li 放到第一個li 的前面
        }
        var as = document.getElementsByTagName("a"); // 獲得所 a
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function() {
                //removeChild
                ul.removeChild(this.parentNode); // UL 他的爸爸
            }
        }
    }
}

Chapter4

  1. 時鐘案例

    window.onload = function() {
    var hour = document.getElementById("hour");
    var minute = document.getElementById("minute");
    var second = document.getElementById("second");
    // 開始定時器
    var s = 0,
    m = 0,
    h = 0,
    ms = 0;
    setInterval(function() {
    // 內容就可以了
    var date = new Date(); // 得到最新的時間
    ms = date.getMilliseconds(); // 現在的毫秒數
    s = date.getSeconds() + ms / 1000; //  得到秒 1.3 s
    m = date.getMinutes() + s / 60; //  得到的是分數  45.6分鐘
    h = date.getHours() % 12 + m / 60;
    //時鐘旋轉角度
    second.style.WebkitTransform = "rotate(" + s * 6 + "deg)";
    minute.style.WebkitTransform = "rotate(" + m * 6 + "deg)";
    hour.style.WebkitTransform = "rotate(" + h * 30 + "deg)";
    second.style.MozTransform = "rotate(" + s * 6 + "deg)";
    minute.style.MozTransform = "rotate(" + m * 6 + "deg)";
    hour.style.MozTransform = "rotate(" + h * 30 + "deg)";
    }, 1);
}

  2. 點擊倒計時

    var btn = document.getElementById("btn");
var count = 5; 
var timer = null; // 定時器的名字
btn.onclick = function() {
    clearInterval(timer); // 先清除掉原來的定時器
    this.disabled = true;
    // this 指向的是 btn
    var that = this; // 把 btn 對象 給 that  var _this = this;
    timer = setInterval(sendTextMessage, 1000); // 開啟定時器 名字  timer
    function sendTextMessage() {
        count--;
        if (count >= 0) {
            that.innerHTML = "還剩餘" + count + "秒";
        } else {
            that.innerHTML = "重新發送簡訊";
            that.disabled = false;
            clearInterval(timer); // 清除定時器
            count = 5;
        }
    }
}

  3. 5秒鐘自動跳轉頁面
    window.location.href = " ";

    var demo = document.getElementById("demo");
var count = 5;
var speed = 1000;
setTimeout(goIndexPage, speed); //1秒鐘之後去執行goIndexPage這個函數
function goIndexPage() {
    count--;
    demo.innerHTML = "<a href='http://www.baidu.com'>本頁面將在第" + count + "秒鐘之後跳轉頁面</a>";
    if (count <= 0) {
        // 如果count小於0就到了時間了,我們應該跳轉頁面
        window.location.href = "http://www.baidu.com";
    } else {
        setTimeout(arguments.callee, speed); //  遞歸調用  自己調用自己
    }
}
  4. 獲取字元位置方法
    1. charAt() 獲取相應位置字元
    2. charCodeAt() 獲取相應位置字元unicode編碼
    3. unicode編碼，是我們字元的字元的唯一表示

Chapter5

  1. 

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Function.prototype.toString 的使用技巧
    Function.prototype.toString這個原型方法可以幫助你獲得函數的源代碼， 比如： 輸出: 這個方法真是碉堡了…, 通過合適的正則, 我們可以從中提取出豐富的信息. 函數名 函數形參列表 函數源代碼 這些信息提供了javascript意想不到的靈活性, 我們來看看野生的例子吧. ...
  • js閉包for迴圈總是只執行最後一個值得解決方法
    <style> li{ list-style: none;width:40px;height: 40px;text-align:center;line-height: 40px;cursor: pointer; } </style>html代碼： <ul id="uls"> <li style="b ...
  • 頁面佈局class常見命名規範
    頭：header 內容：content/container 尾：footer 導航：nav 側欄：sidebar 欄目：column 頁面外圍控制整體佈局寬度：wrapper 左右中：left right center 登錄條：loginbar 標誌：logo 廣告：banner 頁面主體：main ...
  • 談談一些有趣的CSS題目（十一）-- reset.css 知多少？
    開本系列，談談一些有趣的 CSS 題目，題目類型天馬行空，想到什麼說什麼，不僅為了拓寬一下解決問題的思路，更涉及一些容易忽視的 CSS 細節。 解題不考慮相容性，題目天馬行空，想到什麼說什麼，如果解題中有你感覺到生僻的 CSS 屬性，趕緊去補習一下吧。 不斷更新，不斷更新，不斷更新，重要的事情說三遍 ...
  • 推薦10款超級有趣的HTML5小游戲
    HTML5的發展速度比任何人的都想像都要更快。更加強大有效的和專業的解決方案已經被開發......甚至在游戲世界中！這裡跟大家分享有10款超級趣味的HTML5游戲，希望大家能夠喜歡！ Kern Type, the kerning game 幫助你學習kern游戲的線上小游戲 Z-Type impac ...
  • 一起來玩echarts系列（一）------箱線圖的分析與繪製
    一、箱線圖 Box plot 箱線圖一般被用作顯示數據分散情況。具體是計算一組數據的 、`25%分位數 75%分位數 上邊界 下邊界`，來將數據從大到小排列，直觀展示數據整體的分佈情況。 大部分正常數據在箱體中，上下邊界之外的就是異常數據了。 上下邊界的計算公式是： UpperLimit=Q3+1. ...
  • 跑馬燈效果
    html 代碼<div id="outer"> <span>#</span> <div id="inner"> 德國名企德司達被中國上市公司龍盛集團收購後，其下屬的德司達（南京）染料有限公司因夜間向運河偷排廢酸2698.1噸，公司被揚州中級法院判決構成污染環境罪 </div></div>JavaSc ...
  • 快捷選時間
    舉個慄子<script> var now = new Date();// now.setDate(now.getDate()-num);// var result = '';// result+=now.getFullYear()+'-'+// (now.getMonth()+1)+'-'+// ( ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類