jQuery实现的进度条效果代码,JS代码库,德仔网

代码语言

代码分类

【JS】 jQuery实现的进度条效果

作者:达达的梦想2013 / 发布于2015/7/16/ 570


	<!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>
	原理就是使用 Javascript 控制 SPAN CSS 的宽度（以及其他的样式），刷新查看
	<div id="progress"><span></span></div>
	</body>
	</html>

试试其它关键字

　进度条　　效果　

同语言下

可能有用的

达达的梦想2013贡献的其它代码(6)