目前分類:HTML5 (3)

瀏覽方式: 標題列表 簡短摘要

HTML5定義了10幾種的新的輸入型別,有興趣的朋友可以上W3CSchool看看詳細的教學文章,每個都能把玩看看,相當簡單易學。

今天在玩佔位文字時,突發奇想,要如何改變placeholder的文字顏色或者背景顏色呢? 上網爬文了一下,能用CSS解決。

忙裡偷閒 發表在 痞客邦 留言(0) 人氣()

HTML5的另一項功能,本地端資料庫,很可惜IE8、9目前尚未支援,採用的是SQLite的嵌入式資料庫,試寫了一次,還蠻簡單的,令人眼花撩亂的call back function除外

<!DOCTYPE html>
<html>
<head><title>Web SQL Database Test</title>
    <script>
        function pageLoad() {
            //1024 * 1024 = 1 MB
            //採用SQLite Script,Create Table :http://www.sqlite.org/lang_createtable.html
            //W3C文件:http://www.w3.org/TR/webdatabase/#dom-sqltransaction-executesql
            var SQLScript = 'create table if not exists tCustomer(id integer  primary key autoincrement ,name varchar(10) default "")';
            var db = openDatabase('dbBOM', '1.0', 'test database', 1024 * 1024);
            document.getElementById('create').addEventListener('click', function () {
                db.transaction(function (t) {
                    t.executeSql(SQLScript);
                }, function (e) {
                    alert(e.message);
                });
            }, false);
            document.getElementById('set').addEventListener('click', function () {
                db.transaction(function (t) {
                    t.executeSql("insert into tCustomer(name) values('andy')");
                    t.executeSql("insert into tCustomer(name) values('bill')");
                }, function (e) {
                    alert(e.message);
                });
            }, false);
            document.getElementById('drop').addEventListener('click', function () {
                db.transaction(function (t) {
                    t.executeSql("drop table tCustomer");
                }, function (e) {
                    alert(e.message);
                });
            }, false);
            document.getElementById('get').addEventListener('click', onGetData, false);
            function onGetData() {
                db.readTransaction(function (t) {
                    t.executeSql('select * from tCustomer', [], SetData);
                });
            }
            function SetData(t, r) {
                for (var i = 0; i < r.rows.length; i++) {
                    for (var o in r.rows.item(i)) {
                        alert(r.rows.item(i)[o]);
                    }
                }
            }
        }
    </script>
</head>
<body onload="pageLoad();">
    <input value="建立資料表" id="create" type="button"><br>
    <input value="刪除資料表" id="drop" type="button"><br>
    <input value="插入資料" id="set" type="button"><br>
    <input value="取得資料" id="get" type="button"><br>
  
</body>
</html>
 

 擷取.PNG  

忙裡偷閒 發表在 痞客邦 留言(0) 人氣()

1.根據預設在每個網域下為5MB的容量,IE8也支持LocalSorage,容量為10MB。

2.在Chrome中,localstorage的資料是以SQLite資料庫的格式存放。路徑(win 7)為C:\Users\用戶名\AppData\Local\Google\Chrome\User Data\Default\Local Storage。下載位址:http://www.sqlite.org/download.html,下載後點選localstorage的檔案按右鍵->開啟->從已安裝程式的清單選取程式 選擇以sqlite3開啟,如圖所示:

文章標籤

忙裡偷閒 發表在 痞客邦 留言(0) 人氣()