智能表单

取色器

$(function () {

            $("#shitColor").change(function () {

                alert($(this).val());

});

});

日期选择框

datalist

<h3>datalist</h3>

<option lable="lanwhy" value="Tlanwhy">lanwhy</option>

</datalist>

placeholder

自动完成

</datalist>

智能化的input

url:<input type="url" placeholder="请输入网址" name="url" />

email:<input type="email" name="email" placeholder="请输入注册邮箱" />

time:<input type="time" name="time" required="" />

number:<input type="number" value="2" name="number" step="3" />

progressbar

文件操作API

</div>

<script type="text/javascript">
        if (typeof FileReader == "undified") {
            alert("您老的浏览器不行了！");
        }
 
        function showDataByURL() {
            var resultFile = document.getElementById("fileDemo").files[0];
            if (resultFile) {
                var reader = new window.FileReader();
                reader.readAsDataURL(resultFile);
                reader.onload = function (e) {
                    var urlData = this.result;
                    document.getElementById("result").innerHTML += "<img src='" + urlData + "' alt="" + resultFile.name + "' />";
                };
            }
        }
 
        function showDataByBinaryString() {
            var resultFile = document.getElementById("fileDemo").files[0];
            if (resultFile) {
                var reader = new window.FileReader();
                //异步方式，不会影响主线程
                reader.readAsBinaryString(resultFile);
                reader.onload = function (e) {
                    var urlData = this.result;
                    document.getElementById("result").innerHTML += urlData;
                };
            }
        }
 
        function showDataByText() {
            var resultFile = document.getElementById("fileDemo").files[0];
            if (resultFile) {
                var reader = new window.FileReader();
                reader.readAsText(resultFile, 'gb2312');
                reader.onload = function (e) {
                    var urlData = this.result;
                    document.getElementById("result").innerHTML += urlData;
                };
            }
        }
    </script>

本地存储

<input type="text" name="demoData" id="demoData"/><br />        
        SessionStorage
    <input type="button" value="添加到会话缓存里面" onclick="addDataToSessionStorage(document.getElementById('demoData').value); alert('ok');"/>
        &nbsp;&nbsp;
        LocalStorage
        <input type="button" value="添加到本地缓存里面" onclick="addDataToLocalStorage(document.getElementById('demoData').value); alert('ok');"/>
        &nbsp;&nbsp;<br />
        缓存数据
        <input type="button" value="刷新本地缓存数据" onclick="refreshData();"/><br />
        会话缓存
        <table id="tblSession">
          <tr>  <th>key</th><th>Value</th></tr>
        </table><br />
        本地缓存
        <table id="tblLocal">
           <tr> <th>key</th><th>Value</th></tr>
        </table>

<script type="text/javascript">
        function addDataToSessionStorage(data) {
            window.sessionStorage.setItem(new Date().getTime(), data);
            //sessionstorage;
        }
 
        function addDataToLocalStorage(data) {
            localStorage.setItem(new Date().getTime(), data);
        }
 
        function refreshData() {
            var tblSession = document.getElementById("tblSession");
            var tblLocal = document.getElementById("tblLocal");
 
            tblSession.innerHTML = "";
            tblLocal.innerHTML = "";
            var i;
            var key;
            var value;
            for (i = 0; i < window.sessionStorage.length; i++) {
                key = window.sessionStorage.key(i);
                value = window.sessionStorage.getItem(key);
                tblSession.innerHTML += "<tr><td>" + key + "</td><td>" + value + "</td></tr>";
            }
 
            for (i = 0; i < localStorage.length; i++) {
                key = localStorage.key(i);
                value = localStorage.getItem(key);
                tblLocal.innerHTML += "<tr><td>" + key + "</td><td>" + value + "</td></tr>";
            }
        }
    </script>

音视频

不支持html5 video

</video><br />

</audio>

本地数据库

　　<table>
            <tr>
                <td>用户名：</td>
                <td><input type="text" name="txtName" id="txtName" required/></td>
            </tr>
               <tr>
                <td>标题：</td>
                <td><input type="text" name="txtTitle" id="txtTitle" required/></td>
            </tr>
            <tr>
                <td>留言：</td>
                <td><input type="text" name="txtWords" id="txtWords" required/></td>
            </tr>
    </table>
        <input type="button" value="保存" id="btnSave"/>
        <hr/>
        <input type="button" value="展示所哟数据" onclick="showAllTheData();"/>
        <table id="tblData">
        </table>

<script type="text/javascript">
         function initDatabase() {//初始化数据库
             var db = getCurrentDb();
             if (!db) {
                 alert("您的浏览器不支持HTML5");
                 return;
             }
 
             db.transaction(function (trans) {
                 trans.executeSql("create table if not exists Demo(uName text null,title text null,words text null)", [], function (trans, result) {
                 }, function (trans, message) {
                     alert(message);
                 });
             }, function (trans, result) {
             }, function (trans, message) {
             });
         }
 
         $(function () {
             initDatabase();
             $("#btnSave").click(function () {
                 var txtName = $("#txtName").val();
                 var txtTitle = $("#txtTitle").val();
                 var txtWords = $("#txtWords").val();
                 var db = getCurrentDb();
                 //插入数据
                 db.transaction(function (trans) {
                     trans.executeSql("insert into Demo(uName,title,words) values(?,?,?) ", [txtName, txtTitle, txtWords], function (ts, data) {
                     }, function (ts, message) {
                         alert(message);
                     });
                 });
                 showAllTheData();
             });
         });
 
         function getCurrentDb() {
             //打开数据库，或者直接连接数据库参数：数据库名称，版本，概述，大小
             var db = openDatabase("myDb", "1.0", "it's to save demo data!", 1024 * 1024);;
             return db;
         }
 
         function showAllTheData() {
             $("#tblData").empty();
             var db = getCurrentDb();
             db.transaction(function (trans) {
                 trans.executeSql("select * from Demo ", [], function (ts, data) {
                     if (data) {
                         for (var i = 0; i < data.rows.length; i++) {
                             appendDataToTable(data.rows.item(i));//获取某行数据的json对象
                         }
                     }
                 }, function (ts, message) {
                     alert(message);
                     var tst = message;
                 });
             });
         }
 
         function appendDataToTable(data) {//将数据展示到表格里面
             //uName,title,words
             var txtName = data.uName;
             var txtTitle = data.title;
             var words = data.words;
             var strHtml = "";
             strHtml += "<tr>";
             strHtml += "<td>" + txtName + "</td>";
             strHtml += "<td>" + txtTitle + "</td>";
             strHtml += "<td>" + words + "</td>";
             strHtml += "</tr>";
             $("#tblData").append(strHtml);
         }
    </script>

爱程序网

HTML5的简单使用