使用WebSocket进行通信的简单应用

一 应用 打开一个页面,将向服务器发送一段字符串,并通过onmessage事件监听器来接受服务器返回的消息。   二 代码 客户端代码 使用WebSocket通信 // 创建Web Socket对象 var webSocket = n...

2017-11-22 10:38:54

阅读数:107

评论数:0

使用WebSocket实现多人实时聊天

一 应用 本应用使用WebSocket实现多人实时聊天   二 代码 客户端代码 使用WebSocket通信 // 创建Web Socket对象 var webSocket = new WebSocket("ws://127....

2017-11-22 10:38:44

阅读数:217

评论数:0

跨文档发送JSON消息实现图书选择

一 应用 该实例允许用户打开一个页面来选择图书,当用户选择了合适的图书之后,再把用户选择的图书传回主页面。该应用是用JSON消息发送的。   二 代码 1、viewBook.html 选择图书 var chooseBook = functio...

2017-11-22 10:38:32

阅读数:73

评论数:0

HTML5 WebSocket简介

HTML5 WebSocket WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。 浏览器通过 Java...

2017-11-22 10:38:22

阅读数:66

评论数:0

跨文档消息传递应用

一 应用 source.html程序调用window的open方法打开一个新的窗口,接下来程序即可调用新窗口对应的window对象的postMessage向该文档发送消息。     二 代码 1、source.html 跨文档发送消息 var...

2017-11-22 10:38:10

阅读数:64

评论数:0

Worker子线程之间的数据交换应用

一 应用 1、第一条Worker线程负责收集指定范围内的质数。 2、第二条Worker线程负责从指定范围的质数中随机抽取指定数量的质量。   二 代码 1、calPrime.html 计算质数 #show { width: 400p...

2017-11-22 10:38:00

阅读数:81

评论数:0

嵌套Worker线程应用

一 应用 1、前台JS脚本先启动一个Worker线程,该Worker线程负责收集该范围内的所有质数。 2、程序把收集到的所有质数再次提交给另外一个Worker线程统计出指定的质数。   二 代码 1、calPrime.html 计算质数 #show {...

2017-11-22 10:37:36

阅读数:62

评论数:0

使用Web Worker创建多线程应用

一 介绍 HTML5 Web Workers web worker是运行在后台的JavaScript,不会影响页面的性能。 什么是 Web Worker 当在HTML页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。 web worker是运行在后台的JavaScript,独立于...

2017-11-22 10:37:24

阅读数:85

评论数:0

判断浏览器在线状态

一 介绍 为了判断浏览器的在线状态,HTML 5提供了两种方法来检测是否在线。 1、navigator.onLine属性:该属性可返回当前是否在线。如果返回true,则表示在线,如果返回false,则表示离线。当网络状态发生变化时,该值也会随之变化。 2、online/offline事件:如...

2017-11-22 10:37:13

阅读数:108

评论数:0

构建web离线应用

一 构建步骤 1、搭建web服务器 2、给元素增加manifest属性 3、编辑manifest文件。   二 代码 核心代码: 1、HTML文件(index.html) manifest="index.manifest"> name=&q...

2017-11-22 10:37:05

阅读数:60

评论数:0

Web Storage结构化存储实现更复杂的本地留言板

一 介绍 Web Storage结构化存储的实现步骤如下: 1、存储结构化数据 1.1:把结构数据封装在JSON对象中。 1.2:把JSON对象转换为字符串后再进行保存。 2、读取结构化数据 2.1:读取JSON格式的字符串。 2.2:通过JSON对象的属性来提取。   二 代码...

2017-11-22 10:36:53

阅读数:89

评论数:0

基于Web Storage的客户端留言板

一 代码 客户端留言板 table { border-collapse: collapse; } td , th{ border: 1px solid #888; padding: 4px; } ...

2017-11-22 10:36:43

阅读数:86

评论数:0

DOM取消事件默认行为应用

一 介绍 DOM提供了preventDefault方法来取消事件对象的默认行为。   二 代码 阻止默认行为 友情链接: 疯狂Java联盟 var killClicks = function(event) { //...

2017-11-22 10:36:22

阅读数:119

评论数:0

跨浏览器拖动HTML元素

一 代码 HTML代码: 拖放效果 <div style="position:absolute; left:120px; top:150px; width:250px; border:1p...

2017-11-22 10:36:14

阅读数:64

评论数:0

DOM模型转发事件应用

一 介绍 DOM提供了dispatchEvent方法用于事件的转发,该方法属于Node对象,因此DOM的每个Node都可以调用该方法,从而将事件直接转发到本节点。   二 代码 转发事件 // 第一个按钮被...

2017-11-22 10:36:03

阅读数:59

评论数:0

DOM模型事件传播机制应用

一 介绍 DOM模型事件传播先后沿着两个方向传播:在第一阶段,也就是事件捕获阶段,事件从最顶层的对象依次向下传播,因此先触发顶层对象的事件处理函数,然后依次向下,直到传播到事件所发生的最底层对象;接着进入第二阶段,也就是事件冒泡阶段,事件传播一直向上溯,直到最顶层对象。 DOM模型事件传播机制...

2017-11-22 10:35:51

阅读数:104

评论数:0

跨浏览器访问事件的方法

一 介绍 1、DOM事件模型和IE事件模型访问事件对象的方式完全不同,因此需要写一个跨浏览器的程序。 2、实现跨浏览器的通常做法是:将事件处理函数绑定到DOM对象的属性上。   二 代码 跨浏览器访问事件 按钮 // 定义一个形参e...

2017-11-22 10:35:39

阅读数:55

评论数:0

IE浏览器的事件冒泡机制

一 介绍 1、当浏览者在页面上执行了某个动作,页面上实际上有多个元素可以响应该事件,假如单机页面的某个按钮,该按钮又处于元素之内,则实际上用户既单机了该按钮,也单击了元素。 2、IE中的事件传递方向是从事件发生的对象开始,然后依次向该对象所在的父节点传递。这种传递方式是从下向上传递的,因此这种...

2017-11-22 10:35:18

阅读数:90

评论数:0

使用navigator对象的geolocation获取地理位置

一 介绍 HTML5为navigator新增了一个geolocation属性,这个属性是一个Geolocation对象,通过该对象获取浏览者的地理位置。 下面应用示范了geolocation的用法。   二 代码 var geoHandler = function(posi...

2017-11-22 10:34:22

阅读数:111

评论数:0

利用DOM节点关系访问HTML元素

一 介绍 一旦获取了某个元素,由于元素实际与DOM树的某个节点对应,因此我们完全可以利用节点之间的父子关系、兄弟关系来访问HTML元素。 下面应用利用节点关系访问HTML元素。   二 代码 根据节点关系访问HTML元素 /* 定义改变背景色...

2017-11-22 10:33:19

阅读数:92

评论数:0

提示
确定要删除当前文章?
取消 删除
关闭
关闭