编程 Javascript

jQuery实现的进度条效果

Posted in Javascript onJuly 15, 2015

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

<!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>

以上代码实现了常用的进度条效果，在进度条推进的时候有百分比标注，非常的人性化。

jQuery实现的进度条效果

- Author -

hebedich

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

Javascript 相关文章推荐

JObj预览一个JS的框架

Mar 13 Javascript

Extjs EditorGridPanel中ComboBox列的显示问题

Jul 04 Javascript

jQuery原型属性和原型方法详解

Jul 07 Javascript

详解AngularJS中的filter过滤器用法

Jan 04 Javascript

使用BootStrap实现用户登录界面UI

Aug 10 Javascript

JavaScript中各数制转换全面总结

Aug 21 Javascript

从零开始最小实现react服务器渲染详解

Jan 26 Javascript

利用hasOwnProperty给数组去重的面试题分享

Nov 05 Javascript

vue-cli3 项目从搭建优化到docker部署的方法

Jan 28 Javascript

package.json各个属性说明详解

Mar 11 Javascript

JS遍历树层级关系实现原理解析

Aug 31 Javascript

鸿蒙系统中的 JS 开发框架

Sep 18 Javascript

jQuery中(function($){})(jQuery)详解

Jul 15 #Javascript

jQuery的事件委托实例分析

Jul 15 #Javascript

jQuery的end()方法使用详解

Jul 15 #Javascript

浅谈$(document)和$(window)的区别

Jul 15 #Javascript

浅谈window对象的scrollBy()方法

Jul 15 #Javascript

jQuery的bind()方法使用详解

Jul 15 #Javascript

纯JavaScript实现的分页插件实例

Jul 14 #Javascript