sponsored links

网页进度条的实现

相信你多人都想做一个网页进度条

那怎么样实现呢?

首先,点击这个链接,看看是不是你想要的?

点击看效果 

是不是呢?如果是的话,就用下面的源代码哈:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="refresh" content="3; url=Index.html"> <title>网页进度条实现</title> <style type="text/css"> <!-- body {  background-color: #7C9CB6; } --> </style></head>

<body> <div align="center"><img src="http://www.gvoom.com/ImagesOther/load.gif" width="322" height="20" /> </div> </body> </html>

感觉没有进渡条的感觉,,原来是用的刷新,

那我们再换一个好不好?

,看下面的代码:是真实的,不过要加载你自己的网页哈

<html> <head> <title>一个显示正在加载的页面写法</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language=javascript> document.write("<div id=loadingDiv><br>&nbsp; 页面正在加载,"+ "请等待<span id=loading></span></div>"); var s1 = setInterval("loading.innerText+='.'", 300); var s2 = setInterval("loading.innerText = ''", 8000); function window.onload() { clearInterval(s1); clearInterval(s2); loadingDiv.removeNode(true); bodyHidden.style.display = ""; } </script> </head> <body> <div id="bodyHidden" style="display: none"> <!-- 网页的具体代码 --> 这里放真实的代码哈, </div> </body> </html>

OK,这样两个简单的过渡页就实现了,

一个是真实网页进度条,一个是假的,

选择与否,取决于您哈。

Tags:
  • 用css2属性clip实现网页进度条
    用css2属性clip实现网页进度条
    前言 看了网上一些关于网页进度条样式的资料,有很多方式实现,针对其展现形式,有用图片的,有用css2属性clip,有用flash的,本人就学会了一种,下面就简单来介绍一下. css2的属性clip 如果你不是很明白clip属性,那么我就用大白话来解释一下,clip:rect(0px,0px,0px,0px)有四个值,同理是顺时针方向赋值,上右下左,记录改元素 ...
  • css2 属性clip实现网页进度条
    在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解一下: 浏览器支持程度:所有主流浏览器都支持 clip 属性.  Clip属性在w3c官网是这样描述的:通过对元素进行裁剪来控制元素的可视区域,默认情况下 元素是不进行任何裁剪的. Clip裁剪的语法如下:  .xx {clip:rect(<top&g ...
  • JavaScript实现网页加载进度条代码超简单
    网页进度条能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程.代码简单易懂,效果非常好,需要的一起学习学习吧网页进度条能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程.但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无 ...
  • Javascript 及 CSS3 实现进度条效果
    Javascript 及 CSS3 实现进度条效果
    Javascript 及 CSS3 实现进度条效果  一:css2 属性clip实现网页进度条:  在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解一下: 浏览器支持程度:所有主流浏览器都支持 clip 属性.  Clip属性在w3c官网是这样描述的:通过对元素进行裁剪来控制元素的可视区域,默认情况下 元 ...
  • HTML5多图片拖拽上传带进度条
    HTML5多图片拖拽上传带进度条
    前言 昨天利用css2的clip属性实现了网页进度条觉得还不错,但是很多情况下,我们在那些时候用进度条呢,一般网页加载的时候如果有需要可以用,那么问题就来了,怎么才算整个加载完毕呢,是页面主要模块加载完毕,还是window.onload之后算呢,对这些方面,我真不敢随意回答,因业务需求而定,本文想要说的是在图片上传的时候用到的进度条. 效果展示 详细参考请移 ...