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>