HTML5的简单使用

智能表单

取色器

<input type="color" name="myColor" id="shitColor" />

$(function () {

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

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

            });

        });

 

 

日期选择框

<h3>日期</h3>

        <input type="date" name="now" />

 

 

datalist

<h3>datalist</h3>

            <input type="text" name="txtDataList" list="nameList" />

            <datalist id="nameList">

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

                <option lable="709" value="T709">709</option>

            </datalist>

 

placeholder

<input type="text" name="placeholder" placeholder="请输入验证码" />

 

自动完成

<input type="text" autocomplete="on" name="demoAutoComplete" list="autoNames" />

        <datalist id="autoNames">

            <option value="509">T5</option>

            <option value="709V">V7</option>

            <option value="709X">X7</option>

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

        <input type="tel" placeholder="输入电话" name="phone" />

 

 

 

progressbar

<progress id="pbar" value="30" name="pbar" max="100"><span>%</span></progress>

        <input type="button" value="设置值" onclick="document.getElementById('pbar').value += 10;" />

 

<input form="frmdemo" type="text" name="demoOtherForm" autofocus="autofocus" />

 

文件操作API

<input type="file" multiple="multiple" name="fileDemo" id="fileDemo" /><br/><br/>

<input type="button" value="获取文件的名字" id="btnGetFile"/>

 

<input type="file" name="fileDemo" id="fileDemo" />

    <input type="button" value="readAsDataURL" id="readAsDataURL" onclick="showDataByURL();"/>

    <input type="button" value="readAsBinaryString"  id="readAsBinaryString" onclick="showDataByBinaryString();"/>

    <input type="button" value="readAsText"  id="readAsText" onclick="showDataByText();"/>

<div id="result">

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

 

 

音视频

<video controls="controls">

                   不支持html5 video

                               <source src="小岛流年.mp4" type="video/mp4"/>

               </video><br />

    <audio controls loop="loop">     

        <source src="lanwhy-泪了.mp3" type="audio/mpeg"/>

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