您的位置:新葡亰496net > 新葡亰官网 > JS仿iGoogle自定义首页模块拖拽特效的方法,操作

JS仿iGoogle自定义首页模块拖拽特效的方法,操作

发布时间:2019-07-05 08:40编辑:新葡亰官网浏览(174)

    根据 HTML5 创设 Web 操作系统

    2012/09/29 · HTML5, JavaScript · 1 评论 · HTML5, Javascript

    来源:IBM Developerworks

    简介: Web 操作系统有着守旧操作系统不可能比拟的优势,如能够任何时间任何地方使用其他极端举办访谈,数据保存在劳动器端,空间更加大,数据安全性更加好,能够利用服务器端的 CPU、内部存款和储蓄器等能源拓展更为复杂的演算。不过当下的 Web 操作系统前端好多基于 Flex、Silverlight、ActiveX 插件等才能开拓,存在着对运动道具的支持性差,终端安全性差,开垦难度大等老毛病。

    HTML5 是下一代 web 语言的标准,具备包容性好,安全性高,成效丰盛,开荒方便人民群众等优点,非常契合如 Web 操作系统一类的富客户端互连网使用的前端开垦。本文将显得怎样利用 HTML5 提供的有余新本事如:本地数据库、二十多线程开采、录制扶助、离线编制程序等构建二个宗旨的 Web 操作系统。

    简介

    守旧的操作系统有着一些难以制服的劣点,如仅能在地头终端访谈,或仅支持少数的远程访谈,限于本地终端的财富,计算手艺虚亏,存款和储蓄空间有限,缺少有力的防火墙等一多元安全机制,安全性非常糟糕。鉴于以上弱点,Web 操作系统应际而生 – Web 操作系统是一种基于浏览器的虚拟的操作系统,用户通过浏览器能够在内部进展应用程序的操作,以及有关数据的积存。Web 操作系统提供的主干服务有文本文书档案的成立与储存,音频录制文件的播音与仓库储存,提供对时间新闻的帮助等,越来越高等的劳务则带有即时通讯,邮件乃至游戏等劳动。Web 操作系统克制了价值观操作系统的缺点,在网络的扶助下,它能够在任曾几何时刻,任啥地点点经由任何补助Web 的终端举办拜候,可以选拔服务器端Infiniti的企图及存款和储蓄财富,用户数量保存在劳务器端,安全性较高。

    新葡亰496net 1

    连锁本领

    当前创设 Web 操作系统的前端工夫重要有 Flex、Silverlight、ActiveX 插件等等,它们各有一对优弱点。

    Flex

    Flex 是一个精美的富客户端应用框架,专注于页面显示,Adobe 专门的学问维护,统一牢固,况且其脚本语言 ActionScript3 是面向对象的,特别适合技术员使用。弱点则是耗电高,占用带宽多,对运动采用的支撑性差。

    Silverlight

    Silverlight 是由微软生产的用于跟 Flash 抗衡的 凯雷德IA(富网络选拔)解决方案,优点是享有硬件级的加速成效,但它如今仍不成熟,对非 Windows 系统的帮助性并相当不够好,且学习难度比较大。

    ActiveX 插件

    ActiveX 插件一样是微软推出的 奥迪Q7IA 消除方案,它是叁个盛开的缓和方案,能够包容种种语言,然则它的久治不愈的病魔也是显著的,用户供给调动浏览器的平安等第并下载插件才干运作 奥迪Q3IA 应用,相当大地下跌了安全性。

    HTML5

    为促进 web 规范化运动的发展,W3C 推出了下一代 HTML 的业内 – HTML5,为无数的小卖部所支持,由此有所地利人和的前景。它有以下特点:首先,为加强用户体验,强化了 web 网页的展现质量;其次,为适应 RubiconIA 应用的前行,追加了本土数据库等 web 应用的机能;再度,由于中度规范化以及多数浏览器商家的鼎力协助,它的包容性和安全性相当高;最终它是一种轻巧的语言,轻松为常见开采者通晓。更为可贵的是,由于节俭和耗能低,在活动设备上 HTML5 将具有越来越大的优势。由此更契合如 Web 操作系统一类的 ENCOREIA 应用的前端开辟。

    系统简要介绍

    本系统基于 HTML5 开垦,利用 HTML5 引进的有余新技术如拖拽 API、摄像标签、本地数据库、draw API、八线程开垦、离线编制程序等提供了八个骨干的 Web 操作系统碰到,包括了对桌面包车型地铁协理、应用程序的援救,提供了叁个轻易易行的摄像播放器和记事本以及贰个石英钟,并对系统日志进行了记录,其它还提供了对离线状态的支撑。

    桌面达成

    系统对桌面的扶助入眼满含应用程序Logo的开发与拖拽,以及桌面包车型地铁上下文菜单等。

    桌面拖拽

    桌面包车型大巴布局由自然数额的 div 组成,它们遵照顺序依次排列在矩形的桌面上,为应用程序图标的展开与拖拽提供了着力的支撑。

    清单 1. 创建 div

    XHTML

    var iconHolder = document.createElement("div"); iconHolder.id = 'iconHolder' i; iconHolder.className = "iconHolder"; mainDiv.appendChild(iconHolder);

    1
    2
    3
    4
    var iconHolder = document.createElement("div");
    iconHolder.id = 'iconHolder' i;
    iconHolder.className = "iconHolder";
    mainDiv.appendChild(iconHolder);

    HTML5 提供了对 drag 事件的支撑,大大简化了贯彻拖拽的难度。通过对 dragstart 事件的监听,将被拖拽的应用程序Logo所在的 div 记录下来,作为拖拽的源。

    清单 2. 拖拽扶助

    XHTML

    iconHolder.addEventListener("dragstart", function(ev) { var dt = ev.dataTransfer; dt.setData("text/plain", ev.currentTarget.id);// 记录被拖拽Logo的 id }, false); iconHolder.add伊芙ntListener("drop", function(ev) { var dt = ev.dataTransfer; var srcIconHolderId = dt.getData("text/plain"); var srcIconHolder = document.getElementById(srcIconHolderId); // 假使拖拽至回收站,则删掉被拖拽Logo,否则调换两图标地点if(ev.currentTarget.firstChild && ev.currentTarget.firstChild.id == "recycleBin" && srcIconHolder.firstChild.id != "recycleBin"){ srcIconHolder.innerHTML = ""; }else if(ev.currentTarget.firstChild){ var temp = ev.currentTarget.firstChild; ev.currentTarget.appendChild(srcIconHolder.firstChild); srcIconHolder.appendChild(temp); }else{ ev.currentTarget.appendChild(srcIconHolder.firstChild); } }, false);

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    iconHolder.addEventListener("dragstart", function(ev) {
    var dt = ev.dataTransfer;
    dt.setData("text/plain", ev.currentTarget.id);// 记录被拖拽图标的 id
    }, false);
     
    iconHolder.addEventListener("drop", function(ev) {
    var dt = ev.dataTransfer;
    var srcIconHolderId = dt.getData("text/plain");
    var srcIconHolder = document.getElementById(srcIconHolderId);
     
    // 如果拖拽至回收站,则删掉被拖拽图标,否则互换两图标位置
    if(ev.currentTarget.firstChild && ev.currentTarget.firstChild.id == "recycleBin" &&
    srcIconHolder.firstChild.id != "recycleBin"){
                    srcIconHolder.innerHTML = "";
    }else if(ev.currentTarget.firstChild){
            var temp =  ev.currentTarget.firstChild;
            ev.currentTarget.appendChild(srcIconHolder.firstChild);
            srcIconHolder.appendChild(temp);
    }else{
           ev.currentTarget.appendChild(srcIconHolder.firstChild);
    }
    }, false);

    通过对 drop 事件的监听,能够猎取拖拽的源,以及拖拽的对象 div。若目的 div 为空,则将源 div 中的应用程序Logo转移至指标 div 中。若指标 div 中已涵盖应用程序Logo,则将八个Logo的职位沟通。若回收站Logo处于指标 div 中,回收站将发挥功能并将源 div 中的应用程序Logo删除。图 1 体现了桌面拖拽的功力。

    图 1. 桌面拖拽效果

    新葡亰496net 2次第展开

    先后能够以三种方法张开,左键点击或通过上下文菜单展开。

    通过监听 div 的 onclick 事件,获取要开采的应用程序 id,并行使 openApp 方法展开相应的应用程序可完毕对左键点击的补助。

    清单 3. 左键点击

    XHTML

    iconHolder.onclick = function(ev){ if(ev.currentTarget.firstChild){ openApp(ev.currentTarget.firstChild.id); ev.stopPropagation(); } };

    1
    2
    3
    4
    5
    6
    iconHolder.onclick =  function(ev){
    if(ev.currentTarget.firstChild){
            openApp(ev.currentTarget.firstChild.id);
            ev.stopPropagation();
    }
    };

    由此监听 div 的 oncontextmenu 事件,获取要开垦的应用程序 id,并运用 openAppContextMenu 方法展现相应应用程序的上下文菜单,可完结对右键上下文菜单的扶助。

    清单 4. 上下文菜单

    XHTML

    iconHolder.oncontextmenu = function(ev){ if(ev.currentTarget.firstChild){ openAppContextMenu(ev.currentTarget.firstChild.id, ev); ev.stopPropagation(); } return false; };

    1
    2
    3
    4
    5
    6
    7
    iconHolder.oncontextmenu =  function(ev){
    if(ev.currentTarget.firstChild){
            openAppContextMenu(ev.currentTarget.firstChild.id, ev);
            ev.stopPropagation();
    }
    return false;
    };

    选用相应应用程序的 id,能够赢得相应应用程序的剧本,并奉行,同偶然间在系统日志中著录下相应的操作。

    清单 5. 程序展开

    XHTML

    function openApp(appId){ var time = new Date().getTime(); var action = "open app"; var details = "open: " appId; addHistory(time, action, details);// 记录系统日志 var appScript = getAppScript(appId);// 获取应用程序脚本 eval(appScript);// 推行应用程序 }

    1
    2
    3
    4
    5
    6
    7
    8
    function openApp(appId){
        var time = new Date().getTime();
        var action = "open app";
        var details = "open: " appId;
        addHistory(time, action, details);// 记录系统日志
        var appScript = getAppScript(appId);// 获取应用程序脚本
        eval(appScript);// 执行应用程序
    }

    清单 6. 开拓程序上下文菜单

    XHTML

    function openAppContextMenu(appId, ev){ var appContextMenu = document.getElementById("appContextMenu"); appContextMenu.style.display="block";// 令上下文菜单可知appContextMenu.style.pixelTop=ev.clientY;// 设置内外文菜单位置appContextMenu.style.pixelLeft=ev.clientX; appContextMenu.style.background = "#eee"; appContextMenu.style.color = "black"; appContextMenu.style.fontSize = "30"; appContextMenu.style.width = "200px"; appContextMenu.style.height = "220px"; appContextMenu.style.opacity = 0.5;// 令上下文菜单发光度为 50%appContextMenu.innerHTML = ""; // 获取应用程序相应上下文菜单的从头到尾的经过 var apps = getApps(); for(var i=0; i<apps.length; i ){ if(apps[i].appId == appId){ for(var j=0; j<apps[i].contextMenu.length; j ){ appContextMenu.innerHTML = "<div class='appContextMenuItem' onclick="appContextMenu.style.display='none';" apps[i].contextMenu[j].action "" onmouseover='this.style.background="darkblue"' onmouseout='this.style.background="#eee"'>" apps[i].contextMenu[j].name "</div>"; } break; } } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    function openAppContextMenu(appId, ev){
    var appContextMenu = document.getElementById("appContextMenu");
    appContextMenu.style.display="block";// 令上下文菜单可见
    appContextMenu.style.pixelTop=ev.clientY;// 设置上下文菜单位置
    appContextMenu.style.pixelLeft=ev.clientX;
    appContextMenu.style.background = "#eee";
    appContextMenu.style.color = "black";
    appContextMenu.style.fontSize = "30";
    appContextMenu.style.width = "200px";
    appContextMenu.style.height = "220px";
    appContextMenu.style.opacity = 0.5;// 令上下文菜单透明度为 50%
    appContextMenu.innerHTML = "";
     
    // 获取应用程序相应上下文菜单的内容
    var apps = getApps();
    for(var i=0; i<apps.length; i ){
                    if(apps[i].appId == appId){
                            for(var j=0; j<apps[i].contextMenu.length; j ){
                            appContextMenu.innerHTML = "<div class='appContextMenuItem'
                            onclick="appContextMenu.style.display='none';"
                            apps[i].contextMenu[j].action ""
                            onmouseover='this.style.background="darkblue"'
                            onmouseout='this.style.background="#eee"'>"
                             apps[i].contextMenu[j].name "</div>";
                            }
                            break;
                     }  
    }
    }

    应用程序的上下文菜单由名叫 appContextMenu 的 div 达成,将 oncontextmenu 事件中的 clientX 及 clientY 作为上下文菜单出现的地方,并将其折射率设置为 0.5。利用相应应用程序的 id 获取上下文菜单对应的剧情,并将其填写至上下文菜单。

    图 2 呈现了应用程序上下文菜单展开时的遵从。

    图 2. 应用程序上下文菜单

    新葡亰496net 3上下文菜单

    桌面上下文菜单的贯彻方式与应用程序上下文菜单的落到实处格局为主类似,图 3 和图 4 分别是桌面以及职分栏的上下文菜单。

    图 3. 桌面上下文菜单

    新葡亰496net 4

     图 4. 职分栏上下文菜单

    新葡亰496net 5录像播放器

    系统提供了贰个差不离的摄像播放器,它援助从系统外界拖拽摄像文件实行播放。

    切合网络媒体的前进,HTML5 提供了摄像标签 video 以便于增强对录像的帮衬,大大简化了 web 播放器开拓的难度,开采人员仅凭几行代码,就足以付出出多少个基本成效完善的录制播放器。

    清单 7. 录制标签的创制

    XHTML

    var video = document.createElement('video'); video.id ='video'; video.src =''; video.width = 370; video.height = 260; video.controls = 'controls'; video.className = 'video'; appHolder.appendChild(video); addDragSupport(appHolder);

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var video = document.createElement('video');
    video.id ='video';
    video.src ='';
    video.width  = 370;
    video.height = 260;
    video.controls = 'controls';
    video.className = 'video';
    appHolder.appendChild(video);
    addDragSupport(appHolder);

    清单 7 中布局了贰个 video 标签并将其增加到二个名称为 appHolder 的 div 中。代码的结尾一行为其增添了拖拽的支撑。

    HTML5 不但协助浏览器内的拖拽,也支撑浏览器与地面系统之间的拖拽。清单 8 显示了为三个 div 增添拖拽协助的进度。

    清单 8. 添加拖拽扶助

    JavaScript

    function addDragSupport(dropbox){ document.addEventListener("dragenter", function(e){ }, false); document.addEventListener("dragleave", function(e){ }, false); dropbox.addEventListener("dragenter", function(e){ }, false); dropbox.addEventListener("dragleave", function(e){ }, false); dropbox.addEventListener("dragenter", function(e){ e.stopPropagation(); e.preventDefault(); }, false); dropbox.addEventListener("dragover", function(e){ e.stopPropagation(); e.preventDefault(); }, false); dropbox.addEventListener("drop", function(e){ handleFiles(e.dataTransfer.files, e.currentTarget, e); e.stopPropagation(); e.preventDefault(); }, false); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    function addDragSupport(dropbox){
    document.addEventListener("dragenter", function(e){
    }, false);
    document.addEventListener("dragleave", function(e){
    }, false);
    dropbox.addEventListener("dragenter", function(e){
    }, false);
    dropbox.addEventListener("dragleave", function(e){
    }, false);
    dropbox.addEventListener("dragenter", function(e){
    e.stopPropagation();
    e.preventDefault();
    }, false);
    dropbox.addEventListener("dragover", function(e){
    e.stopPropagation();
    e.preventDefault();
    }, false);
    dropbox.addEventListener("drop", function(e){
    handleFiles(e.dataTransfer.files, e.currentTarget, e);
    e.stopPropagation();
    e.preventDefault();              
    }, false);  
    }

    里头,handleFiles 函数表达了怎样对拖拽的文本进行拍卖。

    清单 9. 拖拽管理

    JavaScript

    function handleFiles(files, dropbox, e) { if(files.length == 0){// 若文件荒诞不经,则用相应文本代替 var dt = e.dataTransfer; var text = dt.getData("text/plain"); var p = document.createElement("p"); p.innerHTML = text; dropbox.appendChild(p); return; } for (var i = 0; i < files.length; i ) { var file = files[i]; var fileProcessor = dropbox.firstChild; fileProcessor.classList.add("obj"); fileProcessor.file = file; // 增多文书 var reader = new FileReader(); reader.onload = (// 读取文件内容 function(aFileProcessor) { return function(e) { aFileProcessor.src = e.target.result; }; } )(fileProcessor); reader.readAsDataU卡宴L(file); } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    function handleFiles(files, dropbox, e) {
        if(files.length == 0){// 若文件不存在,则用相应文本代替
             var dt = e.dataTransfer;
             var text = dt.getData("text/plain");
             var p = document.createElement("p");
             p.innerHTML = text;
             dropbox.appendChild(p);
             return;
    }
     
    for (var i = 0; i < files.length; i ) {
             var file = files[i];
             var fileProcessor = dropbox.firstChild;
             fileProcessor.classList.add("obj");
             fileProcessor.file = file; // 添加文件
     
             var reader = new FileReader();
             reader.onload = (// 读取文件内容
             function(aFileProcessor) {
                     return function(e) {
                     aFileProcessor.src = e.target.result;
    };
    }
    )(fileProcessor);
      reader.readAsDataURL(file);
    }
    }

    handleFiles 函数首先剖断文件是不是存在,若不设有,则以相应文字代替,若存在,则对

    抱有文件相继举行管理。向 fileprocessor( 这里是摄像标签 ) 添Gavin书,然后采取 FileReader 读取文件内容至 fileprocessor 拓展管理。

    图 5 展现了拖拽一个录像文件 movie.ogg 到播放器的功效。

    图 5. 摄像播放

    新葡亰496net 6

    地点存款和储蓄

    Web 操作系统平常将抢先八分之四多少存储于劳动器端,这样做的功利可想而知,数据存款和储蓄空间越来越大,安全性越来越好。但是那样做也是有不足之处,由于网络的牢固性依旧较本地磁盘差,所以在脱离网络的景观下,Web 操作系统不恐怕赢得相应的数目能源,由此 Web 操作系统供给自然的拜访本地存储空间的力量,当然当地存款和储蓄空间仅是作为服务器端存款和储蓄的三个填补,它的空间有限,访谈也饱尝确定的范围。

    直白以来,HTML 以 Cookie 作为拜谒本地空间的艺术,但是,这种格局具备好多劣势和不足,如存款和储蓄的数量格式过于简单,常常仅为键值对;存款和储蓄的长空尺寸有限。为此,HTML5 提供了本地数据库以狠抓地点存储空间的拜谒技艺,它是一个简化版的数据库,能够援救模拟的 SQL 以及简单的事务管理等职能。

    系统为永葆地点存储,创设了贰个名称为 MyData 的数据库。清单 10 显示了数据库创立的经过。

    清单 10. 创办数据库

    XHTML

    var db; var openDatabase; if(openDatabase != undefined) db = openDatabase('MyData', '', 'My Database', 102400);

    1
    2
    3
    4
    var db;
    var openDatabase;
    if(openDatabase != undefined)
         db = openDatabase('MyData', '', 'My Database', 102400);

    里头 MyData 为数据库的名目,省略的参数为数据库的版本,My Database 为显示的称呼,最终的数字为数据库预估长度(以字节为单位)。

    系统日志将系统在某不时间的展现操作记录下来,当地数据库为其提供仓库储存援救。日志在数据库中寄放为表 History,包括 3 个字段,分别为时间,操作,及操作的详细音讯。清单 11 彰显了系统是怎么记录日志的。

    清单 11. 日志记录

    XHTML

    var time = new Date().getTime(); var action = "open app"; var details = "open: " appId; addHistory(time, action, details);// 向系统日志中加多一条记下 function addHistory(time, action, details){ if(openDatabase != undefined) db.transaction( function(tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS History(time INTEGER, action TEXT, details TEXT)',[]);// 创制日志记录表 tx.executeSql('INSERT INTO History VALUES(?, ?, ?)', [time, action, details], // 插入一条日志 function(tx, rs) { //alert("store: " time "-" action "-" details); }, function(tx, error) { //alert(error.source "::" error.message); }); }); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    var time = new Date().getTime();  
    var action = "open app";
    var details = "open: " appId;
    addHistory(time, action, details);// 向系统日志中添加一条记录
     
    function addHistory(time, action, details){
    if(openDatabase != undefined)
    db.transaction(
    function(tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS History(time INTEGER,
    action TEXT, details TEXT)',[]);// 创建日志记录表  
    tx.executeSql('INSERT INTO History VALUES(?, ?, ?)', [time,
    action, details], // 插入一条日志
    function(tx, rs) {  
    //alert("store: " time "-" action "-" details);  
                  },  
    function(tx, error) {
        //alert(error.source "::" error.message);  
    });  
    });  
    }

    清单的首先片段显得了什么样调用日志记录,第二有些显得了日记记录的事无巨细经过。在多个transaction 中,首先决断表 History 是不是存在,若不设有,则创建它。第二有的进行一条 SQL 语句,向数据库中插入当前的日志。

    经过搜寻表 History,咱们得以查看系统日志,清单 12 展现了怎么着从数据库中询问系统日志,并将其出示出来。

    清单 12. 日记展现

    XHTML

    var historyTable = document.getElementById("historyTable"); // 定义表头 historyTable.innerHTML = ""; var th = document.createElement('thead'); th.style = "color:#CC3300"; var th1 = document.createElement('td'); th1.align = "center"; th1.width=300; th1.innerHTML = "Time"; var th2 = document.createElement('td'); th2.align = "center"; th2.width=100; th2.innerHTML = "Action"; var th3 = document.createElement('td'); th3.align = "center"; th3.width=150; th3.innerHTML = "Details"; th.appendChild(th1); th.appendChild(th2); th.appendChild(th3); historyTable.appendChild(th); if(openDatabase != undefined) db.transaction(function(tx) { tx.executeSql('SELECT * FROM History', [], function(tx, rs) { // 将日志逐个呈现到表的各行中 for(var i = 0; i < rs.rows.length && i<15; i ) { var tr = document.createElement('tr'); var td1 = document.createElement('td'); td1.style.paddingLeft = "3px"; td1.style.paddingRight = "3px"; var t = new Date(); t.setTime(rs.rows.item(i).time); td1.innerHTML = t.toLocaleDateString() " " t.toLocaleTimeString(); var td2 = document.createElement('td'); td2.style.paddingLeft = "3px"; td2.style.paddingRight = "3px"; td2.innerHTML = rs.rows.item(i).action; var td3 = document.createElement('td'); td3.style.paddingLeft = "3px"; td3.style.paddingRight = "3px"; td3.innerHTML = rs.rows.item(i).details; tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); historyTable.appendChild(tr); } }); });

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    var historyTable = document.getElementById("historyTable");
     
    // 定义表头
    historyTable.innerHTML = "";
    var th = document.createElement('thead');
    th.style = "color:#CC3300";
    var th1 = document.createElement('td');
    th1.align = "center";
    th1.width=300;
    th1.innerHTML = "Time";
    var th2 = document.createElement('td');
    th2.align = "center";
    th2.width=100;
    th2.innerHTML = "Action";
    var th3 = document.createElement('td');
    th3.align = "center";
    th3.width=150;
    th3.innerHTML = "Details";
    th.appendChild(th1);  
    th.appendChild(th2);  
    th.appendChild(th3);
    historyTable.appendChild(th);
     
    if(openDatabase != undefined)
    db.transaction(function(tx) {    
    tx.executeSql('SELECT * FROM History', [], function(tx, rs)
    {  
          // 将日志逐条显示到表的各行中
    for(var i = 0; i < rs.rows.length && i<15; i ) {                    
    var tr = document.createElement('tr');
    var td1 = document.createElement('td');
    td1.style.paddingLeft = "3px";
    td1.style.paddingRight = "3px";
     
    var t = new Date();  
    t.setTime(rs.rows.item(i).time);  
    td1.innerHTML = t.toLocaleDateString()
    " " t.toLocaleTimeString();
     
    var td2 = document.createElement('td');  
    td2.style.paddingLeft = "3px";
    td2.style.paddingRight = "3px";
    td2.innerHTML = rs.rows.item(i).action;
     
    var td3 = document.createElement('td');
    td3.style.paddingLeft = "3px";
    td3.style.paddingRight = "3px";
    td3.innerHTML = rs.rows.item(i).details;  
     
    tr.appendChild(td1);  
    tr.appendChild(td2);  
    tr.appendChild(td3);
     
    historyTable.appendChild(tr);                  
    }  
    });  
    });

    清单 12 中,首先猎取用于体现的日志的 HTML 表格 historyTable,并设置其样式及表头。

    下一场在三个 transaction( 事务 ) 中,推行一条 SQL 语句,查询系统日志,并将每条日志增加为 historyTable 中的一行以便展现。图 6 展现了系统日志的成效。

    图 6. 系统日志

    新葡亰496net 7

    记事本

    系统提供了二个简短的记事本,落成了文本文档的基本操作。文本文书档案富含标题和剧情四个显式属性,以及三个名叫id 的隐式属性。与系统日志类似,本地数据库为文本数据的存放提供了底层的支撑。图 7 展现了记事本程序的分界面。

    图 7. 记事本

    新葡亰496net 8

    当编辑完文书档案的标题与内容后,点击左上角的保存开关,将施行 createFile 函数。清单 13 呈现了 createFile 函数的事无巨细经过。

    清单 13. 创立文件

    XHTML

    function createFile(fileId, fileTitle, fileContent){ var idx = 1; var update = false;//false 表示新建,true 代表修改 if(openDatabase != undefined) db.transaction(function(tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS TextFiles(idx INTEGER, title TEXT, content TEXT)',[]);// 创设文本文书档案表 tx.executeSql('SELECT * FROM TextFiles', [], function(tx, rs){ for(var i = 0; i < rs.rows.length; i ) { // 若文书档案存在,则修改它 if(rs.rows.item(i).idx == fileId){ db.transaction(function(tx) { tx.executeSql('UPDATE TextFiles SET title=?, content=? WHERE idx=' fileId, [fileTitle, fileContent], function(tx, rs) { alert("update successfully"); }); }); return; } } // 若文书档案不设有,则新建三个文书档案 if(rs.rows.length>0) idx = rs.rows.item(rs.rows.length-1).idx 1; db.transaction(function(tx) { tx.executeSql('INSERT INTO TextFiles VALUES(?, ?, ?)', [idx, fileTitle, fileContent], function(tx, rs){ alert("save successfully: " idx "-" fileTitle "-" fileContent); createFileIcon(idx); }, function(tx, error) { alert(error.source "::" error.message); }); }); }); }); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    function createFile(fileId, fileTitle, fileContent){
         var idx = 1;
         var update = false;//false 表示新建,true 表示修改
     
         if(openDatabase != undefined)
             db.transaction(function(tx) {
             tx.executeSql('CREATE TABLE IF NOT EXISTS TextFiles(idx INTEGER,
             title TEXT, content TEXT)',[]);// 创建文本文档表
             tx.executeSql('SELECT * FROM TextFiles', [], function(tx, rs){
                 for(var i = 0; i < rs.rows.length; i ) {
                    // 若文档存在,则修改它
                     if(rs.rows.item(i).idx == fileId){
                         db.transaction(function(tx) {    
                         tx.executeSql('UPDATE TextFiles
                         SET title=?, content=?
                         WHERE idx=' fileId,
                         [fileTitle, fileContent],
                         function(tx, rs) {  
                                 alert("update successfully");
                         });  
                     });
                     return;
                 }        
    }    
    // 若文档不存在,则新建一个文档        
    if(rs.rows.length>0)
    idx = rs.rows.item(rs.rows.length-1).idx 1;
    db.transaction(function(tx) {                        
    tx.executeSql('INSERT INTO TextFiles VALUES(?, ?, ?)', [idx, fileTitle, fileContent],
                   function(tx, rs){  
                   alert("save successfully: " idx "-" fileTitle "-" fileContent);  
                   createFileIcon(idx);  
    },  
    function(tx, error) {
                    alert(error.source "::" error.message);  
                     });  
                 });
             });
         });
    }

    清单 13 首先在三个 transaction 中,首先决断用于存款和储蓄文本文书档案的表 TextFiles 是不是留存,若不设有,则创制它。然后通过查询表 TextFiles 决断文本文书档案是或不是存在,若存在,则当前操作为更新操作,程序将实行一条 SQL 语句,对脚下文本文档实行创新。若不设有,则取当前最大文书档案 id 并加 1 当做新文书档案的 id,并进行一条 SQL 语句,将文书档案音信,包涵文书档案id,以及标题和内容插入到数据库中,并于插入操作停止后的回调方法中,利用 createFileIcon 方法在桌面上为新文书档案创制一个文书档案图标。清单 14 展现了 createFileIcon 方法的切实经过。

    清单 14. 创造文书档案Logo

    XHTML

    function createFileIcon(fileId){ var iconHolder; for(var i=1;i<=120;i ){// 查询第贰个为空的职位 iconHolder = document.getElementById('iconHolder' if(!iconHolder.firstChild ){ var text = document.createElement('img'); text.src = "images/text.gif"; text.id = fileId; iconHolder.appendChild(text); text.onclick = function(ev){ if(ev.currentTarget){ openApp('notebook');// 打开记事本应用程序 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 }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    function createFileIcon(fileId){
         var iconHolder;
         for(var i=1;i<=120;i ){// 查询第一个为空的位置
             iconHolder = document.getElementById('iconHolder' if(!iconHolder.firstChild ){
                 var text = document.createElement('img');
                 text.src = "images/text.gif";
                 text.id = fileId;
                 iconHolder.appendChild(text);
                 text.onclick =  function(ev){  
                     if(ev.currentTarget){
                     openApp('notebook');// 打开记事本应用程序
                     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,然后创造三个文书档案Logo,并将其填充至 div。文书档案Logo有一个 id 属性对应文书档案id。最终为文书档案Logo增加点击事件管理函数,当点击文书档案Logo时,会首先张开记事本,然后依照文档Logo的 id 查询数据库,提取文书档案的标题和内容开展突显。

    图 8 展现了创建后的文本文书档案,点击后的机能如图 7 所示。

    图 8. 文本文书档案

    新葡亰496net 9时钟

    系统提供了二个简单易行的石英钟用以显示当前时间,它由二个表盘以及分针和时针组成,能够随着时光的扭转动态地调换。未来的 web 应用使用 JavaScript 或 Flash 完成此类作用,其复杂总来说之。借助 HTML5 的 draw API,能够轻便地画出所需的图样,不小的惠及了此类应用的构建,其它,HTML5 还提供了将来 JavaScript 不能够支撑的二十四线程编制程序,大大抓牢了 web 应用的交互性和丰硕性。

    石英手表有多少个核心的表面,它仅是一副轻易的图样,如图 9 所示。

    图 9. 表盘

    新葡亰496net 10

    在表面之上,建有贰个 canvas( 画布 ),如清单 15 所示。

    清单 15. 画布

    JavaScript

    <canvas id="canvas" width="128px" height="128px"></canvas>

    1
    <canvas id="canvas" width="128px" height="128px"></canvas>

    接下去,清单 17 将要画布上模拟出机械钟以及分针,在那后边,额外部供给要贰个后台线程用以总计时间,它被定义在名叫time.js 的单独脚本文件中,如清单 16 所示。

    清单 16. 后台线程

    XHTML

    onmessage = function(event) { //var i = 1; setInterval(function() { //i ; postMessage(""); }, 60000); };

    1
    2
    3
    4
    5
    6
    7
    8
    onmessage = function(event)
    {
    //var i = 1;
        setInterval(function() {
        //i ;
        postMessage("");
        }, 60000);
    };

    每过 60 分钟,后台线程将会上前台线程发送贰个空音信,以告知前台线程有 60 分钟已经过去了。

    清单 17. 前台线程的初阶化

    XHTML

    var canvas = document.getElementById("canvas"); if (canvas == null) return false; var context = canvas.getContext('2d');// 那是贰个二维的图像 context.lineWidth = 2; context.translate(64, 64);// 定义原点 // 伊始化分针 context.beginPath(); context.moveTo(0,0);// 从原点初阶 var date = new Date(); var mhx = 37*Math.cos((date.getMinutes()-15)*Math.PI/30); var mhy = 37*Math.sin((date.getMinutes()-15)*Math.PI/30); context.lineTo(mhx, mhy);// 至分针末端所在地方 context.closePath(); context.stroke(); // 开首化时针 context.beginPath(); context.moveTo(0,0);// 从原点早先 var date = new Date(); var hour = date.getHours(); if(hour>=12) hour = hour - 12; var minute = date.getMinutes(); var hhx = 27*Math.cos((hour-3)*Math.PI/6 minute*Math.PI/360); var hhy = 27*Math.sin((hour-3)*Math.PI/6 minute*Math.PI/360); context.lineTo(hhx, hhy);// 至时针末端所在地方 context.closePath(); context.stroke();

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    var canvas = document.getElementById("canvas");
    if (canvas == null)  
    return false;  
    var context = canvas.getContext('2d');// 这是一个二维的图像
    context.lineWidth = 2;
    context.translate(64, 64);// 定义原点
     
    // 初始化分针
    context.beginPath();
    context.moveTo(0,0);// 从原点开始
    var date = new Date();
    var mhx = 37*Math.cos((date.getMinutes()-15)*Math.PI/30);
    var mhy = 37*Math.sin((date.getMinutes()-15)*Math.PI/30);
    context.lineTo(mhx, mhy);// 至分针末端所在位置
    context.closePath();
    context.stroke();
     
    // 初始化时针
    context.beginPath();
    context.moveTo(0,0);// 从原点开始
    var date = new Date();
    var hour = date.getHours();
    if(hour>=12)
    hour = hour - 12;
    var minute = date.getMinutes();
    var hhx = 27*Math.cos((hour-3)*Math.PI/6 minute*Math.PI/360);
    var hhy = 27*Math.sin((hour-3)*Math.PI/6 minute*Math.PI/360);
    context.lineTo(hhx, hhy);// 至时针末端所在位置
    context.closePath();
    context.stroke();

    前台线程首先会拿走 canvas,并设置表盘中央为坐标原点。然后,获取当前岁月,总计分针当前所应指向的坐标,然后从原点出发,画出分针。对于时针,若系统为 24 时辰制,须求首先转化为 12 时辰制,此后的拍卖附近于分针。

    接下去,供给将前台与后台线程联系起来,利用 HTML5 提供的三十二线程编制程序方法,注解 Worker 对象作为后台线程的代理,并采纳onmessage 事件,对后台线程发出的音讯实行拍卖。

    清单 18. 前台线程的 onmessage 事件

    XHTML

    var worker = new Worker("js/timer.js"); worker.onmessage = function(event){ context.clearRect(-64, -64, 128, 128);// 清空分针和时针 // 重画分针 context.beginPath(); context.moveTo(0,0);// 从原点初叶 var date = new Date(); var mhx = 37*Math.cos((date.getMinutes()-15)*Math.PI/30); var mhy = 37*Math.sin((date.getMinutes()-15)*Math.PI/30); context.lineTo(mhx, mhy);// 至分针末端所在地点 context.closePath(); context.stroke(); // 重画时针 context.beginPath(); context.moveTo(0,0);// 从原点初步 var date = new Date(); var hour = date.getHours(); if(hour>=12) hour = hour - 12; var minute = date.getMinutes(); var hhx = 27*Math.cos((hour-3)*Math.PI/6 minute*Math.PI/360); var hhy = 27*Math.sin((hour-3)*Math.PI/6 minute*Math.PI/360); context.lineTo(hhx, hhy);// 至时针末端所在地方 context.closePath(); context.stroke(); }; worker.postMessage("");

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    var worker = new Worker("js/timer.js");
     
    worker.onmessage = function(event){
     
        context.clearRect(-64, -64, 128, 128);// 清空分针和时针
     
        // 重画分针
        context.beginPath();
        context.moveTo(0,0);// 从原点开始  
        var date = new Date();
        var mhx = 37*Math.cos((date.getMinutes()-15)*Math.PI/30);
        var mhy = 37*Math.sin((date.getMinutes()-15)*Math.PI/30);
        context.lineTo(mhx, mhy);// 至分针末端所在位置
        context.closePath();
        context.stroke();
     
            // 重画时针
        context.beginPath();
        context.moveTo(0,0);// 从原点开始  
        var date = new Date();
        var hour = date.getHours();
        if(hour>=12)
        hour = hour - 12;
        var minute = date.getMinutes();
        var hhx = 27*Math.cos((hour-3)*Math.PI/6 minute*Math.PI/360);
        var hhy = 27*Math.sin((hour-3)*Math.PI/6 minute*Math.PI/360);
        context.lineTo(hhx, hhy);// 至时针末端所在位置
        context.closePath();
        context.stroke();
        };
        worker.postMessage("");

    每过 60 分钟,后台线程将会上前台线程发送四个空音讯,前台线程接收到音信后,首先,清空 canvas,然后再次得到当前时刻,总括分针以及时针对应的坐标,比量齐观新画出时针和分针,进而做到对分针以及时针的更新,最后,每过 1 分钟,表盘更新一回,进而模拟出动态时针的效果,如图 10 所示。

    图 10. 时钟

    新葡亰496net 11离线支持

    即使如此 Web 操作系统的亮点是能够利用网络任何时间任何地方进行访谈。然则在不能够访谈互连网的情事下,Web 操作系统便力所不比发挥成效。由此 Web 操作系统有需要在离线状态下,仍可以对某些行使及其职能拓展支撑。事实上,各样浏览器已提供了有滋有味的缓存机制以提供对离线应用的支撑,然后那一个缓存机制往往是一时性的,不可控的。HTML5 为开拓人士提供了缓和此难点的另一种渠道,它提供了一种永世性的,自定义的缓存方法,使得 Web 操作系统能够在离线的情景下,依旧帮助部分选取的法力。

    HTML5 离线援救的主导是二个缓存清单,其中列出了亟需缓存的文书,本系统中的缓存文件 index.manifest,如清单 19 所示。

    清单 19. 缓存清单

    XHTML

    CACHE MANIFEST #version 1.10 CACHE: index.html js/app.js js/clock.js js/data.js js/database.js js/desktop.js js/history.js js/taskbar.js js/timer.js js/file.js js/utils.js css/index.css images/appHolder1.png images/background.jpg images/clock.png images/close.gif images/computer.gif images/history.png images/network.gif images/recycleBin.gif images/startIcon.png images/taskBar.png images/vidioplayer.gif images/notebook.gif images/text.gif images/save.gif movs/movie.ogg sounds/WindowsLogonSound.wav

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    CACHE MANIFEST
    #version 1.10
    CACHE:
    index.html
    js/app.js
    js/clock.js
    js/data.js
    js/database.js
    js/desktop.js
    js/history.js
    js/taskbar.js
    js/timer.js
    js/file.js
    js/utils.js
    css/index.css
    images/appHolder1.png
    images/background.jpg
    images/clock.png
    images/close.gif
    images/computer.gif
    images/history.png
    images/network.gif
    images/recycleBin.gif
    images/startIcon.png
    images/taskBar.png
    images/vidioplayer.gif
    images/notebook.gif
    images/text.gif
    images/save.gif
    movs/movie.ogg
    sounds/WindowsLogonSound.wav

    里头,CACHE MANIFEST 标示本文件为缓存文件,#version 1.10 标示了本文件的版本。

    CACHE 之后所列项支出的则是开辟职员自定义的内容,个中积攒了装有在离线状态下用户访谈应用程序所供给的公文。

    缓存清单定义甘休后,在 index.html 中插入这几个清单文件名,这样,当浏览器加载这么些页面包车型地铁时候,会自行缓存清单文件中所罗列的文书。

    清单 20. 用到缓存清单

    XHTML

    <html manifest="index.manifest">

    1
    <html manifest="index.manifest">

    值得提的是,若要扶助离线缓存,除客户端浏览器的帮忙以外,服务端的支撑也是必需的,就本系统所使用的 tomcat 而言,需求在其计划文件 web.xml 中增多清单 21 所示的条规。

    清单 21. 劳动器端缓存配置

    XHTML

    <mime-mapping> <extension>manifest</extension> <mime-type>text/cache-manifest</mime-type> </mime-mapping>

    1
    2
    3
    4
    <mime-mapping>
    <extension>manifest</extension>
    <mime-type>text/cache-manifest</mime-type>
    </mime-mapping>

    末段,禁止使用本地机械的网络,重新展开浏览器并探访 Web 操作系统所在的网站,系统中的超越十分之五应用程序还是可以不荒谬工作,如图 11 所示。

    图 11. 离线系统

    新葡亰496net 12结束语

    正文介绍了 Web 操作系统的基本知识,并与传统的操作系统实行了相比较,进而介绍了 HTML5 这种新本领为 Web 操作系统开辟推动的益处,并与观念的 web 前端开拓本事拓展了相比,最后经过构建一个主干的 Web 操作系统详细的变现了 Web 操作系统的基本形式和效能以及支持其运营的 web 前端开垦才能是何许兑现其实际效果的。从本文的座谈中得以看看,基于 HTML5 的 Web 操作系统是前景的一大趋势,必将渐渐进入大家的平时生活工作中去。

    赞 2 收藏 1 评论

    新葡亰496net 13

    简要介绍: Web 操作系统有着古板操作系统无法比拟的优势,如能够任何时间任何地方使用其余极端实行访谈,数据保存在劳务器端,空间越来越大,数据安全性越来越好,能够利用服务器端的 CPU、内部存款和储蓄器等财富开始展览更为复杂的演算。可是当下的 Web 操作系统前端相当多基于 Flex、Silverlight、ActiveX 插件等技艺开荒,存在着对移动设备的辅助性差,终端安全性差,开荒难度大等老毛病。
    HTML5 是下一代 web 语言的正经,具备兼容性好,安全性高,作用丰盛,开荒方便人民群众等优点,极度契合如 Web 操作系统一类的富客户端网络选用的前端开辟。本文将展现怎样使用 HTML5 提供的各个新手艺如:本地数据库、多线程开辟、摄像援救、离线编制程序等构建二个为主的 Web 操作系统。
    简介
    价值观的操作系统有着一些难以制服的败笔,如仅能在地点终端访问,或仅帮忙有限的长距离访谈,限于本地终端的能源,总括本事虚弱,存款和储蓄空间有限,缺少有力的防火墙等一名目大多安全机制,安全性很糟糕。鉴于上述弱点,Web 操作系统应时而生 – Web 操作系统是一种基于浏览器的杜撰的操作系统,用户通过浏览器能够在里边举行应用程序的操作,以及相关数据的蕴藏。Web 操作系统提供的主导服务有文本文书档案的创始与存款和储蓄,音频视频文件的广播与积攒,提供对时间音信的支撑等,越来越高等的服务则带有即时通讯,邮件乃至游戏等劳务。Web 操作系统制服了观念操作系统的老毛病,在网络的援救下,它能够在别的时刻,任何地方经由任何支持Web 的终端举办访谈,能够选拔服务器端Infiniti的总计及存储能源,用户数量保存在服务器端,安全性较高。

    正文实例呈报了JS仿iGoogle自定义首页模块拖拽特效的方法。分享给我们供我们参照他事他说加以考察。具体贯彻方式如下:

    JS仿i谷歌(Google)自定义首页模块拖拽特效的诀要

     这篇著作首要介绍了JS仿iGoogle自定义首页模块拖拽特效的不二等秘书籍,实例深入分析了页面包车型地铁布局及拖拽的贯彻才具,特别富有实用价值,要求的相爱的人能够参见下

     

     

    正文实例陈述了JS仿iGoogle自定义首页模块拖拽特效的秘诀。分享给大家供我们参谋。具体落到实处格局如下:

     

    代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
    <html xmlns="" >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS仿iGoogle自定义首页模块拖拽效果</title>
    <script type="text/javascript">
    var Common = {
    getEvent: function() {//ie/ff
    if (document.all) {
    return window.event;
    }
    func = getEvent.caller;
    while (func != null) {
    var arg0 = func.arguments[0];
    if (arg0) {
    if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {
    return arg0;
    }
    }
    func = func.caller;
    }
    return null;
    },
    getMousePos: function(ev) {
    if (!ev) {
    ev = this.getEvent();
    }
    if (ev.pageX || ev.pageY) {
    return {
    x: ev.pageX,
    y: ev.pageY
    };
    }

     

    if (document.documentElement && document.documentElement.scrollTop) {
    return {
    x: ev.clientX document.documentElement.scrollLeft - document.documentElement.clientLeft,
    y: ev.clientY document.documentElement.scrollTop - document.documentElement.clientTop
    };
    }
    else if (document.body) {
    return {
    x: ev.clientX document.body.scrollLeft - document.body.clientLeft,
    y: ev.clientY document.body.scrollTop - document.body.clientTop
    };
    }
    },
    getElementPos: function(el) {
    el = this.getItself(el);
    var _x = 0, _y = 0;
    do {
    _x = el.offsetLeft;
    _y = el.offsetTop;
    } while (el = el.offsetParent);
    return { x: _x, y: _y };
    },
    getItself: function(id) {
    return "string" == typeof id ? document.getElementById(id) : id;
    },
    getViewportSize: { w: (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : (document.body?document.body.offsetWidth:0), h: (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : (document.body ? document.body.offsetHeight : 0) },
    isIE: document.all ? true : false,
    setOuterHtml: function(obj, html) {
    var Objrange = document.createRange();
    obj.innerHTML = html;
    Objrange.selectNodeContents(obj);
    var frag = Objrange.extractContents();
    obj.parentNode.insertBefore(frag, obj);
    obj.parentNode.removeChild(obj);
    },
    firstChild: function(parentObj, tagName) {
    if (Common.isIE) {
    return parentObj.firstChild;
    }
    else {
    var arr = parentObj.getElementsByTagName(tagName);
    return arr[0];
    }
    },
    lastChild: function(parentObj, tagName) {
    if (Common.isIE) {
    return parentObj.lastChild;
    }
    else {
    var arr = parentObj.getElementsByTagName(tagName);
    return arr[arr.length - 1];
    }
    },
    setCookie: function(name, value) {
    document.cookie = name "=" value;
    },
    getCookie: function(name) {
    var strCookie = document.cookie;
    var arrCookie = strCookie.split("; ");
    for (var i = 0; i < arrCookie.length; i ) {
    var arr = arrCookie[i].split("=");
    if (!arr[1]) {
    return "";
    }
    if (arr[0] == name) {
    return arr[1];
    }
    }
    return "";
    },
    delCookie: function(name) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = this.getCookie(name);
    if (cval != null) document.cookie = name "=" cval ";expires=" exp.toGMTString();
    }
    }
    var Class = {
    create: function() {
    return function() { this.init.apply(this, arguments); }
    }
    }
    var Drag = Class.create();
    Drag.prototype = {
    init: function(titleBar, dragDiv, Options) {
    //设置点击是不是透明,暗中同意透明百分之三十
    titleBar = Common.getItself(titleBar);
    dragDiv = Common.getItself(dragDiv);
    this.dragArea = { maxLeft: -9999, maxRight: 9999, maxTop: -9999, maxBottom: 9999 };
    if (Options) {
    this.opacity = Options.opacity ? (isNaN(parseInt(Options.opacity)) ? 100 : parseInt(Options.opacity)) : 100;
    if (Options.area) {
    if (Options.area.left && !isNaN(parseInt(Options.area.left))) { this.dragArea.maxLeft = Options.area.left };
    if (Options.area.right && !isNaN(parseInt(Options.area.right))) { this.dragArea.maxRight = Options.area.right };
    if (Options.area.top && !isNaN(parseInt(Options.area.top))) { this.dragArea.maxTop = Options.area.top };
    if (Options.area.bottom && !isNaN(parseInt(Options.area.bottom))) { this.dragArea.maxBottom = Options.area.bottom };
    }
    }
    else {
    this.opacity = 60;
    }
    this.originDragDiv = null;
    this.tmpX = 0;
    this.tmpY = 0;
    this.moveable = false;
    this.dragArray = [];

    var dragObj = this;
    var dragTbl = document.getElementById("dragTable");

    titleBar.onmousedown = function(e) {
    var ev = e || window.event || Common.getEvent();
    //只同意通过鼠标左键进行拖拽,IE鼠标左键为1 FireFox为0
    if (Common.isIE && ev.button == 1 || !Common.isIE && ev.button == 0) {
    }
    else {
    return false;
    }

    //管理非常情状:在最上/上面MOVE时不遇到现存DIV的情景下,又赶回发轫拖拽的列最上/下方
    var tmpColId;
    for (c = 0; c < dragTbl.rows[0].cells.length; c ) {
    for (k = 0; k < dragTbl.rows[0].cells[c].getElementsByTagName("DIV").length; k ) {
    if (dragDiv.id == dragTbl.rows[0].cells[c].getElementsByTagName("DIV")[k].id) {
    tmpColId = c;
    break;
    }
    }
    }
    var tmpPosFirstChild = Common.getElementPos(Common.firstChild(dragTbl.rows[0].cells[tmpColId], "DIV"));
    var tmpPosLastChild = Common.getElementPos(Common.lastChild(dragTbl.rows[0].cells[tmpColId], "DIV"));
    var tmpObj = { colId: tmpColId, firstChildUp: tmpPosFirstChild.y, lastChildDown: tmpPosLastChild.y Common.lastChild(dragTbl.rows[0].cells[tmpColId], "DIV").offsetHeight };

    //保存当前可拖拽各容器的所在地点
    dragObj.dragArray = dragObj.RegDragsPos();

    //插入虚线框
    var dashedElement = document.createElement("div");
    dashedElement.style.cssText = dragDiv.style.cssText;
    dashedElement.style.border = " dashed 2px #aaa ";
    dashedElement.style.marginBottom = "6px";
    dashedElement.style.width = dragDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px"; //减去boderWidth使虚线框大小保持与dragDiv一致
    dashedElement.style.height = dragDiv.offsetHeight - 2 * parseInt(dashedElement.style.borderWidth) "px"; //加上px 保证FF正确
    dashedElement.style.position = "relative";
    if (dragDiv.nextSibling) {
    dragDiv.parentNode.insertBefore(dashedElement, dragDiv.nextSibling);
    }
    else {
    dragDiv.parentNode.appendChild(dashedElement);
    }
    //拖动时成为absolute
    dragDiv.style.width = dragDiv.offsetWidth "px";
    dragDiv.style.position = "absolute";

    dragObj.moveable = true;
    dragDiv.style.zIndex = dragObj.GetZindex() 1;

    var downPos = Common.getMousePos(ev);
    dragObj.tmpX = downPos.x - dragDiv.offsetLeft;
    dragObj.tmpY = downPos.y - dragDiv.offsetTop;

    if (Common.isIE) {
    dragDiv.setCapture();
    } else {
    window.captureEvents(Event.mousemove);
    }

    dragObj.SetOpacity(dragDiv, dragObj.opacity);

    //FireFox 去除容器内拖拽图片难点
    if (ev.preventDefault) {
    ev.preventDefault();
    ev.stopPropagation();
    }

    document.onmousemove = function(e) {
    if (dragObj.moveable) {
    var ev = e || window.event || Common.getEvent();
    //IE 去除容器内拖拽图片难题
    if (document.all) //IE
    {
    ev.returnValue = false;
    }

    var movePos = Common.getMousePos(ev);
    dragDiv.style.left = Math.max(Math.min(movePos.x - dragObj.tmpX, dragObj.dragArea.maxRight), dragObj.dragArea.maxLeft) "px";
    dragDiv.style.top = Math.max(Math.min(movePos.y - dragObj.tmpY, dragObj.dragArea.maxBottom), dragObj.dragArea.maxTop) "px";

    var targetDiv = null;
    for (var k = 0; k < dragObj.dragArray.length; k ) {
    if (dragDiv == dragObj.dragArray[i]) {
    continue;
    }

    if (movePos.x > dragObj.dragArray[k].PosLeft && movePos.x < dragObj.dragArray[k].PosLeft dragObj.dragArray[k].PosWidth
    && movePos.y > dragObj.dragArray[k].PosTop && movePos.y < dragObj.dragArray[k].PosTop dragObj.dragArray[k].PosHeight
    ) {
    targetDiv = document.getElementById(dragObj.dragArray[k].DragId);
    if (movePos.y < dragObj.dragArray[k].PosTop dragObj.dragArray[k].PosHeight / 2) {
    //往上移
    dashedElement.style.width = targetDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px";
    targetDiv.parentNode.insertBefore(dashedElement, targetDiv);
    }
    else {
    //往下移
    dashedElement.style.width = targetDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px";
    if (targetDiv.nextSibling) {
    targetDiv.parentNode.insertBefore(dashedElement, targetDiv.nextSibling);
    }
    else {
    targetDiv.parentNode.appendChild(dashedElement);
    }
    }
    }
    }

    for (j = 0; j < dragTbl.rows[0].cells.length; j ) {
    var startLeft = Common.getElementPos(dragTbl.rows[0].cells[j]).x;
    if (movePos.x > startLeft && movePos.x < startLeft dragTbl.rows[0].cells[j].offsetWidth) {
    ///列无DIV
    if (dragTbl.rows[0].cells[j].getElementsByTagName("div").length == 0) {
    dashedElement.style.width = dragTbl.rows[0].cells[j].offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px";
    dragTbl.rows[0].cells[j].appendChild(dashedElement);
    }
    else {
    var posFirstChild = Common.getElementPos(Common.firstChild(dragTbl.rows[0].cells[j], "DIV"));
    var posLastChild = Common.getElementPos(Common.lastChild(dragTbl.rows[0].cells[j], "DIV"));
    //管理极度境况:在最上/上面MOVE时不相见现存DIV的情状下,又赶回初叶拖拽的列最上/下方
    var tmpUp, tmpDown;
    if (tmpObj.colId == j) {
    tmpUp = tmpObj.firstChildUp;
    tmpDown = tmpObj.lastChildDown;
    }
    else {
    tmpUp = posFirstChild.y;
    tmpDown = posLastChild.y Common.lastChild(dragTbl.rows[0].cells[j], "DIV").offsetHeight;
    }

    if (movePos.y < tmpUp) {///从最上边插入虚线框
    dashedElement.style.width = Common.firstChild(dragTbl.rows[0].cells[j], "DIV").offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px";
    dragTbl.rows[0].cells[j].insertBefore(dashedElement, Common.firstChild(dragTbl.rows[0].cells[j], "DIV"));
    }
    else if (movePos.y > tmpDown) {///从最上面插入虚线框
    dashedElement.style.width = Common.lastChild(dragTbl.rows[0].cells[j], "DIV").offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px";
    dragTbl.rows[0].cells[j].appendChild(dashedElement);
    }

    }
    }
    }
    }
    };

    document.onmouseup = function() {
    if (dragObj.moveable) {
    if (Common.isIE) {
    dragDiv.releaseCapture();
    }
    else {
    window.releaseEvents(dragDiv.mousemove);
    }
    dragObj.SetOpacity(dragDiv, 100);
    dragObj.moveable = false;
    dragObj.tmpX = 0;
    dragObj.tmpY = 0;

    //务必写在此IF内
    dragDiv.style.left = "";
    dragDiv.style.top = "";

    dragDiv.style.width = "";
    dragDiv.style.position = "";
    dashedElement.parentNode.insertBefore(dragDiv, dashedElement);
    dashedElement.parentNode.removeChild(dashedElement);
    }

    };

    }
    },
    SetOpacity: function(dragDiv, n) {
    if (Common.isIE) {
    dragDiv.filters.alpha.opacity = n;
    }
    else {
    dragDiv.style.opacity = n / 100;
    }

    },
    GetZindex: function() {
    var maxZindex = 0;
    var divs = document.getElementsByTagName("div");
    for (z = 0; z < divs.length; z ) {
    maxZindex = Math.max(maxZindex, divs[z].style.zIndex);
    }
    return maxZindex;
    },
    RegDragsPos: function() {
    var arrDragDivs = new Array();
    var dragTbl = document.getElementById("dragTable");
    var tmpDiv, tmpPos;
    for (i = 0; i < dragTbl.getElementsByTagName("div").length; i ) {
    tmpDiv = dragTbl.getElementsByTagName("div")[i];
    if (tmpDiv.className == "dragDiv") {
    tmpPos = Common.getElementPos(tmpDiv);
    arrDragDivs.push({ DragId: tmpDiv.id, PosLeft: tmpPos.x, PosTop: tmpPos.y, PosWidth: tmpDiv.offsetWidth, PosHeight: tmpDiv.offsetHeight });
    }
    }
    return arrDragDivs;
    }
    }

    window.onload = function() {
    var dragTbl = document.getElementById("dragTable");
    if (Common.getCookie("configArr")) {
    var configArr = eval("(" Common.getCookie("configArr") ")");
    for (i = 0; i < dragTbl.rows[0].cells.length; i ) {
    for (j = 0; j < configArr[i].length; j ) {
    dragTbl.rows[0].cells[i].appendChild(document.getElementById(configArr[i][j]));
    }
    }
    }
    new Drag("titleBar1", "dragDiv1");
    new Drag("titleBar2", "dragDiv2");
    new Drag("titleBar3", "dragDiv3");
    new Drag("titleBar4", "dragDiv4");
    new Drag("titleBar5", "dragDiv5");
    }

    window.onunload = function() {
    var dragTbl = document.getElementById("dragTable");
    var configArr = "";
    for (i = 0; i < dragTbl.rows[0].cells.length; i ) {
    var tmpStr = "";
    for (j = 0; j < dragTbl.rows[0].cells[i].getElementsByTagName("DIV").length; j ) {
    tmpStr = (tmpStr == "" ? "" : ",") "'" dragTbl.rows[0].cells[i].getElementsByTagName("DIV")[j].id "'";
    }
    configArr = (configArr == "" ? "" : ",") "[" tmpStr "]";
    }
    //format like: [['dragDiv3','dragDiv5'],['dragDiv4','dragDiv1'],['dragDiv2']]
    Common.setCookie("configArr", "[" configArr "]");
    }
    </script>
    <style type="text/css">
    .spanDiv{
    position:relative;
    width:5px;
    height:5px;
    }

    .dragDiv,.nodragDiv{
    position:relative;
    filter:alpha(opacity=100);
    opacity:1;
    margin-bottom:6px;
    background-color:#FFFFFF;
    }
    </style>
    </head>
    <body >
    <script type="text/javascript">

    </script>
    <table id="dragTable" cellpadding="3" style=" border:solid 0px green;width:98%;">
    <tr>
    <td valign="top" style="width:30%">
    <div class="dragDiv" id="dragDiv1" >
    <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">
    <tr id="titleBar1" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">
    <th align="left" unselectable="on" >Title1</th>
    </tr>
    <tr style="height:130px;padding:3px;" align="left" valign="top" >
    <td unselectable="on">这里的字比较长....作者来了....中国....中中原人民共和国...国外.,看一下有未有溢出></td>
    </tr>
    </table>
    </div>
    <div class="dragDiv" id="dragDiv2">
    <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">
    <tr id="titleBar2" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">
    <th align="left" unselectable="on" >Title2</th>
    </tr>
    <tr style="height:130px;padding:3px;" align="left" valign="top" >
    <td unselectable="on">Content2...</td>
    </tr>
    </table>
    </div>
    </td>
    <td valign="top" style="width:50%">
    <div class="dragDiv" id="dragDiv3">
    <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">
    <tr id="titleBar3" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">
    <th align="left" unselectable="on" >Title3</th>
    </tr>
    <tr style="height:230px;padding:3px;" align="left" valign="top" >
    <td unselectable="on">Content3...</td>
    </tr>
    </table>
    </div>
    </td>
    <td valign="top" style="width:20%">
    <div class="dragDiv" id="dragDiv4">
    <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">
    <tr id="titleBar4" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">
    <th align="left" unselectable="on" >Title4</th>
    </tr>
    <tr style="height:130px;padding:3px;" align="left" valign="top" >
    <td unselectable="on">Content4...</td>
    </tr>
    </table>
    </div>
    <div class="dragDiv" id="dragDiv5">
    <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">
    <tr id="titleBar5" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">
    <th align="left" unselectable="on" >Title5</th>
    </tr>
    <tr style="height:130px;padding:3px;" align="left" valign="top" >
    <td unselectable="on">Content5...</td>
    </tr>
    </table>
    </div>
    </td>
    </tr>
    </table>
    </body>
    </html>

    <br><br><hr> 搜聚于互连网,只为兴趣与读书交换,不作商业用途。</font></p>

     

    可望本文所述对大家的javascript程序设计拥有帮助。

    那篇小说首要介绍了JS仿i谷歌(Google)自定义首页模块拖拽特效的秘籍,实例剖析了页面包车型大巴布局及拖拽的实...

    【轻巧的留言本】用HTML新增加的数据库实现,留言本新添

     使用数据库完结的WEB留言本

       

            var datatable = null;

            var db = openDatabase('Mydata','','My Database',102400);

            function  init() {

                datatable = document.getElementById("datatable");

                showAllData();

            }

            function removeAllData() {

                for(var i = datatable.childNodes.length-1;i>=0;i--){

                    datatable.removeChild(datatable.childNodes[i]);

                }

                var tr = document.createElement('tr');

                var th1 = document.createElement('th');

                var th2 = document.createElement('th');

                var th3 = document.createElement('th');

                th1.innerHTML = "姓名";

                th2.innerHTML = "留言";

                th3.innerHTML = "时间";

                tr.appendChild(th1);

                tr.appendChild(th2);

                tr.appendChild(th3);

                datatable.appendChild(tr);

            }

            function showData(row) {

                var tr = document.createElement('tr');

                var td1 = document.createElement('td');

                td1.innerHTML = row.name;

                var td2 = document.createElement('td');

                td2.innerHTML= row.message;

                var td3 = document.createElement('td');

                var t = new Date();

                t.setTime(row.time);

                td3.innerHTML = t.toLocaleDateString() "" t.toLocaleTimeString();

                tr.appendChild(td1);

                tr.appendChild(td2);

                tr.appendChild(td3);

                datatable.appendChild(tr);

            }

            function showAllData() {

                db.transaction(function (tx) {

                    tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT,message TEXT,time INTEGER)',[]);

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

                        removeAllData();

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

                            showData(rs.rows.item(i));

                        }

                    });

                });

            }

            

            function addData(name,message,time) {

                db.transaction(function (tx) {

                    tx.executeSql('INSERT INTO MsgData VALUES(?,?,?)',[name,message,time],function (tx,rs) {

                        alert("成功保存数据!");

                    },function (tx,rs) {

                        alert(error.source "::" error.message);

                    });

    JS仿iGoogle自定义首页模块拖拽特效的方法,操作系统。            });

            }

            function saveData() {

                var name = document.getElementById('name').value;

                var memo = document.getElementById('memo').value;

                var time = new Date().getTime();

                //alert(time);

                addData(name,memo,time);

                showAllData();

            }

       

     

     

       

    行使数据库达成的Web留言本

       

     

           

     

               

    姓名:

               

     

                   

                       

                   

               

           

           

     

               

    留言:

               

     

                   

                       

                   

               

           

           

     

               

     

               

     

                   

               新葡亰496net 14

           

       

       

     

       

     

    使用数据库完毕的WEB留言本 var datatable = null; var db = openDatabase('Mydata','','My Database'...

    连锁技艺
    眼前创设 Web 操作系统的前端本事首要有 Flex、Silverlight、ActiveX 插件等等,它们各有部分优弱点。
    Flex
    Flex 是一个能够的富客户端应用框架,专注于页面展现,Adobe 专门的工作维护,统一稳固,何况其脚本语言 ActionScript3 是面向对象的,特别适合程序猿使用。短处则是功耗高,占用带宽多,对移动使用的支撑性差。
    Silverlight
    Silverlight 是由微软生产的用来跟 Flash 抗衡的 途胜IA(富网络应用)化解方案,优点是具有硬件级的增长速度功效,但它近日仍不成熟,对非 Windows 系统的帮忙性并缺乏好,且学习难度十分大。
    ActiveX 插件
    ActiveX 插件同样是微软生产的 PRADOIA 化解方案,它是一个开放的缓和方案,可以相称各样语言,可是它的顽固的病痛也是明显的,用户必要调治浏览器的乌海品级并下载插件手艺运转瑞鹰IA 应用,十分大地降落了安全性。
    HTML5
    为推进 web 标准化运动的进化,W3C 推出了下一代 HTML 的正规化 – HTML5,为多数的铺面所支撑,因而具备杰出的前景。它有以下特征:首先,为增加用户体验,强化了 web 网页的彰显品质;其次,为适应 RubiconIA 应用的开垦进取,追加了本土数据库等 web 应用的法力;再一次,由于高度规范化以及众多浏览器商家的大力协助,它的包容性和安全性相当高;最终它是一种精简的言语,轻便为遍布开采者精晓。更为可贵的是,由于节省和耗电低,在运动道具上 HTML5 将装有越来越大的优势。由此更契合如 Web 操作系统一类的 福睿斯IA 应用的前端开采。
    系统简要介绍
    本系统根据 HTML5 开辟,利用 HTML5 引进的种种新本事如拖拽 API、摄像标签、本地数据库、draw API、十六线程开拓、离线编制程序等提供了一个为主的 Web 操作系统情状,包涵了对桌面包车型地铁支持、应用程序的援助,提供了一个粗略的录像播放器和记事本以及二个石英钟,并对系统日志举办了记录,其余还提供了对离线状态的援助。
    桌面实现
    系统对桌面包车型大巴援助注重不外乎应用程序图标的开拓与拖拽,以及桌面包车型客车上下文菜单等。
    桌面拖拽
    桌面包车型大巴布局由自然数额的 div 组成,它们遵照顺序依次排列在矩形的桌面上,为应用程序Logo的张开与拖拽提供了着力的支撑。
    清单 1. 创建 div
     
    var iconHolder = document.createElement("div");
     iconHolder.id = 'iconHolder' i;
     iconHolder.className = "iconHolder";
     mainDiv.appendChild(iconHolder);
    HTML5 提供了对 drag 事件的支撑,大大简化了贯彻拖拽的难度。通过对 dragstart 事件的监听,将被拖拽的应用程序Logo所在的 div 记录下来,作为拖拽的源。
    清单 2. 拖拽帮助
     
    iconHolder.addEventListener("dragstart", function(ev) {
     var dt = ev.dataTransfer;
     dt.setData("text/plain", ev.currentTarget.id);// 记录被拖拽Logo的 id
     }, false);
     
     iconHolder.addEventListener("drop", function(ev) {
     var dt = ev.dataTransfer;
     var srcIconHolderId = dt.getData("text/plain");
     var srcIconHolder = document.getElementById(srcIconHolderId);
     
     // 若是拖拽至回收站,则删掉被拖拽Logo,不然交流两Logo地方
     if(ev.currentTarget.firstChild && ev.currentTarget.firstChild.id == "recycleBin" &&
     srcIconHolder.firstChild.id != "recycleBin"){
                    srcIconHolder.innerHTML = "";
     }else if(ev.currentTarget.firstChild){
            var temp =  ev.currentTarget.firstChild;
            ev.currentTarget.appendChild(srcIconHolder.firstChild);
            srcIconHolder.appendChild(temp);
     }else{
           ev.currentTarget.appendChild(srcIconHolder.firstChild);
     }
     }, false);
    通过对 drop 事件的监听,能够获得拖拽的源,以及拖拽的对象 div。若指标 div 为空,则将源 div 中的应用程序Logo转移至目标 div 中。若目的 div 中已涵盖应用程序Logo,则将七个Logo的职位调换。若回收站Logo处于指标 div 中,回收站将发挥功能并将源 div 中的应用程序Logo删除。图 1 出示了桌面拖拽的功力。
    图 1. 桌面拖拽效果新葡亰496net 15
    先后张开
    程序能够以三种格局展开,左键点击或透过上下文菜单展开。
    透过监听 div 的 onclick 事件,获取要开荒的应用程序 id,并运用 openApp 方法张开相应的应用程序可达成对左键点击的支撑。
    清单 3. 左键点击
     
    iconHolder.onclick =  function(ev){
     if(ev.currentTarget.firstChild){
            openApp(ev.currentTarget.firstChild.id);
            ev.stopPropagation();
     }
     };
    透过监听 div 的 oncontextmenu 事件,获取要张开的应用程序 id,并采用openAppContextMenu 方法展现相应应用程序的上下文菜单,可实现对右键上下文菜单的支撑。
    清单 4. 上下文菜单
     
    iconHolder.oncontextmenu =  function(ev){
     if(ev.currentTarget.firstChild){
            openAppContextMenu(ev.currentTarget.firstChild.id, ev);
            ev.stopPropagation();
     }
     return false;
     };
    利用相应应用程序的 id,能够博得相应应用程序的本子,并实行,同期在系统日志中记录下相应的操作。
    清单 5. 主次打开
     
    function openApp(appId){
        var time = new Date().getTime();
        var action = "open app";
        var details = "open: " appId;
        addHistory(time, action, details);// 记录系统日志
        var appScript = getAppScript(appId);// 获取应用程序脚本
        eval(appScript);// 推行应用程序
     }
    清单 6. 开垦程序上下文菜单
     
    function openAppContextMenu(appId, ev){
     var appContextMenu = document.getElementById("appContextMenu");
     appContextMenu.style.display="block";// 令上下文菜单可知
     appContextMenu.style.pixelTop=ev.clientY;// 设置上下文菜单地方
     appContextMenu.style.pixelLeft=ev.clientX;
     appContextMenu.style.background = "#eee";
     appContextMenu.style.color = "black";
     appContextMenu.style.fontSize = "30";
     appContextMenu.style.width = "200px";
     appContextMenu.style.height = "220px";
     appContextMenu.style.opacity = 0.5;// 令上下文菜单光滑度为 一半
     appContextMenu.innerHTML = "";
     
     // 获取应用程序相应上下文菜单的源委
     var apps = getApps();
     for(var i=0; i<apps.length; i ){
                    if(apps[i].appId == appId){
                            for(var j=0; j<apps[i].contextMenu.length; j ){
                            appContextMenu.innerHTML = "<div class='appContextMenuItem'
                            onclick="appContextMenu.style.display='none';"

    复制代码 代码如下:

    相关作品

    有关搜索:

    明天看甚

    招来技能库

    回去首页

    • iphone自定义怎么修改网络标记字符
    • BlackBerryXshot通话背景设置格局
    • C#Winform使用伸张方法自定义富文本框(RichTex
    • 一个静态UITabelView的消除方案----CTStaticTableV
    • 飞速通晓Android三个常用自定义控件Toast Aler
    • Android耳麦线控详解,蓝牙5.0耳麦开关监听(仿

    连带频道: HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前端代码  正则表明式  Flex教程  WEB前端教程  

    •                         apps[i].contextMenu[j].action ""
                              onmouseover='this.style.background="darkblue"'
                              onmouseout='this.style.background="#eee"'>"
                              apps[i].contextMenu[j].name "</div>";
                              }
                              break;
                       }  
       }
       }
      应用程序的上下文菜单由名称为 appContextMenu 的 div 达成,将 oncontextmenu 事件中的 clientX 及 clientY 作为上下文菜单出现的职位,并将其反射率设置为 0.5。利用相应应用程序的 id 获取上下文菜单对应的剧情,并将其填写至上下文菜单。
      图 2 突显了应用程序上下文菜单张开时的遵循。
      图 2. 应用程序上下文菜单新葡亰496net 16
      上下文菜单
      桌面上下文菜单的落到实处方式与应用程序上下文菜单的达成格局基本相仿,图 3 和图 4 分别是桌面以及职务栏的上下文菜单。
      图 3. 桌面上下文菜单新葡亰496net 17

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
    <html xmlns="" >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>JS仿i谷歌(Google)自定义首页模块拖拽效果</title>
        <script type="text/javascript">
            var Common = {
                getEvent: function() {//ie/ff
                    if (document.all) {
                        return window.event;
                    }
                    func = getEvent.caller;
                    while (func != null) {
                        var arg0 = func.arguments[0];
                        if (arg0) {
                            if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {
                                return arg0;
                            }
                        }
                        func = func.caller;
                    }
                    return null;
                },
                getMousePos: function(ev) {
                    if (!ev) {
                        ev = this.getEvent();
                    }
                    if (ev.pageX || ev.pageY) {
                        return {
                            x: ev.pageX,
                            y: ev.pageY
                        };
                    }

    帮客商议

     图 4. 职分栏上下文菜单新葡亰496net 18
    录像播放器
    系统提供了叁个回顾的摄像播放器,它援助从系统外界拖拽录像文件进行播报。
    符合网络媒体的发展,HTML5 提供了录制标签 video 以便于提升对录制的补助,大大简化了 web 播放器开垦的难度,开辟人士仅凭几行代码,就足以支付出二个基本功效完善的录制播放器。
    清单 7. 录像标签的创设
     
    var video = document.createElement('video');
     video.id ='video';
     video.src ='';
     video.width  = 370;
     video.height = 260;
     video.controls = 'controls';
     video.className = 'video';
     appHolder.appendChild(video);
     addDragSupport(appHolder);
    清单 7 中结构了四个 video 标签并将其增多到贰个名叫 appHolder 的 div 中。代码的末尾一行为其加多了拖拽的支撑。
    HTML5 不但援助浏览器内的拖拽,也支撑浏览器与地点系统里面包车型大巴拖拽。清单 8 展现了为多少个 div 增添拖拽帮助的长河。
    清单 8. 增多拖拽辅助
     
    function addDragSupport(dropbox){
     document.addEventListener("dragenter", function(e){
     }, false);
     document.addEventListener("dragleave", function(e){
     }, false);
     dropbox.addEventListener("dragenter", function(e){
     }, false);
     dropbox.addEventListener("dragleave", function(e){
     }, false);
     dropbox.addEventListener("dragenter", function(e){
     e.stopPropagation();
     e.preventDefault();
     }, false);
     dropbox.addEventListener("dragover", function(e){
     e.stopPropagation();
     e.preventDefault();
     }, false);
     dropbox.addEventListener("drop", function(e){
     handleFiles(e.dataTransfer.files, e.currentTarget, e);
     e.stopPropagation();
     e.preventDefault();             
     }, false); 
     }
    里面,handleFiles 函数表达了哪些对拖拽的文书进行处理。
    清单 9. 拖拽管理
     
    function handleFiles(files, dropbox, e) {
        if(files.length == 0){// 若文件官样文章,则用相应文本替代
             var dt = e.dataTransfer;
             var text = dt.getData("text/plain");
             var p = document.createElement("p");
             p.innerHTML = text;
             dropbox.appendChild(p);
             return;
     }
     
     for (var i = 0; i < files.length; i ) {
             var file = files[i];
             var fileProcessor = dropbox.firstChild;
             fileProcessor.classList.add("obj");
             fileProcessor.file = file; // 添Gavin书
     
             var reader = new FileReader();
             reader.onload = (// 读取文件内容
             function(aFileProcessor) {
                     return function(e) {
                     aFileProcessor.src = e.target.result;
     };
     }
     )(fileProcessor);
      reader.readAsDataURL(file);
     }
     }
    handleFiles 函数首先判断文件是或不是存在,若不设有,则以相应文字取代,若存在,则对
    持有文件相继实行管理。向 fileprocessor( 这里是录制标签 ) 添Gavin书,然后使用 FileReader 读取文件内容至 fileprocessor 举办拍卖。
    图 5 展现了拖拽八个录制文件 movie.ogg 到播放器的效应。
    图 5. 录制播放新葡亰496net 19

                    if (document.documentElement && document.documentElement.scrollTop) {
                        return {
                            x: ev.clientX document.documentElement.scrollLeft - document.documentElement.clientLeft,
                            y: ev.clientY document.documentElement.scrollTop - document.documentElement.clientTop
                        };
                    }
                    else if (document.body) {
                        return {
                            x: ev.clientX document.body.scrollLeft - document.body.clientLeft,
                            y: ev.clientY document.body.scrollTop - document.body.clientTop
                        };
                    }
                },
                getElementPos: function(el) {
                    el = this.getItself(el);
                    var _x = 0, _y = 0;
                    do {
                        _x = el.offsetLeft;
                        _y = el.offsetTop;
                    } while (el = el.offsetParent);
                    return { x: _x, y: _y };
                },
                getItself: function(id) {
                    return "string" == typeof id ? document.getElementById(id) : id;
                },
                getViewportSize: { w: (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : (document.body?document.body.offsetWidth:0), h: (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : (document.body ? document.body.offsetHeight : 0) },
                isIE: document.all ? true : false,
                setOuterHtml: function(obj, html) {
                    var Objrange = document.createRange();
                    obj.innerHTML = html;
                    Objrange.selectNodeContents(obj);
                    var frag = Objrange.extractContents();
                    obj.parentNode.insertBefore(frag, obj);
                    obj.parentNode.removeChild(obj);
                },
                firstChild: function(parentObj, tagName) {
                    if (Common.isIE) {
                        return parentObj.firstChild;
                    }
                    else {
                        var arr = parentObj.getElementsByTagName(tagName);
                        return arr[0];
                    }
                },
                lastChild: function(parentObj, tagName) {
                    if (Common.isIE) {
                        return parentObj.lastChild;
                    }
                    else {
                        var arr = parentObj.getElementsByTagName(tagName);
                        return arr[arr.length - 1];
                    }
                },
                setCookie: function(name, value) {
                    document.cookie = name "=" value;
                },
                getCookie: function(name) {
                    var strCookie = document.cookie;
                    var arrCookie = strCookie.split("; ");
                    for (var i = 0; i < arrCookie.length; i ) {
                        var arr = arrCookie[i].split("=");
                        if (!arr[1]) {
                            return "";
                        }
                        if (arr[0] == name) {
                            return arr[1];
                        }
                    }
                    return "";
                },
                delCookie: function(name) {
                    var exp = new Date();
                    exp.setTime(exp.getTime() - 1);
                    var cval = this.getCookie(name);
                    if (cval != null) document.cookie = name "=" cval ";expires=" exp.toGMTString();
                }
            }
            var Class = {
                create: function() {
                    return function() { this.init.apply(this, arguments); }
                }
            }
            var Drag = Class.create();
            Drag.prototype = {
                init: function(titleBar, dragDiv, Options) {
                    //设置点击是或不是透明,私下认可透明十分之四
                    titleBar = Common.getItself(titleBar);
                    dragDiv = Common.getItself(dragDiv);
                    this.dragArea = { maxLeft: -9999, maxRight: 9999, maxTop: -9999, maxBottom: 9999 };
                    if (Options) {
                        this.opacity = Options.opacity ? (isNaN(parseInt(Options.opacity)) ? 100 : parseInt(Options.opacity)) : 100;
                        if (Options.area) {
                            if (Options.area.left && !isNaN(parseInt(Options.area.left))) { this.dragArea.maxLeft = Options.area.left };
                            if (Options.area.right && !isNaN(parseInt(Options.area.right))) { this.dragArea.maxRight = Options.area.right };
                            if (Options.area.top && !isNaN(parseInt(Options.area.top))) { this.dragArea.maxTop = Options.area.top };
                            if (Options.area.bottom && !isNaN(parseInt(Options.area.bottom))) { this.dragArea.maxBottom = Options.area.bottom };
                        }
                    }
                    else {
                        this.opacity = 60;
                    }
                    this.originDragDiv = null;
                    this.tmpX = 0;
                    this.tmpY = 0;
                    this.moveable = false;
                    this.dragArray = [];

    地方存款和储蓄
    Web 操作系统常常将一大百分之四十额存款和储蓄于劳动器端,这样做的低价同理可得,数据存储空间越来越大,安全性更加好。但是如此做也许有不足之处,由于互联网的安家立业照旧较本地球磁性盘差,所以在剥离互联网的气象下,Web 操作系统十分小概赢得相应的数据财富,因而 Web 操作系统需求自然的拜望本地存款和储蓄空间的技能,当然本地存款和储蓄空间仅是当做劳动器端存款和储蓄的多个填补,它的空间有限,访谈也蒙受一定的范围。
    直接以来,HTML 以 Cookie 作为探望本地空间的艺术,但是,这种方法具备比比较多短处和不足,如存款和储蓄的数据格式过于简单,平常仅为键值对;存款和储蓄的空中尺寸有限。为此,HTML5 提供了本地数据库以进步地点存储空间的拜访本领,它是一个简化版的数据库,能够帮助模拟的 SQL 以及轻便的事务管理等职能。
    系统为帮忙本地存款和储蓄,成立了一个名叫 MyData 的数据库。清单 10 展现了数据库创设的进度。
    清单 10. 开立数据库
     
    var db;
    var openDatabase;
    if(openDatabase != undefined)
        db = openDatabase('MyData', '', 'My Database', 102400);
    里面 MyData 为数据库的称号,省略的参数为数据库的版本,My Database 为显示的名称,最终的数字为数据库预估长度(以字节为单位)。
    系统日志将系统在某有时间的一举一动操作记录下来,本地数据库为其提供仓库储存援救。日志在数据库中积累为表 History,包蕴 3 个字段,分别为时间,操作,及操作的详细新闻。清单 11 展现了系统是哪些记录日志的。
    清单 11. 日记记录
     
    var time = new Date().getTime(); 
     var action = "open app";
     var details = "open: " appId;
     addHistory(time, action, details);// 向系统日志中添加一条记下
     
     function addHistory(time, action, details){
     if(openDatabase != undefined)
     db.transaction(
     function(tx) {
     tx.executeSql('CREATE TABLE IF NOT EXISTS History(time INTEGER,
     action TEXT, details TEXT)',[]);// 创制日志记录表 
     tx.executeSql('INSERT INTO History VALUES(?, ?, ?)', [time,
     action, details], // 插入一条日志
     function(tx, rs) { 
     //alert("store: " time "-" action "-" details);  
                  }, 
     function(tx, error) {
        //alert(error.source "::" error.message); 
     }); 
     }); 
     }
    清单的第一有个别显得了怎么样调用日志记录,第三盘部显得了日志记录的详细经过。在三个transaction 中,首先判定表 History 是还是不是留存,若不设有,则开创它。第二片段实行一条 SQL 语句,向数据库中插入当前的日志。
    透过搜寻表 History,大家得以查看系统日志,清单 12 显示了怎么着从数据库中查询系统日志,并将其出示出来。
    清单 12. 日记展现
     
    var historyTable = document.getElementById("historyTable");
     
     // 定义表头
     historyTable.innerHTML = "";
     var th = document.createElement('thead');
     th.style = "color:#CC3300";
     var th1 = document.createElement('td');
     th1.align = "center";
     th1.width=300;
     th1.innerHTML = "Time";
     var th2 = document.createElement('td');
     th2.align = "center";
     th2.width=100;
     th2.innerHTML = "Action";
     var th3 = document.createElement('td');
     th3.align = "center";
     th3.width=150;
     th3.innerHTML = "Details";
     th.appendChild(th1); 
     th.appendChild(th2); 
     th.appendChild(th3);
     historyTable.appendChild(th);
     
     if(openDatabase != undefined)
     db.transaction(function(tx) {   
     tx.executeSql('SELECT * FROM History', [], function(tx, rs)
     { 
          // 将日志逐一显示到表的各行中
     for(var i = 0; i < rs.rows.length && i<15; i ) {                   
     var tr = document.createElement('tr');
     var td1 = document.createElement('td');
     td1.style.paddingLeft = "3px";
     td1.style.paddingRight = "3px";
     
     var t = new Date(); 
     t.setTime(rs.rows.item(i).time); 
     td1.innerHTML = t.toLocaleDateString()
    " " t.toLocaleTimeString();
     
     var td2 = document.createElement('td'); 
     td2.style.paddingLeft = "3px";
     td2.style.paddingRight = "3px";
     td2.innerHTML = rs.rows.item(i).action;
     
     var td3 = document.createElement('td');
     td3.style.paddingLeft = "3px";
     td3.style.paddingRight = "3px";
     td3.innerHTML = rs.rows.item(i).details; 
     
     tr.appendChild(td1); 
     tr.appendChild(td2); 
     tr.appendChild(td3);
     
     historyTable.appendChild(tr);                  
     } 
     }); 
     });
    清单 12 中,首先得到用于呈现的日志的 HTML 表格 historyTable,并安装其样式及表头。
    下一场在二个 transaction( 事务 ) 中,实施一条 SQL 语句,查询系统日志,并将每条日志增添为 historyTable 中的一行以便展现。图 6 呈现了系统日志的机能。
    图 6. 系统日志新葡亰496net 20

                    var dragObj = this;
                    var dragTbl = document.getElementById("dragTable");

    记事本
    系统提供了八个简短的记事本,实现了文本文书档案的基本操作。文本文书档案包罗标题和剧情三个显式属性,以及贰个名叫id 的隐式属性。与系统日志类似,当地数据库为文本数据的存放提供了底层的支撑。图 7 呈现了记事本程序的界面。
    图 7. 记事本新葡亰496net 21

                    titleBar.onmousedown = function(e) {
                        var ev = e || window.event || Common.getEvent();
                        //只同意通过鼠标左键进行拖拽,IE鼠标左键为1 FireFox为0
                        if (Common.isIE && ev.button == 1 || !Common.isIE && ev.button == 0) {
                        }
                        else {
                            return false;
                        }

    当编辑完文书档案的标题与内容后,点击左上角的保存按键,将推行 createFile 函数。清单 13 显示了 createFile 函数的详尽经过。
    清单 13. 开立文件
     
    function createFile(fileId, fileTitle, fileContent){
         var idx = 1;
         var update = false;//false 表示新建,true 表示修改
     
         if(openDatabase != undefined)
             db.transaction(function(tx) {
             tx.executeSql('CREATE TABLE IF NOT EXISTS TextFiles(idx INTEGER,
             title TEXT, content TEXT)',[]);// 创设文本文书档案表
             tx.executeSql('SELECT * FROM TextFiles', [], function(tx, rs){
                 for(var i = 0; i < rs.rows.length; i ) {
                    // 若文书档案存在,则修改它
                     if(rs.rows.item(i).idx == fileId){
                         db.transaction(function(tx) {   
                         tx.executeSql('UPDATE TextFiles
                         SET title=?, content=?
                         WHERE idx=' fileId,
                         [fileTitle, fileContent],
                         function(tx, rs) {  
                                 alert("update successfully");
                         }); 
                     });
                     return;
                 }        
     }   
     // 若文书档案不设有,则新建四个文书档案        
     if(rs.rows.length>0)
     idx = rs.rows.item(rs.rows.length-1).idx 1;
     db.transaction(function(tx) {                        
     tx.executeSql('INSERT INTO TextFiles VALUES(?, ?, ?)', [idx, fileTitle, fileContent],
                   function(tx, rs){ 
                   alert("save successfully: " idx "-" fileTitle "-" fileContent); 
                   createFileIcon(idx); 
     }, 
     function(tx, error) {
                    alert(error.source "::" error.message); 
                     }); 
                 });
             });
         });
     }
    清单 13 首先在贰个 transaction 中,首先判定用于存款和储蓄文本文书档案的表 TextFiles 是还是不是存在,若空中楼阁,则创制它。然后经过查询表 TextFiles 判别文本文书档案是不是存在,若存在,则当前操作为更新操作,程序将施行一条 SQL 语句,对当前文本文书档案举行改进。若官样文章,则取当前最大文书档案 id 并加 1 看成新文档的 id,并实践一条 SQL 语句,将文书档案信息,包蕴文档id,以及标题和剧情插入到数据库中,并于插入操作截至后的回调方法中,利用 createFileIcon 方法在桌面上为新文书档案成立多少个文书档案图标。清单 14 展现了 createFileIcon 方法的切切实实进度。
    清单 14. 创造文书档案Logo
     
    function createFileIcon(fileId){
         var iconHolder;
         for(var i=1;i<=120;i ){// 查询第三个为空的职分
             iconHolder = document.getElementById('iconHolder' if(!iconHolder.firstChild ){
                 var text = document.createElement('img');
                 text.src = "images/text.gif";
                 text.id = fileId;
                 iconHolder.appendChild(text);
                 text.onclick =  function(ev){ 
                     if(ev.currentTarget){
                     openApp('notebook');// 展开记事本应用程序
                     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,然后创造贰个文书档案Logo,并将其填充至 div。文书档案Logo有一个 id 属性对应文档id。最终为文书档案Logo加多点击事件管理函数,当点击文书档案Logo时,会率先张开记事本,然后依照文书档案Logo的 id 查询数据库,提取文书档案的标题和剧情实行浮现。
    图 8 展现了创设后的文本文书档案,点击后的效果如图 7 所示。新葡亰496net 22
    图 8. 文本文档
    时钟
    系统提供了三个大致的原子钟用以展现当前光阴,它由三个表盘以及分针和时针组成,能够随着岁月的浮动动态地转移。以后的 web 应用使用 JavaScript 或 Flash 完毕此类作用,其复杂由此可见。借助 HTML5 的 draw API,可以轻巧地画出所需的图片,十分大的方便了此类应用的创设,其它,HTML5 还提供了往年 JavaScript 不恐怕支撑的十二线程编制程序,大大提升了 web 应用的交互性和丰硕性。
    石英表有二个骨干的表面,它仅是一副轻巧的图形,如图 9 所示。
    图 9. 表盘新葡亰496net 23

                        //管理特别情形:在最上/上边MOVE时不相见现成DIV的事态下,又回来起先拖拽的列最上/下方
                        var tmpColId;
                        for (c = 0; c < dragTbl.rows[0].cells.length; c ) {
                            for (k = 0; k < dragTbl.rows[0].cells[c].getElementsByTagName("DIV").length; k ) {
                                if (dragDiv.id == dragTbl.rows[0].cells[c].getElementsByTagName("DIV")[k].id) {
                                    tmpColId = c;
                                    break;
                                }
                            }
                        }
                        var tmpPosFirstChild = Common.getElementPos(Common.firstChild(dragTbl.rows[0].cells[tmpColId], "DIV"));
                        var tmpPosLastChild = Common.getElementPos(Common.lastChild(dragTbl.rows[0].cells[tmpColId], "DIV"));
                        var tmpObj = { colId: tmpColId, firstChildUp: tmpPosFirstChild.y, lastChildDown: tmpPosLastChild.y Common.lastChild(dragTbl.rows[0].cells[tmpColId], "DIV").offsetHeight };

    在表面之上,建有叁个 canvas( 画布 ),如清单 15 所示。
    清单 15. 画布
    1
    <canvas id="canvas" width="128px" height="128px"></canvas>
    接下去,清单 17 将要画布上模拟出石英钟以及分针,在那前面,额外部必要要叁个后台线程用以计算时间,它被定义在名字为time.js 的独自脚本文件中,如清单 16 所示。
    清单 16. 后台线程
     
    onmessage = function(event)
     {
     //var i = 1;
        setInterval(function() {
        //i ;
        postMessage("");
        }, 60000);
     };
    每过 60 分钟,后台线程将会上前台线程发送一个空新闻,以告知前台线程有 60 分钟已经病逝了。
    清单 17. 前台线程的初叶化
     
    var canvas = document.getElementById("canvas");
     if (canvas == null) 
     return false; 
     var context = canvas.getContext('2d');// 那是多个二维的图像
     context.lineWidth = 2;
     context.translate(64, 64);// 定义原点
     
     // 起头化分针
     context.beginPath();
     context.moveTo(0,0);// 从原点开头
     var date = new Date();
     var mhx = 37*Math.cos((date.getMinutes()-15)*Math.PI/30);
     var mhy = 37*Math.sin((date.getMinutes()-15)*Math.PI/30);
     context.lineTo(mhx, mhy);// 至分针末端所在地点
     context.closePath();
     context.stroke();
     
     // 初步化时针
     context.beginPath();
     context.moveTo(0,0);// 从原点起首
     var date = new Date();
     var hour = date.getHours();
     if(hour>=12)
     hour = hour - 12;
     var minute = date.getMinutes();
     var hhx = 27*Math.cos((hour-3)*Math.PI/6 minute*Math.PI/360);
     var hhy = 27*Math.sin((hour-3)*Math.PI/6 minute*Math.PI/360);
     context.lineTo(hhx, hhy);// 至时针末端所在地点
     context.closePath();
     context.stroke();
    前台线程首先会得到canvas,并安装表盘大旨为坐标原点。然后,获取当前光阴,计算分针当前所应指向的坐标,然后从原点出发,画出分针。对于时针,若系统为 24 小时制,供给首先转化为 12 小时制,此后的拍卖类似于分针。
    接下去,必要将前台与后台线程联系起来,利用 HTML5 提供的十六线程编制程序方法,注解 Worker 对象作为后台线程的代办,并采用onmessage 事件,对后台线程发出的音讯实行拍卖。
    清单 18. 前台线程的 onmessage 事件
    1
    var worker = new Worker("js/timer.js");
     
     worker.onmessage = function(event){
     
        context.clearRect(-64, -64, 128, 128);// 清空分针和时针
     
        // 重画分针
        context.beginPath();
        context.moveTo(0,0);// 从原点开头 
        var date = new Date();
        var mhx = 37*Math.cos((date.getMinutes()-15)*Math.PI/30);
        var mhy = 37*Math.sin((date.getMinutes()-15)*Math.PI/30);
        context.lineTo(mhx, mhy);// 至分针末端所在地点
        context.closePath();
        context.stroke();
     
            // 重画时针
        context.beginPath();
        context.moveTo(0,0);// 从原点开头 
        var date = new Date();
        var hour = date.getHours();
        if(hour>=12)
        hour = hour - 12;
        var minute = date.getMinutes();
        var hhx = 27*Math.cos((hour-3)*Math.PI/6 minute*Math.PI/360);
        var hhy = 27*Math.sin((hour-3)*Math.PI/6 minute*Math.PI/360);
        context.lineTo(hhx, hhy);// 至时针末端所在地点
        context.closePath();
        context.stroke();
        };
        worker.postMessage("");
    每过 60 分钟,后台线程将会上前台线程发送贰个空信息,前台线程接收到音信后,首先,清空 canvas,然后再次得到当前时刻,总结分针以及时针对应的坐标,同等对待复画出时针和分针,进而完毕对分针以及时针的翻新,最终,每过 1 分钟,表盘更新三回,进而模拟出动态时针的法力,如图 10 所示。新葡亰496net 24
    图 10. 时钟
    离线帮助
    就算 Web 操作系统的帮助和益处是足以利用网络任何时间任何地方举行探访。然则在不能访谈网络的情形下,Web 操作系统便力不能支发挥效用。因而 Web 操作系统有不能缺少在离线状态下,仍是可以对有的使用及其作用进行支撑。事实上,各个浏览器已提供了层见迭出的缓存机制以提供对离线应用的协理,然后那一个缓存机制往往是有的时候性的,不可控的。HTML5 为开垦职员提供了消除此主题素材的另一种路子,它提供了一种长久性的,自定义的缓存方法,使得 Web 操作系统能够在离线的场所下,依旧协理部分行使的职能。
    HTML5 离线支持的骨干是一个缓存清单,当中列出了急需缓存的公文,本系统中的缓存文件 index.manifest,如清单 19 所示。
    清单 19. 缓存清单
     
    CACHE MANIFEST
    #version 1.10
    CACHE:
    index.html
    js/app.js
    js/clock.js
    js/data.js
    js/database.js
    js/desktop.js
    js/history.js
    js/taskbar.js
    js/timer.js
    js/file.js
    js/utils.js
    css/index.css
    images/appHolder1.png
    images/background.jpg
    images/clock.png
    images/close.gif
    images/computer.gif
    images/history.png
    images/network.gif
    images/recycleBin.gif
    images/startIcon.png
    images/taskBar.png
    images/vidioplayer.gif
    images/notebook.gif
    images/text.gif
    images/save.gif
    movs/movie.ogg
    sounds/WindowsLogonSound.wav
    内部,CACHE MANIFEST 标示本文件为缓存文件,#version 1.10 标示了本文件的本子。
    CACHE 之后所列项支出的则是开荒职员自定义的原委,个中带有了富有在离线状态下用户访问应用程序所不可缺少的公文。
    缓存清单定义结束后,在 index.html 中插入这么些清单文件名,那样,当浏览器加载这些页面包车型客车时候,会活动缓存清单文件中所罗列的文书。
    清单 20. 施用缓存清单
    1
    <html manifest="index.manifest">
    值得提的是,若要支持离线缓存,除客户端浏览器的援救以外,服务端的支撑也是不可缺少的,就本系统所运用的 tomcat 来讲,供给在其安顿文件 web.xml 中增多清单 21 所示的条目。
    清单 21. 劳动器端缓存配置
     
    <mime-mapping>
     <extension>manifest</extension>
     <mime-type>text/cache-manifest</mime-type>
     </mime-mapping>
    最终,禁止使用本地机械的网络,重新展开浏览器并拜访 Web 操作系统所在的网站,系统中的超过五成应用程序依旧能够符合规律干活,如图 11 所示。新葡亰496net 25   

                        //保存当前可拖拽各容器的所在地点
              dragObj.dragArray = dragObj.RegDragsPos();

    Web 操作系统有着古板操作系统不能够比拟的优势,如能够时时刻刻使用另外极端实行拜见,数据保存在劳动器端,空间越来越大,数据安...

                        //插入虚线框
                        var dashedElement = document.createElement("div");
                        dashedElement.style.cssText = dragDiv.style.cssText;
                        dashedElement.style.border = " dashed 2px #aaa ";
                        dashedElement.style.marginBottom = "6px";
    新葡亰496net,                    dashedElement.style.width = dragDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px"; //减去boderWidth使虚线框大小保持与dragDiv一致
             dashedElement.style.height = dragDiv.offsetHeight - 2 * parseInt(dashedElement.style.borderWidth) "px"; //加上px 保证FF正确                   
              dashedElement.style.position = "relative";
                        if (dragDiv.nextSibling) {
                            dragDiv.parentNode.insertBefore(dashedElement, dragDiv.nextSibling);
                        }
                        else {
                            dragDiv.parentNode.appendChild(dashedElement);
                        }
                        //拖动时形成absolute
                        dragDiv.style.width = dragDiv.offsetWidth "px";
                        dragDiv.style.position = "absolute";

                        dragObj.moveable = true;
                        dragDiv.style.zIndex = dragObj.GetZindex() 1;

                        var downPos = Common.getMousePos(ev);
                        dragObj.tmpX = downPos.x - dragDiv.offsetLeft;
                        dragObj.tmpY = downPos.y - dragDiv.offsetTop;

                        if (Common.isIE) {
                            dragDiv.setCapture();
                        } else {
                            window.captureEvents(Event.mousemove);
                        }

                        dragObj.SetOpacity(dragDiv, dragObj.opacity);

                        //FireFox 去除容器内拖拽图片难题
                        if (ev.preventDefault) {
                            ev.preventDefault();
                            ev.stopPropagation();
                        }

                        document.onmousemove = function(e) {
                            if (dragObj.moveable) {
                                var ev = e || window.event || Common.getEvent();
                                //IE 去除容器内拖拽图片难点
                                if (document.all) //IE
                                {
                                    ev.returnValue = false;
                                }

                                var movePos = Common.getMousePos(ev);
                                dragDiv.style.left = Math.max(Math.min(movePos.x - dragObj.tmpX, dragObj.dragArea.maxRight), dragObj.dragArea.maxLeft) "px";
                                dragDiv.style.top = Math.max(Math.min(movePos.y - dragObj.tmpY, dragObj.dragArea.maxBottom), dragObj.dragArea.maxTop) "px";

                                var targetDiv = null;
                                for (var k = 0; k < dragObj.dragArray.length; k ) {
                                    if (dragDiv == dragObj.dragArray[i]) {
                                        continue;
                                    }

                                    if (movePos.x > dragObj.dragArray[k].PosLeft && movePos.x < dragObj.dragArray[k].PosLeft dragObj.dragArray[k].PosWidth
                                        && movePos.y > dragObj.dragArray[k].PosTop && movePos.y < dragObj.dragArray[k].PosTop dragObj.dragArray[k].PosHeight
                                    ) {
                                        targetDiv = document.getElementById(dragObj.dragArray[k].DragId);
                                        if (movePos.y < dragObj.dragArray[k].PosTop dragObj.dragArray[k].PosHeight / 2) {
                                            //往上移
                                            dashedElement.style.width = targetDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px";
                                            targetDiv.parentNode.insertBefore(dashedElement, targetDiv);
                                        }
                                        else {
                                            //往下移
                                            dashedElement.style.width = targetDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px";
                                            if (targetDiv.nextSibling) {
                                                targetDiv.parentNode.insertBefore(dashedElement, targetDiv.nextSibling);
                                            }
                                            else {
                                                targetDiv.parentNode.appendChild(dashedElement);
                                            }
                                        }
                                    }
                                }
                               
                                for (j = 0; j < dragTbl.rows[0].cells.length; j ) {
                                    var startLeft = Common.getElementPos(dragTbl.rows[0].cells[j]).x;
                                    if (movePos.x > startLeft && movePos.x < startLeft dragTbl.rows[0].cells[j].offsetWidth) {
                                        ///列无DIV
                                        if (dragTbl.rows[0].cells[j].getElementsByTagName("div").length == 0) {
                                            dashedElement.style.width = dragTbl.rows[0].cells[j].offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px";
                                            dragTbl.rows[0].cells[j].appendChild(dashedElement);
                                        }
                                        else {
                                            var posFirstChild = Common.getElementPos(Common.firstChild(dragTbl.rows[0].cells[j], "DIV"));
                                            var posLastChild = Common.getElementPos(Common.lastChild(dragTbl.rows[0].cells[j], "DIV"));
                                            //管理非常情况:在最上/下边MOVE时不相见现成DIV的场地下,又回来开头拖拽的列最上/下方
                                            var tmpUp, tmpDown;
                                            if (tmpObj.colId == j) {
                                                tmpUp = tmpObj.firstChildUp;
                                                tmpDown = tmpObj.lastChildDown;
                                            }
                                            else {
                                                tmpUp = posFirstChild.y;
                                                tmpDown = posLastChild.y Common.lastChild(dragTbl.rows[0].cells[j], "DIV").offsetHeight;
                                            }

                                            if (movePos.y < tmpUp) {///从最上边插入虚线框
                                                dashedElement.style.width = Common.firstChild(dragTbl.rows[0].cells[j], "DIV").offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px";
                                                dragTbl.rows[0].cells[j].insertBefore(dashedElement, Common.firstChild(dragTbl.rows[0].cells[j], "DIV"));
                                            }
                                            else if (movePos.y > tmpDown) {///从最上边插入虚线框
                                                dashedElement.style.width = Common.lastChild(dragTbl.rows[0].cells[j], "DIV").offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px";
                                                dragTbl.rows[0].cells[j].appendChild(dashedElement);
                                            }

                                        }
                                    }
                                }
                            }
                        };

                        document.onmouseup = function() {
                            if (dragObj.moveable) {
                                if (Common.isIE) {
                                    dragDiv.releaseCapture();
                                }
                                else {
                                    window.releaseEvents(dragDiv.mousemove);
                                }
                                dragObj.SetOpacity(dragDiv, 100);
                                dragObj.moveable = false;
                                dragObj.tmpX = 0;
                                dragObj.tmpY = 0;

                                //务必写在此IF内
                                dragDiv.style.left = "";
                                dragDiv.style.top = "";

                                dragDiv.style.width = "";
                                dragDiv.style.position = ""; 
                                dashedElement.parentNode.insertBefore(dragDiv, dashedElement);
                                dashedElement.parentNode.removeChild(dashedElement);
                            }

                        };

                    }
                },
                SetOpacity: function(dragDiv, n) {
                    if (Common.isIE) {
                        dragDiv.filters.alpha.opacity = n;
                    }
                    else {
                        dragDiv.style.opacity = n / 100;
                    }

                },
                GetZindex: function() {
                    var maxZindex = 0;
                    var divs = document.getElementsByTagName("div");
                    for (z = 0; z < divs.length; z ) {
                        maxZindex = Math.max(maxZindex, divs[z].style.zIndex);
                    }
                    return maxZindex;
                },
                RegDragsPos: function() {
                    var arrDragDivs = new Array();
                    var dragTbl = document.getElementById("dragTable");
                    var tmpDiv, tmpPos;
                    for (i = 0; i < dragTbl.getElementsByTagName("div").length; i ) {
                        tmpDiv = dragTbl.getElementsByTagName("div")[i];
                        if (tmpDiv.className == "dragDiv") {
                            tmpPos = Common.getElementPos(tmpDiv);
                            arrDragDivs.push({ DragId: tmpDiv.id, PosLeft: tmpPos.x, PosTop: tmpPos.y, PosWidth: tmpDiv.offsetWidth, PosHeight: tmpDiv.offsetHeight });
                        }
                    }
                    return arrDragDivs;
                }
            }

            window.onload = function() {
                var dragTbl = document.getElementById("dragTable");
                if (Common.getCookie("configArr")) {
                    var configArr = eval("(" Common.getCookie("configArr")

    • ")");
                      for (i = 0; i < dragTbl.rows[0].cells.length; i ) {
                          for (j = 0; j < configArr[i].length; j ) {
                              dragTbl.rows[0].cells[i].appendChild(document.getElementById(configArr[i][j]));
                          }
                      }
                  }
                  new Drag("titleBar1", "dragDiv1");
                  new Drag("titleBar2", "dragDiv2");
                  new Drag("titleBar3", "dragDiv3");
                  new Drag("titleBar4", "dragDiv4");
                  new Drag("titleBar5", "dragDiv5");
              }

            window.onunload = function() {
                var dragTbl = document.getElementById("dragTable");
                var configArr = "";
                for (i = 0; i < dragTbl.rows[0].cells.length; i ) {
                    var tmpStr = "";
                    for (j = 0; j < dragTbl.rows[0].cells[i].getElementsByTagName("DIV").length; j ) {
                        tmpStr = (tmpStr == "" ? "" : ",") "'" dragTbl.rows[0].cells[i].getElementsByTagName("DIV")[j].id "'";
                    }
                    configArr = (configArr == "" ? "" : ",") "[" tmpStr "]";
                }
                //format like: [['dragDiv3','dragDiv5'],['dragDiv4','dragDiv1'],['dragDiv2']]
                Common.setCookie("configArr", "[" configArr "]");           
            }
        </script>
        <style type="text/css">
        .spanDiv{
        position:relative;
        width:5px;
        height:5px;
        }

        .dragDiv,.nodragDiv{
        position:relative;
        filter:alpha(opacity=100);
        opacity:1;
        margin-bottom:6px;
        background-color:#FFFFFF;
        }
        </style>
    </head>
    <body >
    <script type="text/javascript">

    </script>  
        <table id="dragTable" cellpadding="3"  style=" border:solid 0px green;width:98%;">
            <tr>
                <td valign="top" style="width:30%">
                    <div class="dragDiv" id="dragDiv1" >
                        <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">
                            <tr id="titleBar1"  style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">
                                <th align="left" unselectable="on" >Title1</th>
                            </tr>
                            <tr style="height:130px;padding:3px;" align="left" valign="top" >
                                <td unselectable="on">这里的字比较长....小编来了....中中原人民共和国....中中原人民共和国...外国.,看一下有未有溢出></td>
                            </tr>
                        </table>
                    </div>              
                    <div class="dragDiv" id="dragDiv2">
                        <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">
                            <tr id="titleBar2" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">
                                <th align="left" unselectable="on" >Title2</th>
                            </tr>
                            <tr style="height:130px;padding:3px;" align="left" valign="top" >
                                <td unselectable="on">Content2...</td>
                            </tr>
                        </table>
                    </div>
                </td>
                <td valign="top" style="width:50%">
                    <div class="dragDiv" id="dragDiv3">
                        <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">
                            <tr id="titleBar3" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">
                                <th align="left" unselectable="on" >Title3</th>
                            </tr>
                            <tr style="height:230px;padding:3px;" align="left" valign="top" >
                                <td unselectable="on">Content3...</td>
                            </tr>
                        </table>
                    </div>               
                </td>
                <td valign="top" style="width:20%">
                    <div class="dragDiv" id="dragDiv4">
                        <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">
                            <tr id="titleBar4" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">
                                <th align="left" unselectable="on" >Title4</th>
                            </tr>
                            <tr style="height:130px;padding:3px;" align="left" valign="top" >
                                <td unselectable="on">Content4...</td>
                            </tr>
                        </table>
                    </div>
                    <div class="dragDiv" id="dragDiv5">
                        <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">
                            <tr id="titleBar5" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">
                                <th align="left" unselectable="on" >Title5</th>
                            </tr>
                            <tr style="height:130px;padding:3px;" align="left" valign="top" >
                                <td unselectable="on">Content5...</td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>   
        </table>
    </body>
    </html>

    <br><br><hr> 采撷于互连网,只为兴趣与学习交换,不作商业用途。</font></p>

    梦想本文所述对大家的javascript程序设计有着支持。

    您或然感兴趣的稿子:

    • javascript落实页面内重点词高亮展现代码
    • js 关键词高亮(依照ID/tag高亮关键字)案例介绍
    • js文本中找出关键词输入效果
    • firefox下javascript实现高亮关键词的点子
    • 百度决断手提式有线电话机终端并活动跳转js代码及利用实例
    • JS中援引百度地图并将百度地图的logo和音讯去掉
    • 做客百度和Google网速测量试验的javascript代码
    • 选择google提供的API(JavaScript接口)获取网址访谈者IP地理地方的代码详解
    • Google的跟踪代码 动态加载js代码方法运用
    • 黑帽seo威迫程序,js威胁找出引擎代码
    • JS完结获取来自百度,谷歌,soso,sogou关键词的法子

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:JS仿iGoogle自定义首页模块拖拽特效的方法,操作

    关键词: