<html>
<head>
<title>渐变效果进度条</title>
<script language="javascript">
var i;
function go()
{
bar_width = document.getElementById("bg").clientWidth;
i = bar_width;
setTimeout('start();',300);
}
function start()
{
if(i-->0)
{
ps.style.width = i;
bn.innerHTML = Math.floor((bar_width-i)/bar_width*100)+"%";
setTimeout('start();',20);
}
}
</script>
<style type="text/css">
#bg {
filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=1, StartColorStr=#FFFF00, EndColorStr=#FF0000);
width:300px;
height:20px;
border:1px solid black;
z-index:0;
position:absolute;
}
#ps {
float:right;
background-color:#FFFF00;
width:100%;
}
#bn {
position:absolute;
text-align:center;
width:100%;
height:100%;
cursor:default;
}
</style>
</head>
<body onload="go();">
<div id="bg"><div id="ps"></div><span id="bn">0%</span></div>
</body>
</html>
<html>
<head>
<title>渐变效果进度条</title>
<script language="javascript">
var _Hex = Array("00","01","02","03","04","05","06","07","08","09",
"0A","0B","0C","0D","0E","0F","10","11","12","13","14","15","16","17","18","19",
"1A","1B","1C","1D","1E","1F","20","21","22","23","24","25","26","27","28","29",
"2A","2B","2C","2D","2E","2F","30","31","32","33","34","35","36","37","38","39",
"3A","3B","3C","3D","3E","3F","40","41","42","43","44","45","46","47","48","49",
"4A","4B","4C","4D","4E","4F","50","51","52","53","54","55","56","57","58","59",
"5A","5B","5C","5D","5E","5F","60","61","62","63","64","65","66","67","68","69",
"6A","6B","6C","6D","6E","6F","70","71","72","73","74","75","76","77","78","79",
"7A","7B","7C","7D","7E","7F","80","81","82","83","84","85","86","87","88","89",
"8A","8B","8C","8D","8E","8F","90","91","92","93","94","95","96","97","98","99",
"9A","9B","9C","9D","9E","9F","A0","A1","A2","A3","A4","A5","A6","A7","A8","A9",
"AA","AB","AC","AD","AE","AF","B0","B1","B2","B3","B4","B5","B6","B7","B8","B9",
"BA","BB","BC","BD","BE","BF","C0","C1","C2","C3","C4","C5","C6","C7","C8","C9",
"CA","CB","CC","CD","CE","CF","D0","D1","D2","D3","D4","D5","D6","D7","D8","D9",
"DA","DB","DC","DD","DE","DF","E0","E1","E2","E3","E4","E5","E6","E7","E8","E9",
"EA","EB","EC","ED","EE","EF","F0","F1","F2","F3","F4","F5","F6","F7","F8","F9",
"FA","FB","FC","FD","FE","FF");
function go()
{
setTimeout('start();',100);
}
var i=0;
function start()
{
if(i++<256)
{
ps.innerHTML += "<span style='width:1px;background-color:#FF"+_Hex[256-i]+"00;'>";
bn.innerHTML = Math.floor(i/2.56)+"%";
setTimeout('start();',10);
}
}
</script>
<style type="text/css">
#ps {
background-color:#FFFF00;
width:256px;
margin: 1px;
float:left;
}
#bn {
width:39px;
margin: 1px;
float:right;
text-align:center;
color:#FFFFFF;
font-family:Arial;
font-size:13px;
}
</style>
</head>
<body onload="go();">
<div style="background-color:black;width:300px;height:20px;"><div id="ps"></div><div id="bn"></div></div>
</body>
</html>
分享到:
相关推荐
javascript 实现的进度条效果 javascript 实现的进度条效果
用html5 javascript实现的视频自定义进度条。可以直接用到开发视频监控回放的进度条。纯javascript css html 实现。本资源已完成了视频播放的开始,暂停,调节进度等功能。
Javascript上传进度条
javascript写的两种类型的进度条,一种采用定时器,一种采用步进式,类似音量控制的。
用javascript实现进度条----
JavaScript制作进度条实例JavaScript制作进度条实例JavaScript制作进度条实例JavaScript制作进度条实例JavaScript制作进度条实例JavaScript制作进度条实例
总结的一个javascript实现的上传文件进度条
可用于站点中,使网站更加具备交互性,使用简单,直接插入原代码的相应位置即可
原生JavaScript实现进度条 JavaScript实现进度条的具体代码,供大家参考,具体内容如下 使用JavaScript实现进度条功能。 原理:通过鼠标移动事件,获取鼠标移动的距离。 步骤: (1)html 中 div 布局 (2)...
javascript 椭圆进度条效果代码! javascript 椭圆进度条效果代码!
因为项目需要,自己开发了一个测试的进度条, 共测试使用。
javascript进度条实例 进度条加载实例
用javascript 实现进度条加载大数据量的表格。在加载中不影响页面的操作。相当于多线程式的动态生成表格。
本篇文章主要介绍Javascript+CSS3实现进度条效果,可以实现给用户一个等待的过程,有需要的可以了解一下。
但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果。 HTML 首先我们要知道的是,目前没有任何浏览器可以直接获取...
使用css3来实现环形进度条,只传入百分比中的数字即可展示环形状态,可以根据具体需求进行代码修改。写在最后的:csdn不支持上传资源的编辑只能再上传一遍有sass代码的文件。。
javaScript、html实现各种样式的进度条,供参考
javascript与进度条
javascript实现文字渐变特效,很实用的代码
javascript做的数据加载进度条,只要在数据加载时调用就行