CSS+JS打造带渐变的进度条
- 高洛峰asal
- 2016-12-16 16:50:221450semak imbas
一个网页进度条，运行于CSS将进度条美化为渐变色，同进使用JavaScript控制CSS对进度条背景进行适时平铺，演示程序仅演示了进度条的样式，应用到网页还需要继续修改。
<html>
<head>
<title>CSS+JS打造带渐变的进度条</title>
<style>
#load{width:500px;height:25px;border:1px #000 solid;}
#loading{position:absolute;z-index:2;height:23;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=#39867b);}
#loadtext{position:absolute;z-index:3;width:100%;height:100%;line-height:23px;text-align:center;}
</style>
</head>
<body>
<div id="load"><div id="loading"></div><div id="loadtext">1%</div></div>
<script>
var i=0;
function test(){
i++;
document.getElementById("loading").style.width = i + "%";
document.getElementById("loadtext").innerText = i + "%";
if(i<100)setTimeout("test()",200);
}
setTimeout("test()",200);
</script>
</body>
</html>更多CSS+JS打造带渐变的进度条相关文章请关注PHP中文网！
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Jquery Ajax自定义提交表单Form 无刷新Artikel seterusnya：PHP 高手之路（一）