`
aiyanbo
  • 浏览: 65422 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

js进度条

JavaScriptHTML 
阅读更多

进度条是用来表示：某件事完成量的百分比，有很多情况下我们都会用到它！

 

我用js代码写了一个进度条，样式可能不是很漂亮！为了进度量不是一个等差数列，我用随机数来做进度数列的差值

 

下是代码：（还望朋友们指正！）

 

<html>
<head>
	<title>js 进度条</title>
</head>
<body>
	<p align="center">
	<span id="show" style="border:1px solid red;width:800px;height:30px;">
		<hr id="bar" align="left" style="height:30px;width:0px;" color="red">
	</span>
	<span id="total"></span>
	</p>
</body>
	<script language="JavaScript">
		var per=0;
		function run(){
			per+=parseInt(Math.random()*1000000%20);
			document.getElementById("bar").style.width=per;
			if(per>=800)per=800;
			document.getElementById("total").innerHTML=parseInt((per/800)*100)+'%';
			if(per>=800){
				clearTimeout(timeout);
				return;
			}
			var timeout=setTimeout("run()",100);
		}
		onload=run();
	</script>
</html>

 

 

下面是附件，朋友们可以下载下来看看效果！

 

 

1
顶
0
踩
分享到：
| 网页版 家庭骰子
评论
1 楼 aiyanbo 2010-02-18  
    近日，本人发现了  进度条在火狐中跑不起来！对不起，在改进中。。。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript进度条实例 进度条加载实例

    javascript进度条实例 进度条加载实例

    nanobar-轻量级纯js进度条插件.zip

    `nanobar.js` 是一个专门为这个目的设计的轻量级、纯 JavaScript 的进度条插件。它具有小巧的体积，对旧版本浏览器（如 IE8）的良好兼容性，以及易于使用和自定义的特点，使得开发者能够轻松地在项目中集成进度条...

    js进度条大全，总有一款适合您

    3. `CProgress.js`：这可能是一个JavaScript库，专门用于创建进度条。它可能包含了一系列的函数和方法，用于初始化、更新、控制进度条的显示，以及处理各种事件。 4. `ReadMe.txt`：这是一个常见文件，通常包含了...

    JS进度条类模块示例

    总结起来，"JS进度条类模块示例"展示了如何利用JavaScript类来实现可复用的进度条组件。通过实例化多个类对象，我们可以创建页面上的多个独立进度条，同时通过类的方法来控制它们的进度和显示，为用户提供实时的进度...

    JS导excl和js进度条

    在JavaScript（JS）开发中，有时我们需要处理与Excel文件的交互以及实现动态进度条功能。本文将详细探讨这两个主题，并提供相关的技术要点和实践方法。 首先，让我们关注JS导出Excel这一需求。在Web应用程序中，...

    12个JavaScript 进度条

    JavaScript 进度条是网页应用中常见的用户界面元素，用于展示任务或数据加载的进度，为用户提供实时反馈。在Web开发中，它们可以应用于文件上传、视频缓冲、数据下载等多种场景，提高用户体验。本资源包包含了12种...

    简单的js进度条

    简单的js进度条，在网络加载时使用，做过渡效果 ，非常适合新手学习参考

    js完美进度条，做效果的不二选择

    通过上述方法，我们可以创建一个高度可定制且功能强大的JavaScript进度条组件，适用于各种网页应用。无论是在文件上传、数据加载还是长时间运算的场景中，都能提供优秀的用户体验。这个"js完美进度条"的实现，无疑是...

    JavaScript 进度条

    JavaScript 进度条 用IE打开 JavaScript 进度条 用IE打开 JavaScript 进度条 用IE打开

    JS进度条，实现同步增长效果

    JavaScript（简称JS）是一种轻量级的脚本语言，广泛应用于网页和网络应用开发，包括交互性、动态更新以及各种视觉效果的实现。在本文中，我们将深入探讨如何使用JavaScript来创建一个进度条，并实现同步增长的效果。...

    js进度条 js

    "js进度条 js"指的是利用JavaScript来实现这种动态效果的技术。JavaScript作为客户端脚本语言，允许我们动态地更新页面内容，包括创建和控制进度条的显示和变化。 进度条的实现方式多种多样，但核心原理通常涉及...

    谷歌Material Design风格纯JS进度条插件

    MProgress.js是一款谷歌Material Design风格纯JS进度条插件。该进度条通过纯JS和CSS3来制作，没有外部依赖库。你可以通过MProgress.js制作出4种不同类型的Material Design风格进度条效果。

    通过js实现百分比进度条

    本篇文章将深入探讨如何使用JavaScript（JS）、HTML和CSS来实现一个动态的百分比进度条。首先，我们需要理解这三种技术在构建进度条中的角色。 **HTML**：HTML（超文本标记语言）用于构建页面的基本结构。在这里，...

    JavaScript进度条

    JavaScript进度条是网页交互设计中常见的一种元素，用于表示任务的完成程度或数据加载状态，类似于在用友软件中看到的进度指示。这种组件能够提升用户体验，让用户了解操作的进度，减少用户等待的不确定性。本篇文章...

    javascript进度条

    JavaScript 进度条是一种在网页上显示任务进度的可视化组件，通常用于文件上传、数据加载或其他需要用户等待的异步操作。它可以帮助用户了解当前操作的状态，提高用户体验。本篇文章将深入探讨如何使用 JavaScript ...

    通用上传控件JS进度条源码20121224

    通用上传控件JS进度条源码 源码描述： 开发环境：vs2012（源代码复制到其他版本vs也可以用） 浏览器兼容：全部，需要支持Silverlight 技术特点： 单、多文件上传,js进度条，同页面支持无限个 功能描述： 同页面...

    javascript 进度条

    ### JavaScript 进度条知识点详解 #### 一、概述 在网页开发中，为了提高用户体验，经常需要在页面上展示一些动态效果，如加载动画、进度条等。本篇文章将重点介绍如何使用JavaScript来实现一个客户端进度条。通过...

    Javascript进度条

    JavaScript 进度条是一种在网页上显示数据加载或处理...以上就是关于“JavaScript进度条”的相关知识点。在实际开发中，还需要考虑性能优化、错误处理以及不同浏览器的兼容性，以确保进度条在各种环境下都能正常工作。

Magicbox
Global site tag (gtag.js) - Google Analytics