js學習筆記5

4.23javascript動畫:實現的方式:gif圖像形式存儲,容量大,須要第三方製圖工具製做flash:須要第三方工具CSS3實現Javascript能夠實現大部分的動畫動畫的三要素:1.DOM對象2.對象的屬性3.定時器:setInterval,setTimeOut定時器1.setIntervalvar intervalId = setInterval(func, delay[, param1, param2, ...]);clearInterval(intervalId);func 爲執行改變屬性的操做delay 爲出發時間間隔（毫秒爲單位）para1 爲執行時可傳入改變屬性函數的參數使用 setInterval 能夠調用一次定時器既可實現連貫的動畫。使用 clearInterval 便可清除動畫效果。2.setTimeoutfunc 爲執行改變屬性的操做delay 爲出發時間間隔（毫秒爲單位）默認爲 0para1 爲執行時可傳入改變屬性函數的參數var timeoutId = setTimeout(func[, delay, param1, param2, ...]);clearTimeout(timeoutId);使用 setTimeout 實現動畫，則須要在動畫每一幀結束時再次調用定時器。但它無需清除定時器。+區別setTimeout 在延時後只執行一次，setInterval 則會每隔一個延時期間後會再執行。3.requestAnimationFrame相似setTimeout,可是無需設定時間間隔,是H5中的新標準,時間間隔不禁用戶控制由顯示器的刷新頻率決定(60HZ)動畫流暢度高,無需設定時間間隔每幀結束後會調用常見的動畫:1.形變,元素的寬高2.位移,元素的相對位置3.旋轉4.透明度其餘動畫的函數:位移:var animation = function(ele, attr, from, to) {    var distance = Math.abs(to - from);    var stepLength = distance/100;    var sign = (to - from)/distance;    var offset = 0;    var step = function(){        var tmpOffset = offset + stepLength;        if (tmpOffset < distance) {            ele.style[attr] = from + tmpOffset * sign + 'px';            offset = tmpOffset;        } else {            ele.style[attr] = to + 'px';            clearInterval(intervalID);        }    }        ele.style[attr] = from + 'px';        var intervalID = setInterval(step, 10);}4.25表單操做經過表單控件提供數據並提交給服務器,服務器作出相應的處理正常工做的表單須要三個部分:1.構建表單2.服務器處理3.配置表單1.表單構建<form>    <p><label>姓名：<input></label></p>    <p><label>電話：<input type="tel"></label></p>    <p><label>郵箱：<input type="email"></label></p>    <fieldset>        <legend> 披薩大小 </legend>        <label><input type="radio" name="size"> 小 </label>        <label><input type="radio" name="size"> 中 </label>        <label><input type="radio" name="size"> 大 </label>    </fieldset>    <fieldset>        <legend> 披薩配料 </legend>        <label><input type="checkbox"> 燻肉 </input></label>        <label><input type="checkbox"> 奶酪 </input></label>        <label><input type="checkbox"> 洋蔥 </input></label>        <label><input type="checkbox"> 蘑菇 </input></label>    </fieldset>    <p><label>配送時間：<input type="time" min="11:00" max="2100" step="900"></label></p>    <p><button>提交訂單</button></p></form>2.服務器處理提供接口地址(http://hahahaha.com/order),數據格式(application/x-www-form-urlencode)還有接收的參數數據命名須要在表單控件中註明配置表單:<form action="http://hahahaha.com/order" method="post" enctype="application/x-www-form-urlencoded">    <p><label>姓名：<input name="custname"></label></p>    <p><label>電話：<input type="tel" name="custtel"></label></p>    <p><label>郵箱：<input type="email" name="custemail"></label></p>    <fieldset>        <legend> 披薩大小 </legend>        <label><input type="radio" name="size" value="small"> 小 </label>        <label><input type="radio" name="size" value="medium"> 中 </label>        <label><input type="radio" name="size" value="large"> 大 </label>    </fieldset>    <fieldset>        <legend> 披薩配料 </legend>        <label><input type="checkbox"> 燻肉 </input></label>        <label><input type="checkbox"> 奶酪 </input></label>        <label><input type="checkbox"> 洋蔥 </input></label>        <label><input type="checkbox"> 蘑菇 </input></label>    </fieldset>    <p><label>配送時間：<input type="time" min="11:00" max="2100" step="900"></label></p>    <p><button>提交訂單</button></p></form>用戶全部提交的信息須要在提交前對其進行驗證,提升用戶的體驗require關鍵字強制用戶填寫相應的信息內容1.元素form:表單元素<form novalidate name="pizza" target="abc" method="post" autocomplete="off" accept-charset="utf-8" action="http://hahahaha.com/order" enctype="application/x-www-form-urlencoded">能夠經過name屬性獲取表單節點的信息    var exeFrom = document.forms.exeformautocomplete:on/off,自動補全    elements 屬性：爲一個動態節點集合（根據 DOM 的變化進行變化），    其用於歸結該表單的子孫表單控件（除圖標按鈕外 <input type="image>"）:                                  button                                  fieldset                                  input                                  keygen                                  object                                  output                                  select                                  textarea                                  此外還有歸屬於該表單的空間（依舊圖片按鍵除外）代碼以下所示。    <form id="a">    </form>    <label><input name="null" form="a"></label>    length:屬性,等價於elements.length,描述表單內節點的個數選取裏面的元素:name,或者數組下標    <form name="test">        <input name="a">        <input name="b">    </form>    選取 name="a" 的控件可使用下面的方法：    testForm.elements[0];    testForm.elements['a'];    // 操做 Form 表單的屬性    testForm[0];    testForm['a'];    form[name] 經過名稱做爲索引時有以下特色：    返回 id 或者 name 爲指定名稱的表單空間（圖標按鍵除外）    若是結果爲空，則返回id 爲指定名稱的 img 元素（入下面代碼所示）    若是有多個同名元素，則返回的元素爲動態節點集合    一旦用指定名稱取過改元素，以後則不論該元素的 id 或者 name 如何變化，只有節點存在則都可使用原名稱來繼續獲取改節點。無指定名稱索引:    <form name="test">        <img id="a" src="sample.png">    </form>    testForm['a']; // 取得的即是 id 爲 a 的圖片元素更新名稱:    <form name="test">        <input name="a">    </form>    // 第一步    testForm['a'];    // 或者    testForm.elements['a'];    // 第二步    testForm['a'].name = 'b';4.26.    form接口:    reset(),submit(),checkValidity().    能夠reset的元素:input,keygen,output,select,textarea當觸發表單reset的事件時,可使用阻止該事件的默認行爲來取消重置.元素重置不會觸發元素的change和input事件    1.label元素    <label for="textId" form="formId">字段:htmlFor,control,formhtmlFor屬性,用來關聯表單控件的激活行爲        （可以使點擊 label 與點擊表單控件的行爲一致），        可關聯的元素有下列（hidden 除外）：button,input,keygen,meter,output,progress,select,textareacontrol屬性:若是指定了 for 屬性則指定該for 屬性對於 id 的可關聯元素。        若是沒有指定 for 屬性則爲第一個可關聯的子孫元素。能夠關聯的元素:button,fieldset,input,keygen,label,object,output,select,textarea        form 屬性：修改關聯元素所歸屬的表單則能夠修改元素的 form 屬性爲帶關聯表單Id（元素中對於的for屬性也應該作對應的修改）。//這裏有一點小問題，更改form屬性以後label並不能自動綁定到新表單對應的元素上        label.setAttribute('form', 'newFormId');2.input元素:        <input type="text">        type 屬性：可用於控制控件的外觀以及數據類型（默認爲 text），        在不一樣的瀏覽器不一樣數據類型有不一樣的展現效果經常使用:onchange,accept,multiple,files        <input type="file" accept="image/*" multiple>        file.addEventListener(            'change', function(event){            var files = Array.prototype.slice.call(            event.target.files, 0        );        files.forEach(function(item){            files2dataurl(item,function(url){            var image = new Image();            parent.appendChild(image);            image.src = url;        });        });        }        );        function file2dataurl(file, callback) {            if (!window.FileReader) {            throw 'Browser not support File API !';            }            var reader = new FileReader();            reader.readAsDataURL(file);            reader.onload = function(event) {            callback(event.target.result);            };        }        accept 所支持的格式有 audio/* video/* image/* 以及不帶;的 MINE Type 類型和 .        開頭的文件名後綴的文件。多個文件類型可使用,分隔。 3.select元素:        指定選項列表中選擇須要的選項。        主要的三個子標籤 select、optgroup（用於選項分組）、option。        select 具備的屬性和方法以下：        name        value        multiple        options（動態節點集合）        selectedOptions（動態節點集合）        selectedIndex        add(element[, before])（無指定參照物則添加至最末端）        remove([index])        optgroup 所具備的屬性和方法：        disabled （分組選項不可選）        label（分組說明）        option 所具備的屬性和方法：        disabled        label（描述信息）        value（提交表單時的數據信息）        text（用戶看到的文字）        index        selected        defaultSelectedoption選項操做:        建立:document.createElement('option)        new Option([text])        添加:var option = new Option('eg');        opt.insertAdjacentElement(option,'已經有的參照元素')        //or        select.add(option,'已經有的參照元素')        刪除:        opt.parentNode.removeChild(option);        select.remove(2);選擇器:        <form name="course">            <select name="chapter">                <option>Select0</option>            </select>            <select name="section">                <option>Select1</option>            </select>        </form><script>    var chapters = {    {text: 1, value: 1},    {text: 2, value: 2}    };    var sections = {        1: [{            text:1.1, value: 1.1        }, {            text:1.2, value: 1.2        }],        2:[{            text:2.1, value:2.1;    }]    };    function fillSelect(select, list) {        for(var i = select.length; i > 0; i--) {            select.remove(i);        }        list.forEach(function(data){            var option = new Option(data.text, data.value);            select.add(option);        })    }    fileSelect(chapterSelect, chapters);    chapterSelect.addEventListener(            'change', function(event) {                var value = event.target.value,                        list = sections[value] || [];                fillSelect(sectionSelect, list);            }    );</script>textarea元素:文本域        textarea 具備的屬性和方法以下：        name        value （用戶輸入信息）        select() （全選當前輸入的內容）        selectionStart （選中的內容的起始位置，無選中時返回當前光標所在位置）        selectionEnd （選中內容結束位置，無選中時返回光標位置）        selectionDirection （選取方向 forward backward）        setSelectionRange(start, end[, direction]) （使用程序選中內容）        setRangeText(replacement[, start, end, [mode]]) （設置內容範圍）        selection        表示選擇區域，對於 input 元素一樣有效        selectionDirection 主要是用於在使用 SHIFT 鍵與方向鍵組合選取時的        選取方向。設置爲 forward 時選取移動的方向爲 selectionEnd 設置爲        backward 時移動方向爲 selectionStart        <script>            textarea.addEventListener(                    'input', function(event) {                        var target = event.target,                                cursor = target.selectionStart;                        if(target.value.charAt(cursor-1) === '@') {                            doShowAtList(functi=on(name){                                var end = cursor + name.length;                                target.setRangeText(                                        name, cursor, end, 'end'                                );                            });                        }                    }            );        </script>        more elements:        fieldset        button        keygen        output        progress        meter表單驗證:        能夠被驗證的元素以下所示：】        button        input        select        textarea        如下狀況不能夠作驗證        input 元素在類型是 hidden, reset, button 時        button 元素在類型爲 reset, button 時        input 與 textarea 當屬性爲 readonly 時        當元素爲 datalist 的子孫節點時        當元素被禁用時 disabled 的狀態        屬性        驗證涉及到如下的如下屬性，在每個能夠驗證的元素上都可以調用對於的屬性或經過接口進行操做：        willValidate （代表此元素在表單提交時是否會被驗證）        checkValidity() （用於驗證元素，返回 true 當驗證經過，或者觸發 invalid 事件）        validity （存儲驗證結果）        validationMessage （顯示驗證異常信息）        setCustomValidity(message) （自定義驗證錯誤信息）自定義異常:        <form action="./api" method="post">            <label>Name: <input name="username" required></label>            <button>submit</button>        </form>        <script>            input.addEventListener(                    'invalid', function(event){                        var target = event.target;                        if (target.validity.valueMissing) {                            target.setCustomValidity('Name is missing');                        }                    }            )        </script>        禁止驗證範例        使用 form 中 novalidate 屬性來禁止表單提交的驗證。        <form action="./api" method="post" novalidate>            <label>Mobile: <input name="mobile" type="number"></label>            <button>submit</button>        </form>        表單提交:        在操做過程當中經過控件的操做來提交表單（敲擊回車來提交表單），其須要知足如下的條件：        表單有非禁用的提交按鍵        沒有提交按鍵時，不超過一個類型爲 text search url email password date time number 的 input 元素        提交過程細節        提交過程分爲兩個階段，第一個階段是更具表單 enctype 指定的值構建要提交的數據，第二個階段是使用指定的方法（method）發送數據到 action 指定的目標。        構建提交數據，從可提交元素中提取數據組成指定數據結構過程（可提交元素有 button input keygen object select textarea）        編碼方式（enctype）所支持的形式：        application/x-www-form-urlencoded （默認，數據格式爲 & 分隔的鍵值對）        multipart/form-data （IFC 2388 字節流形式，例如文件上傳所使用的數據編碼形式）        text/plain （回車換行符分隔的鍵值對）        特殊案例一        當一個表單元素 name="isindex" 而且 type="text" 並且知足以下要求時：        編碼格式爲 application/x-www-form-urlencoded        做爲表單的第一個元素        則提交時只發送 value 值，不包含 name。        <form action="./api" method="post">            <input name="isindex">            <input name="a">            <button>submit</button>        </form>        特殊案例二        當 name="_charset_" 而且類型爲 hidden 時，並且知足以下要求時：        沒有設置 value 值        則提交時 value 自動使用當前提交的字符集填充。        submit 接口        form.submit() 能夠經過調用接口submit()直接提交表單，在提交表單時均會觸發一個 onsubmit 表單提交事件，在這個事件中 women 能夠作下面的事件：        提交前的數據驗證        阻止事件的默認行爲來取消表單的提交（例如當驗證失敗時）        <script>            form.addEventListener(                    'submit', function(event) {                        var notValid = false;                        var elements = event.target.elements;                        // 自定義驗證                        if (notValid) {                            // 取消提交                            event.preventDefault();                        }                    }            )        </script>        無刷新表單提交範例:        <iframe name="targetFrame" class="f-hidden" style="display:none" id="result">            <form action="./api" method="post" target="targetFrame">                <input name="isindex">                <input name="a">                <button>submit</button>            </form>            <script>                var frame = document.getElementById('result');                frame.addEventListener(                        'load', function(event) {                            try {                                var result = JSON.parse(                                        frame.contentWindow.document.body.textContent                                );                                // 還原登錄按鈕狀態                                disabledSubmit(false);                                // 識別登錄結果                                if (result.code === 200) {                                    showMessage('j-suc', 'success');                                    form.reset();                                }                            } catch(ex) {                                // 忽略操做                            }                        }                )            </script>表單應用範例:            <form action="/api/login" class="m-form" name="loginForm" target="result" autocomplete="off">                <legend>手機號碼登陸</legend>                <fieldset>                    <div class="msg" id="message"></div>                    <div>                        <label for="telephone">手機號:</label>                        <input id="telephone" name="telephone" class="u-txt" type="tel" maxlength="11" required pattern="^0?(13[0-9]|15[0123456789]|14[57][0-9]{8}$)"><br />                        <span class="tip">11位數字手機號碼</span>                    </div>                    <div>                    <label for="password">密 碼:</label>                    <input id="password" name="password" type="password" class="u-txt"><br />                    <span class="tip">至少6位,包含數字和字母</span>                   </div>                    <div><button name="loginBtn">登 錄</button></div>                </fieldset>            </form><script>    var form = document.forms.loginForm;    var message = document.getElementById('message');    // 通用邏輯封裝    function showMessage(class, message) {        if(!class) {            message.innerHTML = "";            message.classList.remove('j-suc');            message.classList.remove('j-err');        } else {            message.innerHTML = message;            message.classList.add(class);        }    }    function invalidInput (node, message) {        showMessage('j-err', message);        node.classList.add('j-err');        node.focus();    }    function clearInvalid(node){        showMessage();        node.classList.remove('j-err');    }    function disabledSubmit(disabled) {        form.loginBtn.disabled = !!disabled;        var method = !disabled ? 'remove' : 'add';        form.loginBtn.classList[method]('j-disabled');    }    // 驗證手機號碼（系統自帶方法）    form.telephone.addEventListener(            'invalid', function(event) {                event.preventDefault();                invalidInput(form.telephone, 'invalid mobile number');            }    );    // 驗證密碼    form.addEventListener(            'submit', function(event) {                var input = form.password;                var password = input.value;                errorMessage = '';                if (password.length < 6) {                    errorMessage = 'password less than 6 char';                } else if (!/\d./test(password) || !/[a-z]/i.test(password)) {                    errorMessage = 'password must contains number and letter'                }                if (!!errorMessage) {                    event.preventDefault();                    invalidInput(input, errorMessage);                    return;                }                // 提交表單代碼                // ...            }    );    // 提交表單    form.addEventListener(            'submit', function(event){                input.value = md5(password);                disabledSubmit(true);            }    );    // 狀態恢復    form.addEventListener(            'focus', function(event) {                // 錯誤還原                clearInvalid(event.target);                // 還原登錄按鈕狀態                disabledSubmit(false);            }    )</script>