var saveHolder = document.getElementById('saveHolder');   

                 saveHolder.onclick  = function(){   

                     var title = document.getElementById('title');   

                     var content = document.getElementById('content');   

                     createFile(fileId, title.value, content.value);// 创建文本文档  

                 };   

 

             var openedFileId = ev.currentTarget.id;   

             if(openDatabase != undefined)   

             db.transaction(function(tx) {// 查询数据库，显示文档内容  

             tx.executeSql('SELECT * FROM TextFiles', [], function(tx, rs){   

                 for(var i = 0; i < rs.rows.length; i++) {    

                 if((rs.rows.item(i).idx+"") == (openedFileId+"")){   

                     var title = document.getElementById('title');   

                     var content = document.getElementById('content');             

                     title.value = rs.rows.item(i).title;                     

                     content.value = rs.rows.item(i).content;}       

                              }   

                });   

 });   

   ev.stopPropagation();   

 }   

 };   

 break;   

 }       

 }//for   

 }  

清单14首先在桌面中寻找一个空的div，然后创建一个文档图标，并将其填充至div。文档图标有一个id属性对应文档id。最后为文档图标添加点击事件处理函数，当点击文档图标时，会首先打开记事本，然后根据文档图标的id查询数据库，提取文档的标题和内容进行显示。
图8显示了创建后的文本文档，点击后的效果如图7所示。

图 8.文本文档
时钟
系统提供了一个简单的时钟用以显示当前时间，它由一个表盘以及分针和时针组成，能够随着时间的变化动态地变换。以往的Web应用利用JavaScript或Flash完成此类功能，其复杂性可想而知。借助HTML5的draw API，可以轻松地画出所需的图形，极大的方便了此类应用的构建，此外，HTML5还提供了以往JavaScript无法支持的多线程编程，大大加强了Web应用的交互性和丰富性。
时钟有一个基本的表盘，它仅是一副简单的图片，如图 9 所示。

图 9. 表盘

(责任编辑：12图资源库)