• 提升品牌形象
  • 最新HTML5+Css3网站制作技术
  • 完全区分与同行的震撼视觉体验
  • 自动适应平板、手机及电脑屏幕
  • 详细介绍
  • 企业网站入门首选
  • 强大丰富的系统功能
  • 超过1000种页面风格
  • 每年仅需¥1500元,两年仅需¥2000元
  • 详细介绍
  • 4000/4006两种开头选择
  • 智能占线、断线呼转
  • 高达300组可呼转号码
  • 智能语音导航
  • 详细介绍

If you have any question,please contact with us.

  • 昆明网站建设-在线客服

    蛋切刀 一指
    妖异眼瞳
  • 昆明网站设计-服务电话

    4000-555-94113099998627
  • 昆明网站建设-联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101

HTML5 实例-微设计创意工坊 为您提供 昆明网站制作 昆明网站建设 昆明网站设计 云南网站建设 昆明网络公司

  • Home
  • /
  • HTML5 实例
实例9-1 开发一个简单的离线应用

实例9-1 开发一个简单的离线应用

1.功能描述

创建一个HTML页面,浏览该页面时,通过编写JavaScript代码获取服务器时间,并按照时间的格式,动态显示在页面中;当中断与服务器的联系再次浏览该页面时,仍然可以在页面中动态地显示时间。

2.实现代码

在DreamweaverCS5中新建一个HTML页面9-l.html,加入代码如代码清单9-1所示。

代码清单9-1 开发一个简单的离线应用

	<!DOCTYPE html>
	<html manifest="cel.manifest">
	<head>
	<meta charset="utf-8"/>
	<title>开发一个简单的离线应用</title>
	<link href="Css/css9.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" language="jscript"
	        src="Js/jsl.js"/>
	</script>
	</head>
	<body>
	 <fieldset>
	   <legend>简单离线示例</legend>
	     <output id="time">正在获取时间...</output>
	 </fieldset>
	</body>
	</html>

在代码清单9-1中,页面导人一个JavaScript文件jsl.js,其中自定义两个函数,分别用于获取系统时间与格式化显示的时间。其实现的代码如下所示:

	//JavaScript Document
	function $$(id){
	    return document.getElementByld(id);
	}
	//获取当前格式化后的时间并显示在页面上
	function getCurTime(){
	   var dt=new Date();
	   var strHTML="当前时间是";
	   strHTML+=RuleTime(dt.getHours(),2)+":"+
	             RuleTime(dt.getMinutes(),2)+":"+
	             RuleTime(dt.getSeconds(),2);
	   $$(Mtime11).value=strHTML;
	}
	//转换时间显示格式
	function RuleTime(num,n){
	    var len=num.toString().length;
	    while(len<n){
	        num="0"+num;len++;
	    }
	    return num;
	} 
	//定时执行
	setlnterval(getCurTime,1000);

在实例9-1中,页面导入一个CSS文件css9.css,该文件是一个样式文件,用于控制将获取的时间显示在页面中的样式。其实现的代码如下所示:

	@charset"utf-8";
	/*CSSDocument*/
	body.{
	   font-size:12px
	}
	fieldset{
	  padding:lOpx;
	  width:285px;
	  float:left
	}
	output{
	   font-size:14px;
	   font-family:Verdana,Geneva,sans-serif;
	   padding-left:72px

在实例9-1中,页面通过<html>元素的“manifest”属性绑定了一个“manifest”类型的文件cel.manifest,列举服务器需要缓存至本地的文件清单。其实现的代码如下所示:

	CACHE MANIFEST
	#version 0.0.1
	CACHE:
	Js/jsl.js
	Css/css9.css

3.页面效果

该页面在Chrome10浏览器中执行的页面效果如图9-4所示。

图9-4 开发一个简单的离线应用

4.源码分析

在本实例中,通过与页面绑定的“manifest”类型文件cel.manifest,缓存了3个资源文件,分别为jsl.js、CSS9.CSS和9-l.html页面本身。因为使用了本地缓存,使浏览器与服务器之间的数据交互按照如下步骤进行:

1)浏览器:请求访问9-l.html页面。

2)服务器:返回9-l.html。

3)浏览器:解析返回的9-l.html页面,请求服务器返回9-l.html页面所包含的全部资源性文件,包括ce1.manifest文件。

4)服务器:返回浏览器所请求的所有资源文件。

5)浏览器:解析返回的cel.manifest文件,请求返回URL清单中的资源文件。

6)服务器:再次返回URL清单中的资源文件。

7)浏览器:更新本地缓存,将新获取的URL清单中的资源文件更新至本地缓存中。在进行更新过程中,将触发一个onUpdateReady事件,表示本地缓存更新完成。

8)浏览器再次查看访问9-l.html页面时,如果cel.manifest文件没有发生变化,将直接调用本地的缓存,响应用户的请求,从而实现离线访问页面的功能。

本文由昆明网站建设,昆明微设计整理发布,转载请保留链接


  • If you have any question,please contact with us.

  • QQ在线客服

    蛋切刀
    可乐上瘾
    妖异眼瞳
  • 服务电话

    4000-555-94113099998627
  • 联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101