jQuery实现的进度条效果(未测试)
来源:互联网 发布:linux下多线程机制 编辑:程序博客网 时间:2024/05/31 18:49
[JavaScript]代码
<!DOCTYPE html><html><head><meta charset="utf-8"><title>进度条效果</title><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><style type="text/css">#progress { background:white; height:20px; padding:2px; border:1px solid green; margin:2px;}#progress span { background:green; height:16px; text-align:center; padding:1px; margin:1px; display:block; color:yellow; font-weight:bold; font-size:14px; width:0%;}</style><script type="text/javascript"> var progress_node_id = "progress"; function SetProgress(progress) { if (progress) { $("#" + progress_node_id + " > span").css("width", String(progress) + "%"); $("#" + progress_node_id + " > span").html(String(progress) + "%"); } } var i = 0; function doProgress() { if (i > 100) { alert("Progress Bar Finished!"); return; } if (i <= 100) { setTimeout("doProgress()", 500); SetProgress(i); i++; } } $(document).ready(function() { doProgress(); }); </script></head><body><h1>jQuery实现进度条效果代码</h1><p>原理就是使用 Javascript 控制 SPAN CSS 的宽度(以及其他的样式),刷新查看</p><div id="progress"><span></span></div></body></html>
0 0
- jQuery实现的进度条效果(未测试)
- jQuery实现的进度条效果
- jQuery监听文件上传实现进度条效果
- jQuery监听文件上传实现进度条效果
- jQuery监听文件上传实现进度条效果
- jQuery监听文件上传实现进度条效果
- JS实现花瓣网轮播图效果(未测试)
- 基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
- jQuery 实现 点击按钮后倒计时效果,多用于实现发送手机验证码、邮箱验证码(未测试)
- 飘逸的python - 实现控制台进度条效果
- 炫酷的进度条效果实现
- 实现 进度条效果 实例
- js实现进度条效果
- ext 实现进度条效果
- JS实现进度条效果
- JS实现进度条效果
- 实现进度条效果
- 实现一个进度条效果
- git push常用命令
- 11. Container With Most Water
- sql---distinct函数用法
- 如何使用rem单位
- bzoj2115
- jQuery实现的进度条效果(未测试)
- Rightmost Digit
- Android富文本编辑器RichEditor的使用
- ios developer tiny share-20160721
- sizeof用法总结
- 【算法】堆,最大堆(大顶堆)及最小堆(小顶堆)的实现
- 点击button然后改变其中文字的颜色
- windows构建socket前需要加载WinSock库
- Cannot run program “gradle” in Jenkins