编程 Javascript

jQuery实现进度条效果代码

Posted in Javascript onDecember 17, 2015

在某些特定的场景下，应用进度条效果，可以提高网站的人性化程度，能够让用户能够掌握进度，增加对进度的耐心，否则可能直接导致关闭页面，从来导致网站流失用户，下面就是用过jQuery实现的进度效果代码。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>jQuery进度条效果代码</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.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>

以上就是jQuery实现进度条效果代码，希望对大家的学习jquery程序设计有所帮助

jQuery实现进度条效果代码

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

对new functionName()定义一个函数的理解

May 22 Javascript

Javascript获取当前日期的农历日期代码

Oct 08 Javascript

Jquery网页内滑动缓冲导航的实现代码

Apr 05 Javascript

整理JavaScript创建对象的八种方法

Nov 03 Javascript

深入解析JavaScript编程中的this关键字使用

Nov 09 Javascript

javascript返回顶部的按钮实现方法

Jan 09 Javascript

手机端js和html5刮刮卡效果

Sep 29 Javascript

移动端界面的适配

Jan 11 Javascript

Vuex的初探与实战小结

Nov 26 Javascript

关于vue-cli 3配置打包优化要点（推荐）

Apr 22 Javascript

浅析vue中的provide / inject 有什么用处

Nov 10 Javascript

javascript自定义加载loading效果

Sep 15 Javascript

JavaScript创建对象的方式小结(4种方式)

Dec 17 #Javascript

javascript日期格式化方法小结

Dec 17 #Javascript

javascript中Date format(js日期格式化)方法小结

Dec 17 #Javascript

js实现下拉列表选中某个值的方法(3种方法)

Dec 17 #Javascript

详解js图片轮播效果实现原理

Dec 17 #Javascript

js和jquery分别验证单选框、复选框、下拉框

Dec 17 #Javascript

jQuery+CSS实现滑动的标签分栏切换效果

Dec 17 #Javascript