<html>
<head>
<style>
<!--
#bar, #barbackground{
position:absolute;
left:0;
top:0;
background-color:blue;
}
#barbackground{
background-color:black;
}
-->
</style>
<script language="JavaScript1.2">
/*
Dynamic Progress Bar- By Dynamicdrive.com
For full source, Terms of service, and 100s DTHML scripts
Visit http://www.dynamicdrive.com
*/
//1) Set the duration for the progress bar to complete loading (in seconds)
var duration=5
//2) Set post action to carry out inside function below:
function postaction(){
//Example action could be to navigate to a URL, like following:
//window.location="http://www.dynamicdrive.com"
}
///Done Editing/////////////
var clipright=0
var widthIE=0
var widthNS=0
function initializebar(){
if (document.all){
baranchor.style.visibility="visible"
widthIE=bar.style.pixelWidth
startIE=setInterval("increaseIE()",50)
}
if (document.layers){
widthNS=document.baranchorNS.document.barbackgroundNS.clip.width
document.baranchorNS.document.barNS.clip.right=0
document.baranchorNS.visibility="show"
startNS=setInterval("increaseNS()",50)
}
}
function increaseIE(){
bar.style.clip="rect(0 "+clipright+" auto 0)"
window.status="Loading..."
if (clipright<widthIE)
clipright=clipright+(widthIE/(duration*20))
else{
window.status=''
clearInterval(startIE)
postaction()
}
}
function increaseNS(){
if (clipright<202){
window.status="Loading..."
document.baranchorNS.document.barNS.clip.right=clipright
clipright=clipright+(widthNS/(duration*20))
}
else{
window.status=''
clearInterval(startNS)
postaction()
}
}
window.onload=initializebar
</script>
</head>
<body style="font-size:10.5pt">
<script language="JavaScript1.2">
if (document.all){
document.write('<div id="baranchor" style="position:relative;width:200px;height:20px;visibility:hidden;">')
document.write('<div id="barbackground" style="width:200px;height:20px;z-index:9"></div>')
document.write('<div id="bar" style="width:200px;height:20px;z-index:10"></div>')
document.write('</div>')
}
</script>
<ilayer name="baranchorNS" visibility="hide" width=200 height=20>
<layer name="barbackgroundNS" bgcolor=black width=200 height=20 z-index=10 left=0 top=0></layer>
<layer name="barNS" bgcolor=blue width=200 height=20 z-index=11 left=0 top=0></layer>
</ilayer>
</body>
</html>
来自http://www.aspxboy.com/myjs/
分享到:
相关推荐
javascript 模拟进度条
JavaScript模拟进度条,供大家一起共同分享学习。
简单用JS模拟上传进度条,没有用到后台页面,但是运行时需要服务器支持,否则会存在跨域问题。
javascript 模拟进度条
这是一个模拟的文件上传的进度条;大家可以看看
能够通过简单的html和js在页面进行进度条模拟
本文实例讲述了jquery模拟进度条实现方法。分享给大家供大家参考。...js模拟进度条练习</title> [removed][removed] <script type='text/javascript' src='http://xiazai.jb51.net/201508/yuanma/jque
js 实现 CSS+JS制作的进度条! 值得下载看看!资源免费,大家分享!!
用 Javascript 模拟的 Vista 风格进度条,程序很小,不过觉得很不错。
故这里只用js的setInterval模拟加载效果 原理就是不断改变CSS中内部一个div的宽度以此达到加载的样式效果 使用方法: 1、将CSS样式拷贝到你的网页中 2、将body中需要的代码部分拷贝到你需要的地方即可
php+js使用XMLHttpRequest通过js模拟表单提交上传视频同时实现进度条展示,上传后自动加载并播放功能。
本文实例讲述了Ajax+PHP实现的模拟进度条功能。分享给大家供大家参考,具体如下: 一 代码 fun.js: function progress(){ setInterval(beginProgress(), 200); } function beginProgress(){ $.get(progress.php,...
可以通过html以及js模拟所需的各种进度条
Js实现仪表盘 利用js模拟仪表盘的实现
javascript 模拟三维地球,并且模拟多颗卫星环绕地球轨道展示,可以拖动进度条查看卫星实时位置信息
支持PC和手机的音频播放JS,包含音频进度条,音频播放按钮,音频暂停和重播按钮。
进度条出现. 实现思路: 1.当用户点击load button执行异步请求. 调用方法 出现加载条 2.怎么实现进度条呢? 1) 在document.body 新增一个div.覆盖浏览器. 设置背景会灰色. z-index = 999. 加载的时候让用户无法...
jquery+jquery.uploadify.js插件,实现无刷新上传文件 支持ie6,模拟进度条(模拟进度条,非正式进度) 无刷新上传 ashx处理.
效果描述: 一个非常简单的纯js实现的loading动画效果 由于没有实际的进度显示 故这里只用js的setInterval模拟加载效果 原理就是不断改变CSS中内部一个div的宽度以此达到加载的样式效果 使用方法: 1、将CSS样式拷贝...
绝对的经典javascript收藏 包含了各个种类的js校验实例 web开发绝妙帮手 <br>javascript收藏 1....局部刷新 2.javascript模拟HashMap类 <br>Web测试过程中前台通用问题 说明文档下载