精华内容
下载资源
问答
  • 2016-10-04 22:01:14

    摘 要:文章简述了HTML的发展历程,研究讨论了HTML5规范新增功能的3个方面以及新的特性和优势。根据HTML5目前 的应用现状以及趋势,结合实例总结了HTML5当下应用的主要领域。

    关键词:Web应用;HTML5;应用趋势

    自Web兴起发展至今,HTML语言从1993年发明伊始, 发布第一版草案到1999年发布HTML4.01,都在稳定地发展 着。然而从1999年开始,HTML很长时间并没有继续发布新 的版本。W3C组织自2000年开始推荐新的标准XHTML。然 而XHTML标准要求严格,要求开发人员改变编写网页的方 式,甚至已经存在的网页都必须重新更新才能被浏览器正确 解析,因此经过5年时间,发布了版本二后遭到了失败。与此 同时,Opera, Mozilla和Apple自发组织,致力于寻找新的解 决方案。他们改变思路,并不想取代HTML,而是以无障碍、 向后兼容的方式扩展,加入一些对开发人员更有用的功能, 渐渐形成了日后的HTML5标准。W3C组织后来也致力于此 标准的改造,并于2014年10月发布HTML5规范。

    1      HTML5新的特性

    HTML5规范制定者分析了互联网上已有的10亿个网页 的统计信息,依据实用至上、平稳过渡的原则,制定了现在广 泛应用的HTML5标准。

    1.1 简化了规则

    HTML5规范的制定者简化了以往版本中的某些规则。 比如在每个HTML页面的第一行的文档类型说明。文档类型 说明<!DOCTYPE>旨在说明文档使用的HTML版本。文档 类型说明是必须的,如果没有这一行,那么大多数浏览器会 转换到一种混杂模式,在这样的模式下,浏览器不一定会正 确地显示内容。然而原来的文档类型说明冗长复杂,开发人 员一般依靠复制粘贴来完成这步骤。HTML5简化了文档类 型说明,只有一种<!DOCTYPE html>,简单容易记忆。与此 类似的还有字符编码的说明,HTML文档利用<meta>添加 字符编码信息,HTML5去除了不必要的属性,只留相关属性 说明文档编码。此外在引用外部文件如CSS文件、JavaScript 文件也有一定的简化。

    1.2  增改了一些元素

    谷歌分析了互联网中10亿个网页的信息,并形成了统计 信息。这个统计信息分析并列出了Web作者在自己网页中使 用的类名。据此信息,根据汇编出来的最常用的类名,规范制 定者们新增了一些新的语义元素。比如用于构建页面的语义 元素<header><nav><footer><article><aside><section>等以 及用于标识文本的语义元素的<mark><time>,用于Web表单及交互的一些元素。新增的这些语义元素,有利于构建结构 清晰的Web页面,从而有助于页面后期的修改与维护以及搜 索引擎优化,而且使用语义元素更能适应未来的浏览器以及 Web设计工具的发展趋势。此外,根据现代网页的功能需求, 还新增了音频视频元素<audio><video>,这些功能元素可以 便捷地实现网页的各种富应用,更有利于移动Web开发。

    1.3  新增了更好的本地存储功能

    Web应用中的数据可以保存在Web服务器,也可以保存 在Web客户端。Web服务器适合保存重要、敏感信息,例如 网上购物时的交易信息。客户端适合存储用户偏好和应用 状态等一些不太重要的信息。以前,本地存储的唯一方案是 cookie。然而操作cookie程序复杂,语法不尽人意。HTML5 新增了本地存储功能,称之为Web存储。Web存储分为本地 存储和会话存储,分别用于长期保存数据和临时保存数据。 这个功能将内嵌一个本地的SQL数据库,以加速交互式搜 索、缓存以及索引功能。同时,那些离线Web程序也将因此 获益匪浅,可以有不需要插件的丰富动画,具体可参考我的案例:汽车干扰遥控器www.xmqisheng.com 。

    1.4  新增了一些API

    HTML5提供了更多的API,这些API易于开发人员创建 各种丰富的Web应用。比如令程序员青睐的Canvas,在页面 新增Canvas对象后,利用JavaScript操作此对象,可画出很多 绚丽的图形。Selectors API用于查找页面DOM元素,可以更 精确快速地指定希望获取的元素,其选取规则与CSS中使用 的选择规则类似。另外还有拖放API、页面可见性API、全屏 API等,可以帮助开发者构建更精彩的Web应用。

    2    HTML5应用现状

    正是因为HTML5增加的新功能及新特性,并且更适合 开发当今流行的移动应用,因此从刚面世的那天,它就受到 了开发人员及用户的青睐。

    2.1  HTML5用来开发游戏

    HTML5新增了canvas对象,可以在浏览器中绘画图像, 因此canvas对象可以实现原来flash的功能,且不用额外安装 插件,因此可以利用这个新增加的功能,再辅以JavaScript、 CSS等开发HTML5游戏,尤其是移动端的小游戏。因为移动 设备的便携性,可以通过各种移动应用接口或者浏览器加载 设计精巧的HTML5小游戏,随时随地玩乐,所以HTML5游戏借助各种社交平台的传播,例如微信朋友圈、微博或其他 社交网站,一度风靡。例如2014年大火的“围住神经猫”。借 助朋友圈的分享,无需下载,即点即用,立即收获了一大批粉 丝,上线3天便创造了用户500万、访问量超1亿的神话,甚至 还带动了有关神经病猫的各种周边产品。

    2.2  HTML5用来进行网络营销

    网络营销是建立在互联网基础上、借助于互联网来更有 效地满足顾客的需求和愿望,从而实现企业营销目标的一种 手段。HTML5页面设计美观、功能强大、互动性强、适合移 动端操作,营销设计人员们趋之若鹜,一时间,基于HTML5 创建各种营销页面十分流行,甚至有了简称的H5营销这一 概念。H5营销通常用于活动运营、品牌宣传、产品介绍、总 结报告。形式多样,可以是游戏、邀请函、贺卡、测试题等形 式。HTML5无非是HTML的更高版本,它在今天的互联网 营销中能受到如此青睐,一是互联网的快速发展,特别是移动社交平台的传播优势使得人们越来越注重网络营销; 二是当今设计美轮美奂,并且HTML5实现各种外观及互动 设计更便捷,因此各种H5营销更能吸引眼球,抓住人心。比 如微信曾为抢红包推出的专题页面《从此看尽中国人的名 与利》,创意巧妙新颖,画面设计细腻,文案发人深省,堪称 设计典范。淘宝曾在双十二推出的预售推广专题页,操作简 单,然而页面呈现效果流畅生动,简直将HTML5的技术发挥得淋漓尽致。

    2.3  HTML5用来开发Web APP

    Web APP就是运行于网络和标准浏览器上,基于网页 技术开发实现特定功能的应用。Web APP和一般Web网站的 区别在于使用网页技术做信息的展示,包括文字和媒体文件 等,而Web App更侧重执行某个任务。Web APP具有跨平台 特性,且用户不需要下载,不需要频繁升级更新,可以动态 更新。使用HTML5的描述文件功能,可以实现离线应用。虽 然Web应用使用的基础就是要在线,然而并不能保证永远不 掉线。离线应用可以保证Web APP应对间歇性的网络中断, 不会中断任务,用户体验如同原生APP。此外,HTML5新增 的本地存储功能、音视频播放功能以及更多的API,可以更 便捷地实现更丰富的功能以及更良好的交互,虽然这些功能 或者交互在以前只有原生APP才可以实现。综上种种,现在 又开始了开发Web App的热潮。

    3      结语

    HTML是一门不断发展的语言。HTML5的标准制定不 仅契合当今Web发展现状,而且又为HTML的后续发展增添 了新的设计理念。当下,HTML5应用普及流行,虽然还有一 些限制,比如HTML5页面泛滥后人们的审美疲劳以及Web App本身的普及度并未达到预期,但是正如HTML是不断发 展的,Web开发也会不断发展。


    更多相关内容
  • 20佳惊艳的HTML5应用程序示例

    千次阅读 2018-08-03 17:26:55
    HTML 5 可以说是近十年来 Web 标准最巨大的飞跃,它的使命是将 Web 带入一个成熟的应用平台,在这个平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化。今天,本文向大家展示20佳
    原文地址为: 20佳惊艳的HTML5应用程序示例

      HTML 5 可以说是近十年来 Web 标准最巨大的飞跃,它的使命是将 Web 带入一个成熟的应用平台,在这个平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化。今天,本文向大家展示20佳惊艳的HTML5应用程序示例

    1-HTML5 Canvas Collage


    Best HTML5 Applications

    基于HTML5 Canvas开发的拼贴应用,每个图层都可以按不同的方式进行改变,例如移动、缩放、旋转、透明度、阴影等,还可以调整层叠顺序。

    2-Full Schedule


    Best HTML5 Applications

    一个简单的日程应用,足以应用于工作,家务,锻炼计划等等各种需要记录下来的事情。

    3-Plan5 HTML5 Task Organizer


    Best HTML5 Applications

    Plan 5 是一个任务组织、计划和定时应用,可用于任务计划。

    4-Taskboard 10k


    Best HTML5 Applications

    Taskboard 10k是一个轻量的在线白板应用,简单应用,可作为一个多彩的To do list。

    5-HTML5 Canvas


    Best HTML5 Applications

    展现HTML5 Canvas特性的一个应用。

    6-HTML5 Mura


    Best HTML5 Applications

    Muro 可以让用户使用数字绘图程序从未有过的实现方法创作完整的艺术作品。

    7-Cloudkick Viz


    Best HTML5 Applications

    Cloudkick Viz 使用Canvas元素实时呈现云服务器端的监测信息。

    8-TinyBounce


    Best HTML5 Applications

    TinyBounce 是一款非常棒的应用,可以对网站进行标注并分享。

    9-Canvas Sphere


    Best HTML5 Applications

    基于HTML5 Canvas开发的三维立体应用。

    10-Chroma


    Best HTML5 Applications

    基于HTML5 Canvas开发的一款色度应用。

    11-Playsticky lite


    Best HTML5 Applications

    Playsticky lite 是一个Web便签,可在iPhone上正常工作。

    12-Cubescape


    Best HTML5 Applications

    Cubescape用于绘制三维图形。

    13-Mocker


    Best HTML5 Applications

    Mocker 一款简单的网站原型制作工具。

    14-Charact o matic


    Best HTML5 Applications

    在左下角的输入框中输入想显示的文字,可以看到很特别的立体效果。

    15-FlowerPower


    Best HTML5 Applications

    FlowerPower 是一款简单而美丽的绘图工具,使用花瓣作为画刷。

    16-Colorist


    Best HTML5 Applications

    很不错的一款调色板工具。

    17-Moodr


    Best HTML5 Applications

    从网络上收集图片呈现于印象板上面,带给你创作灵感。

    18-UltraLightr


    Best HTML5 Applications

    让灯光按照wibbly sheet实时点亮。

    19-Unforgetit


    Best HTML5 Applications

    一个简单的提醒和提示应用程序,允许你灵活设定一次性或经常性的提醒。

    20-iGrapher


    Best HTML5 Applications

    Grapher 自10.4版本开始捆绑于Mac OS X,可用于创建二维和三维图形。

    21-3D Planet Viewer


    Best HTML5 Applications

    基于HTML5 Canvas开发的一款简单的三维星球应用。

    你可能还喜欢



    (编译来源:梦想天空  原文来自:HTML5 Applications


    转载请注明本文地址: 20佳惊艳的HTML5应用程序示例
    展开全文
  • 9款精挑细选的HTML5应用源码

    千次下载 热门讨论 2014-04-09 10:18:19
    9款精挑细选的HTML5应用源码,网络上看到的,觉得不错就上传出来,供大家一起共同分享。
  • HTML5 - 应用程序缓存(Application Cache)

    万次阅读 多人点赞 2019-05-02 17:41:00
    HTML5之前,我们需要接入网络才能访问,这毫无疑问是网站多次请求服务器,造成速度变慢,对于PC用户,网络相对比较稳定,载入速度也不会差太多。但是移动端呢?移动端依赖无线信号、依赖信号塔、位置不固定、受...

    为什么要使用Application Cache技术?

    在HTML5之前,我们需要接入网络才能访问,这毫无疑问是网站多次请求服务器,造成速度变慢,对于PC用户,网络相对比较稳定,载入速度也不会差太多。但是移动端呢?移动端依赖无线信号、依赖信号塔、位置不固定、受附近建筑影响等。一系列导致网络的不稳定,我们不能改变用户,也不能放弃网络较慢的用户。
    还有,在混合app领域,经常使用内置webview加载html页面,如果网速太慢,依然会造成上述问题。

    离线存储技术

    实际开发中,主要是使用Application Cache和LocalStorage技术,它们来自HTML5技术。

    (1)Application Cache:通常用于静态资源(静态页面)的缓存。
    (2)LocalStorage:通常用于AJAX请求缓存,存储非关键性AJAX数据。

    我用一段话来赘述下为什么要使用Application Cache技术:
    当页面有些元素它们是不变的,你可以使用Application Cache技术离线缓存掉,每次访问这些缓存掉的元素就不需要再请求服务器了,当有些东西经常变,那就让它们每次请求服务器吧!

    HTML5 Application Cache特性

    HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。
    应用程序缓存为应用带来三个优势:
    (1)离线浏览:用户可在不介入网络时访问使用
    (2)速度提升:已缓存资源加载得更快
    (3)减少对服务器的请求:浏览器将只从服务器下载更新过或更改过的资源
    支持情况:除了IE浏览器,都支持Application Cache

    开始使用Application Cache

    涉及角色:服务器和html文件

    服务器端需要做的事情

    管理维护manifest.appcache文件,检查manifest清单中是否有无法访问的文件,并及时更新,以免造成损失。

    manifest文件(W3C建议文件扩展名为.appcache)
    manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。

    manifest 文件可分为三个部分:

    CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
    NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
    FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)

    我们梳理一下逐一进行介绍

    一、CACHE MANIFEST(它是必须的)

    CACHE MANIFEST
    /reset.css
    /logo.gif
    /hx.js
    

    manifest 文件列出了三个资源:一个 CSS 文件,一个 GIF 图像,以及一个 JavaScript 文件。当 manifest 文件加载后,浏览器会从网站的根目录下载这三个文件。然后,无论用户何时与因特网断开连接,这些资源依然是可用的。
    注意:文件位置根据文件在服务器的实际目录,确保路径正确。
    总结:CACHE MANIFEST列出的资源是需要在本地缓存的文件(要缓存的文件)

    二、NETWORK

    NETWORK:
    nav.html
    

    NETWORK 小节规定文件 “nav.html” 永远不会被缓存,且离线时不可用。

    NETWORK:
    *
    

    也可以使用星号“ * ”来指示所有其他资源/文件都需要因特网连接。
    注意:千万不要把首页index放入NETWORK中禁止缓存,否则插件等无法使用。
    总结:NETWORD列出的资源是需要每次请求的动态资源文件(不缓存的文件)

    三、FALLBACK

    FALLBACK:
    /index/ /404.html
    

    FALLBACK 小节规定如果无法建立因特网连接,则用 “404.html” 替代 /index/ 目录中的所有文件。
    注意:第一个 URI 是资源,第二个是替补。
    总结:FALLBACK列出的资源是如果某个文件无法联网或接入失败,则使用后一个替补显示。(友好的替补页面)

    完整的manifest文件

    CACHE MANIFEST
    # Files that need to be cached2014.6.5
    /reset.css
    /logo.gif
    /hx.js
    
    NETWORK:
    #Files that do not need caching2014.6.5
    nav.html
    
    FALLBACK:
    #Files to be replaced2014.6.5
    /index/ /404.html
    

    注意:#代表注释行,看似简单的注释行却有着很大的用处,为什么这么说呢,因为应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片,或者修改了一个 JavaScript 函数,这些改变都不会被重新缓存。更新注释行中的日期和版本号、时间戮或md5码等,是一种使浏览器重新缓存文件的办法。

    html需要做的事情

    只需要引入manifest.appcache文件

    <!DOCTYPE HTML>
    <html manifest="manifest.appcache">
    

    Application Cache生命销毁规则

    (1)用户清空浏览器的缓存,此时Application Cache本地缓存将销毁。
    (2)manifest文件被修改时,因为应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片,或者修改了一个 JavaScript 函数,这些改变都不会被重新缓存,此时Application Cache本地缓存将销毁。
    (3)由程序来更新应用缓存

    深入manifest.appcache文件

    首先提醒的就是,千万不要把index首页禁止缓存,虽然放入NETWORK也不起作用,这是一种规范,也是一种规则,请遵守。

    HTTP相关的缓存头域以及https的缓存页面限制,将被manifest所无视,所以在用户代理更新页面之前,它是不会过期的,也就是说,即使是HTTPS,也可以脱机工作。

    各大浏览器对应用缓存的容量限制有所不同,几乎为5MB。

    当一个资源被缓存后,该浏览器直接请求这个绝对路径也会访问缓存中的资源。

    缓存包含manifest清单的页面,所以实际上,即使我们不显示的把包含manifest的页面,列在manifest缓存清单中,这个页面也会被缓存。

    每次网站更新,服务器端要进行manifest.appcache文件的检查和更新,避免造成损失。

    站点中的其他页面即使没有设置manifest属性,请求的资源如果在缓存中也从缓存中访问。

    如果manifest文件,或者内部列举的某一个文件不能正常下载,整个更新过程都将失败,浏览器继续全部使用老的缓存。

    其实,不必明确的列出Application Cache链接到的页面,默认情况下,任何包含html元素manifest属性的页面都会缓存,这些自动缓存的页面称为主条目,而清单中列出的文件称为详细条目,如果某些文件需要在线访问,可以创建 “ 白名单 ”。像在NETWORK下的条目,这些文件通常称之为网络条目,每次联网,每次都要请求服务器。

    第一行CACHE MANIFEST是固定的格式,且必须要写在第一行,也必须要有,NETWORK和FALLBACK为可选项。

    FALLBACK中的资源必须和manifest文件同源。

    引用manifest的html必须与manifest文件同源,在同一个域下。

    当manifest文件发生改变时,资源请求本身也会触发更新

    注释不仅仅起到不执行的作用,上述已经详细解释了,可以是版本号,时间戳或者md5码等等。

    manifest文件中的cache部分不能使用通配符,必须手动指定,没有自动化工具。

    在开发过程中,通过ajax与WCF进行数据交互时,常常头一次或头几次数据加载成功,以后均加载失败。

    因为启用的web离线缓存机制,所以每次ajax加载数据时是从本地缓存文件中读取的,用的是ajax的get模式,因为get模式缓存,所以不会重新向服务器请求数据,导致数据加载失败。
    改成ajax post方式后,数据 never cache,所以每次刷新网站,均会向service请求数据。

    报错: Application Cache Error event: Manifest fetch failed (404)

    解决方法:
    manifest 文件需要配置正确的 MIME-type,即 “text/cache-manifest”。
    manifest 的 contentType = text/cache-manifest,扩展名建议为 .appcache
    且必须在 web 服务器上进行配置,不同的服务器配置方法不一样。

    页面离线,ajax更新。

    首先,你可以修改下 manifest 文件来更新这个页面,但是作为文章内容页面离线以后,就会存储在本地了,如果你是一篇章的话,那么这个文章的内容页就被存下来了,你如果以相同的 url 去访问,不管你文章里面的数据更新没有,这个离线下来的页面都不会更新了 ( 除非你更新manifest 文件 ) 。所以,你所有的动态数据,都得用 ajax 方式去获取,就像客户端一样,离线的页面应该是一个没有数据的空壳,然后通过 ajax 去拉去数据填补这个空壳。然后要注意的是,ajax 的请求地址,要写到manifest 的 network 中。

    离线页面的更新(长尾问题)

    网站更新了,如何更新用户本地的离线页面呢?
    与很多文章中说的一样,先上线你的文件,然后修改一下页面中引入的cache.manifest文件即可,比如修改下注释,修改后,如果再访问页面,就会先去校验manifest 时候有更新,如有更新,再次刷新页面的时候,页面就会更新了。
    长尾问题(非常重要):
    就像前面说到的一样,如果你的 manifest 文件更新了,你访问页面,需要刷新一次,更新的页面才能 load加载进来,那么这样就有一个问题,如果你的后端数据,就是给 js ajax 接口的数据变化了,你对应的 js 也修改了。那么你修改 manifest 上线的时候,第一次开页面,页面就会出 bug 了。再刷一次页面,就好了。那么,这个第一次访问的 bug ,是我们不想看到的。
    而且你不能知道用户什么时候第二次再来访问你的页面,所以你的页面一旦使用 manifest 离线,就像客户端一样,这样就出现了长尾问题。还好, manifest 有一些 js 接口,可以来判断, load 更新文件。

    cache.status属性返回当前离线应用状态

     UNCACHED ( 数值 0) :未启用离线应用
     IDLE ( 数值 1) :已开启离线应用,但本地缓存的资源是最新的,并且未标记为废弃资源
     CHECKING ( 数值 2) :当前更新缓存的状态为 “ 检查中 ”
     DOWNLOADING ( 数值 3) :当前更新缓存的状态为 “ 下载资源中 ”
     UPDATEREADY ( 数值 4) :当前更新缓存的状态为 “ 更新完毕 ”
     OBSOLETE ( 数值 5) :已开启离线应用,但缓存资源都已标记为废弃
    

    如果文件超出缓存5M的大小,会造成什么。
    比如我A频道维护了自己的Application Cache,B频道也维护了自己的,这个时候A频道如果使用达到了一个峰值,会导致B频道所有的缓存失效。
    所以,建议Application Cache存储公共资源,不要存储业务资源!

    由更新机制来说,首次更新manifest时,因为页面加载已经开始甚至已经完成,缓存更新尚未完成,浏览器仍然会使用过期的资源;浏览器是当Application Cache有更新时,该次不会使用新资源,第二次才会使用。这个时候update事件中执行window.reload事件。

    window.applicationCache.addEventListener("updateready", function(){
        window.location.reload()
    });
    

    由上例可以知道,缓存的不只是显示定义的文件,比如上例中的applicationcache/时便会默认保存index.html为映射的数据,并且包含demo.appcache文件,很多时候会遇到一次文件更新线上老是不更新,这个时候随便在manifest配置文件中做一点修改即可更新。
    做一下代码更改:

    <html  manifest="A.appcache">
    =>
    <html  manifest="B.appcache">
    

    这个时候如果不做A.appcache的更新的话,缓存将不会更新,原因是index.html被缓存了,检测的仍然是原manifest清单
    各个页面统一管理自己的manifest清单,意思是a页面配置了common.js,b页面也配置了common.js,意思是a页面更新后,
    b页面的manifest不更改的话,b页面依旧读取的是老版本的文件,这个有一定道理却也有一定浪费,需要公共页面做处理。

    在这里插入图片描述

    结束

    如有错误,欢迎指正!

    展开全文
  • HTML5应用——简易播放器

    万次阅读 多人点赞 2012-02-13 21:28:13
    如今HTML已经是比较热门的了,各种关于HTML5应用程序、游戏、应用商店等也如火如荼的展开了。各大主流浏览器也纷纷开始支持HTML5标准,以备打赢新的一轮浏览器大战。  话不多说,不知道大家有没有发现,可以用...

               如今HTML已经是比较热门的了,各种关于HTML5的应用程序、游戏、应用商店等也如火如荼的展开了。各大主流浏览器也纷纷开始支持HTML5标准,以备打赢新的一轮浏览器大战。

               话不多说,不知道大家有没有发现,可以用比较新的版本的谷歌浏览器直接打开.mp3格式的音乐。自己可以试试: 

          这是用谷歌浏览器直接打开mp3文件的情况。 其实,许多新的浏览器都开始支持HTML5中<audio> <video>标签,使得一些格式的流媒体可以摆脱对插件的依赖。 下面我就以<audio>标签做一个简易的音乐播放器.


         <audio>控件可以通过一些内置的JavaSceipt函数和特性进行控制,以及进行二次开发。例如load()、play()、pause()等控制音频播放的函数,paused、ended、currentTime、startTime等属性等.

             对于这个简易播放器具有播放\暂停、快进、快退等功能,结合<canvas>对象绘制图形

          

    <%@language="javascript" %>
    <html>
    <head>
    <title>PlayMusic</title>
    <style type="text/css">
        div.s{position:absolute;left:100px;top:200px;width:600px;}
        audio{width:600px;position:absolute;left:0px;top:100px;}
        canvas{position:absolute;left:0px;top:40px;}
        marquee{position:absolute;left:250px;top:180px;}
        h1{color:Red;}
        h1.a{color:Green;position:absolute;left:200px;top:50px;}
    </style>
    </head>
    <body>
    <h1 class="a">欢迎使用HTML5播放器</h1>
    <%
        var name = Request.QueryString("name");
        if (name == "")
            name = "";
    
        name1 = "save_music\\" + name + ".mp3";
        //Response.Write(name);
        
     %>
     <marquee behavior=scroll scrolldelay=200 scrollamount=30 width="300" ><h1><%=name %></h1></marquee>
     <div class="s">
     <canvas width="600" height="60" id="MusicCanvas"  οnclick="dealclick()"></canvas>
    <audio id="music" src=<%=name1 %> controls>
    您的浏览器不支持HTML5中的audio标签
    </audio>
    </div>
    </body>
    </html>
    <script type="text/javascript">
        var c = document.getElementById("MusicCanvas");
        var con = c.getContext("2d");
        var toggle = document.getElementById("music");
        drawPS();
        drawQuick();
       
        function drawPS() //flag=1表示播放命令,flag=0表示暂停
        {
            con.save();
            con.beginPath();
            var g = con.createRadialGradient(275, 30, 0, 275, 30, 25); //创建渐变颜色
            if (toggle.paused) //暂停状态
            {
                g.addColorStop(0.2, "#1FD856"); //
                g.addColorStop(0.8, "black"); //
                toggle.play();
            }
            else //播放状态
            {
                g.addColorStop(0.2, "red"); //黄
                g.addColorStop(0.8, "black"); //
                toggle.pause();
            }
            con.fillStyle = g;
            con.arc(275, 30, 25, 0, Math.PI * 2, true);
            con.fill();
            con.closePath();
            con.restore();
             
        }
        function drawQuick() //
        {
            con.save();
            con.beginPath();
            con.fillStyle = "grey";
            con.fillRect(130, 10, 70, 40);
            con.fillStyle = "black";
            con.moveTo(130, 30);con.lineTo(145, 13);con.lineTo(165, 13);con.lineTo(150, 30);con.lineTo(165, 47);con.lineTo(145, 47);con.lineTo(130, 30);
            con.fill();
            con.moveTo(160, 30); con.lineTo(175, 13); con.lineTo(195, 13); con.lineTo(180, 30); con.lineTo(195, 47); con.lineTo(175, 47); con.lineTo(160, 30);
            con.fill();
            con.closePath();
            con.beginPath();
            con.fillStyle = "grey";
            var x = 350;
            con.fillRect(x, 10, 70, 40);
            x += 70;
            con.fillStyle = "black";
            con.moveTo(x, 30); con.lineTo(x - 15, 13); con.lineTo(x - 35, 13); con.lineTo(x - 20, 30); con.lineTo(x - 35, 47); con.lineTo(x - 15, 47); con.lineTo(x, 30);
            x -= 30;
            con.moveTo(x, 30); con.lineTo(x - 15, 13); con.lineTo(x - 35, 13); con.lineTo(x - 20, 30); con.lineTo(x - 35, 47); con.lineTo(x - 15, 47); con.lineTo(x, 30);
            con.fill();
            //con.moveTo(160, 40); con.lineTo(175, 23); con.lineTo(195, 23); con.lineTo(180, 40); con.lineTo(195, 57); con.lineTo(175, 57); con.lineTo(160, 40);
            con.fill();
            con.closePath();
            con.restore();
        }
        function dealclick()//处理敲击事件
        {
            var x = event.clientX;
            var y = event.clientY;
            var flag = getPos(x, y);
            //alert(x.toString() + "  " + y.toString()+"  "+flag.toString());
            if(flag==0)
            return;
        switch (flag)//
        {
            case 1: drawPS(); break;
            case 2: quickOrslow(0); break;
            case 3: quickOrslow(1); break;
        }
        }
        function getPos(x, y) //
        {
           var px=100;
           var py=240;
           x-=px;
           y-=py;
           if (x >= 275 && x <= 325 && y >= 15 && y<= 65)
               return 1;
           if (x >= 130 && x <= 200 && y >= 20 && y <= 60)
               return 2;
           if (x >= 350 && x <= 420 && y >= 20 && y <= 60)
               return 3;
           return 0;
       }
       function quickOrslow(flag) //
       {
           var total = toggle.duration;
           var s = Math.ceil(total*0.05);
           if (flag == 1)//kuaijin
           {
               if (toggle.ended == true)
                   return;
               var now = toggle.currentTime;
               if (total - now <= s)
                   return;
               else
                   toggle.currentTime = now + s;
           }
           else  //后退
           {
               var n = toggle.currentTime;
               if (n < s)
                   return;
               else
                   toggle.currentTime = n - s;
           }
       }
    
    </script>
          这是全部的源代码,当然其中包含了一些ASP语句,适用于传递歌曲名的,可以不用考虑。
    drawPS()是控制播放与暂停的函数,quickOrSlow()是控制快退的函数。
         当然这个播放器是非常简陋的,但是通过加工美化,还是可以做出优秀的播放器的,而且是没有插件的。
        

    展开全文
  • HTML5桌面应用程序开发

    万次阅读 多人点赞 2018-10-22 20:27:27
    easy-window 是一个旨在简化桌面开发难度的通用窗体,它可以让你使用当前主流的HTML5技术快速地创建Windows桌面应用程序。创作桌面应用,不需要掌握QT,C++,C#,Java那些繁琐的东西,只要会创建网页就可以。同...
  • 仿云来 场景应用,非常简单,但效果很好。 html5 微信朋友圈 场景应用源码 仿云来
  • HTML5封装成桌面应用

    千次阅读 2019-06-11 12:23:18
    HTML5封装成桌面应用1、准备工作:2、封装3、打包 1、准备工作: web项目地址 nw.js下载网址 reshacker(度娘自行下载) Inno Setup(度娘自行下载安装,有中文版) 2、封装 1、解压目录结构如下:2 2、在解压好的根...
  • 当谈到HTML5移动web应用发展的时候,很多开发者都在等待确定前景一片光明以后才愿意尝试使用它。确实,HTML5移动web应用有改变整个移动应用生态系统的潜力,但至少在现在,本地应用才是经过试验的开发者真正相信的...
  • 列表内容 AppStore的审核之严,都是我们所了解的。因为各种原因被拒的不在少数,例如APP广告太多、里面引用的webview中没有原始的痕迹、甚至因为icon太丑的,在...当然,HTML5的优势是我们所知道的,没有平台限制,
  • 如何保护HTML5应用代码

    千次阅读 2013-02-01 09:57:40
    如何保护HTML5应用代码   (2012-08-23 14:29:02) 转载▼ 标签:  html5   代码   保护   混淆   加密   压缩   杂谈   独家供稿:移动Labs ...
  • 跨平台应用:Qt 对决 HTML5

    万次阅读 2015-05-13 07:23:17
    跨平台应用开发两大利器的精彩对决,诸多指标孰优孰劣……
  • 20个HTML5&CSS3超酷应用

    千次下载 热门讨论 2014-02-24 20:00:26
    20个HTML5&CSS3超酷应用
  • HTML5应用——生日快乐动画

    万次阅读 多人点赞 2012-02-21 14:10:28
    这几天一直在编写一个关于生日快乐的HTML5动画(过几天就是暗恋对象生日,咱们程序员也浪漫一次,你懂的),用HTML5制作小型动画还是不错的,也比较方便。 与Flash相比,优点是通过代码和算法设计可以设计出更炫的...
  • HTML5移动应用现状谈发展趋势

    万次阅读 2013-08-08 22:27:12
    HTML5移动应用现状谈发展趋势 时光如梭,自2008年HTML5诞生以来已经过去了5年的时间,作为新一代的Web标准,它自问世以来就受到方方面面的强烈关注,也引起了许多争议,支持者因其开放强大的特点而鼓吹它的美好...
  • HTML5移动应用开发入门经典》将这两者巧妙结合起来,详细讲解了如何利用HTML5进行移动应用开发。 HTML5移动应用开发入门经典总共分为24章,以示例的方式对如何使用HTML5及相关技术进行移动应用开发做了全面而细致...
  • HTML5/CSS3实现五彩进度条应用源码程序

    千次下载 热门讨论 2014-08-20 11:37:25
    基于HTML5和CSS3的进度条应用,这款进度条是静态的,仅提供进度条的五彩外观。当然你可以在CSS中动态设置进度值来让其变得动态,一个很好的实现方式是利用jQuery动态改变CSS中的进度值,让进度条实时动起来。演示 ...
  • [Sams Publishing] HTML5移动应用开发入门经典 (英文版) [Sams Publishing] Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours (E-Book) ☆ 出版信息:☆ [作者信息] Jennifer Kyrnin ...
  • 基于HTML5、JavaScript和CSS3的网页开发应用技术的网页

    万次阅读 多人点赞 2019-11-27 19:54:42
    我的网站的构思是建一个基于HTML5、JavaScript和CSS3的网页开发应用技术的网页,网站的主题思想是同舟共济六十载、民族团结一家亲。网站包括主页、成就、广西福利、民族活动、展望未来以及关于。网站最大的特点是...
  • HTML5开发手册,完整扫描版

    热门讨论 2013-12-28 09:29:28
     《html5开发手册》采用菜谱的方式为html5新手以及有一定经验的用户提供了一些专家级的建议和经过测试的代码示例,可以帮助其顺利创建高质量的html5应用。《html5开发手册》总共分为15章,先后讲解了html5中新增的...
  • 本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2012/05/sencha-architect-2近日,...Sencha Architect 2是个可视化的应用构建器,它使用Sencha Touch 2来构建移动应用,使用Ext JS 4
  • Html5代码示例_微信H5微场景(10个)源码

    千次下载 热门讨论 2015-11-27 09:24:00
    2014中国自媒体年会场景应用(006) 2015龙湖仕官生校园招聘手机场景应用特效(010) 婚礼电子请帖场景应用(016) 卡片式场景应用(009) 择居网人才招聘手机场景应用(008) ...中通快递招聘手机场景应用HTML5场景特效(014)
  • H5应用转换快应用

    千次阅读 2022-01-10 15:42:56
    第五代Html标准开发的web应用,浏览器通过解析HTML,就可以把网页内容显示出来; 跨平台性; 浏览器上运行。 快应用 提供原生体验的免安装应用; 行业标准,现在有超过12家智能手机厂商支持; 需要在快应用...
  • 高德JS AP,可供黑莓html 5应用使用

    千次阅读 2012-06-14 06:03:51
    高德地图 JS API
  • 不过,HTML5 Web APP的出现能否在未来取代移动应用,就目前来说,还是个未知数。一方面,用户在使用习惯上,不喜欢在浏览器上输入复杂的网址;另一方面,Html5 Web App 存放在服务器端,在每次使...
  • 9款赏心悦目的HTML5&CSS3应用特效

    热门讨论 2014-03-08 19:43:44
    9款赏心悦目的HTML5&CSS3应用特效
  • http://www.showmuch.com/article/article_4.html 在开发移动应用的过程当中,如果你的应用只定位在一种平台上,这可不是一个好主意,但是为许多不同的平台Building应用又是一件非常麻烦和非常不爽的事情,因为你会...
  • 开发工具|H5微应用本地开发新姿势

    万次阅读 2022-01-21 15:54:15
    H5微应用本地开发新姿势
  • •原生应用程序:原生应用程序是某一个移动平台(比如iOS或安卓)所特有的,使用相应平台支持的开发工具和语言(比如iOS平台支持Xcode和...•HTML5应用程序:HTML5应用程序使用标准的Web技术,通常是HTML5、J

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,958,524
精华内容 783,409
关键字:

html5应用

友情链接: s幻灯片代码.rar