你的位置:首页 > 网页设计

[网页设计]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>