一个已封装好的漂亮进度条

2024-10-20 11:46:07

代码如下:

</body>
<script>
document.execCommand("BackgroundImageCache",false,true);

function ProcessBar(){
   this.width = 256;
   this.height = 18;
   this.top = 0;
   this.left = 0;
   this.backImg = "process_back.gif";
   this.foreImg = "process.gif";
   this.backDiv = document.createElement("div");
   this.foreDiv = document.createElement("div");
   this.fontDiv = document.createElement("div");

this.isMoving = false;
   this.nowLength = 0;
   this.moveInterval = 100;
   this.moveRange = 1;
   this.timer;

ProcessBar.nowObj = this;

this.init = function(){
        this.foreDiv.style.backgroundImage = "url(" + this.foreImg + ")";
        this.foreDiv.style.backgroundRepeat = "no-repeat";
        this.foreDiv.style.position = "absolute";
        this.foreDiv.style.width = this.nowLength;
        this.foreDiv.style.height = this.height;
        this.foreDiv.style.top = 0;
        this.foreDiv.style.left = 0;

this.fontDiv.style.background = "transparent";
        this.fontDiv.style.position = "absolute";
        this.fontDiv.style.width = this.width;
        this.fontDiv.style.height = this.height;
        this.fontDiv.style.top = 2;
        this.fontDiv.style.left = 0;
        this.fontDiv.style.textAlign = "center";
        this.fontDiv.style.fontSize = "13px";
        this.fontDiv.appendChild(document.createTextNode(" "));

this.backDiv.style.backgroundImage = "url(" + this.backImg + ")";
        this.backDiv.style.backgroundRepeat = "no-repeat";
        this.backDiv.style.position = "absolute";
        this.backDiv.style.width = this.width;
        this.backDiv.style.height = this.height;
        this.backDiv.style.top = this.top;
        this.backDiv.style.left = this.left;

this.backDiv.appendChild(this.foreDiv);
this.backDiv.appendChild(this.fontDiv);

document.body.appendChild(this.backDiv);
}

this.changeMode = function(){
this.isMoving = !this.isMoving;

if(this.isMoving){
            this.timer = window.setInterval(ProcessBar.nowObj.moving, this.moveInterval);
        }else{
            window.clearInterval(this.timer);
        }
   }

this.moving = function(){
ProcessBar.nowObj.nowLength += ProcessBar.nowObj.moveRange;
ProcessBar.nowObj.foreDiv.style.width = ProcessBar.nowObj.nowLength;

ProcessBar.nowObj.fontDiv.firstChild.data = Math.ceil((ProcessBar.nowObj.nowLength/ProcessBar.nowObj.width )*100) + "%";

if(ProcessBar.nowObj.nowLength >= ProcessBar.nowObj.width ){
            window.clearInterval(ProcessBar.nowObj.timer);
            ProcessBar.nowObj.fontDiv.firstChild.data = "Complete!";
        }
   }

}

var processBar = new ProcessBar();
processBar.backImg = "/upload/2007415102314868.gif"; processBar.foreImg = "/upload/2007415102319734.gif"; processBar.top = 100;
processBar.left = 20;
processBar.init();
</script>

document.execCommand("BackgroundImageCache",false,true);

function ProcessBar(){
this.width = 256;
this.height = 18;
this.top = 0;
this.left = 0;
this.backImg = "process_back.gif";
this.foreImg = "process.gif";
this.backDiv = document.createElement("div");
this.foreDiv = document.createElement("div");
this.fontDiv = document.createElement("div");

this.isMoving = false;
this.nowLength = 0;
this.moveInterval = 100;
this.moveRange = 1;
this.timer;

ProcessBar.nowObj = this;

this.init = function(){
this.foreDiv.style.backgroundImage = "url(" + this.foreImg + ")";
this.foreDiv.style.backgroundRepeat = "no-repeat";
this.foreDiv.style.position = "absolute";
this.foreDiv.style.width = this.nowLength;
this.foreDiv.style.height = this.height;
this.foreDiv.style.top = 0;
this.foreDiv.style.left = 0;

this.fontDiv.style.background = "transparent";
this.fontDiv.style.position = "absolute";
this.fontDiv.style.width = this.width;
this.fontDiv.style.height = this.height;
this.fontDiv.style.top = 2;
this.fontDiv.style.left = 0;
this.fontDiv.style.textAlign = "center";
this.fontDiv.style.fontSize = "13px";
this.fontDiv.appendChild(document.createTextNode(" "));

this.backDiv.style.backgroundImage = "url(" + this.backImg + ")";
this.backDiv.style.backgroundRepeat = "no-repeat";
this.backDiv.style.position = "absolute";
this.backDiv.style.width = this.width;
this.backDiv.style.height = this.height;
this.backDiv.style.top = this.top;
this.backDiv.style.left = this.left;

this.backDiv.appendChild(this.foreDiv);
this.backDiv.appendChild(this.fontDiv);

document.body.appendChild(this.backDiv);
}

this.changeMode = function(){
this.isMoving = !this.isMoving;

if(this.isMoving){
this.timer = window.setInterval(ProcessBar.nowObj.moving, this.moveInterval);
}else{
window.clearInterval(this.timer);
}
}

this.moving = function(){
ProcessBar.nowObj.nowLength += ProcessBar.nowObj.moveRange;
ProcessBar.nowObj.foreDiv.style.width = ProcessBar.nowObj.nowLength;

ProcessBar.nowObj.fontDiv.firstChild.data = Math.ceil((ProcessBar.nowObj.nowLength/ProcessBar.nowObj.width)*100) + "%";

if(ProcessBar.nowObj.nowLength >= ProcessBar.nowObj.width){
window.clearInterval(ProcessBar.nowObj.timer);
ProcessBar.nowObj.fontDiv.firstChild.data = "Complete!";
}
}

}

var processBar = new ProcessBar();
processBar.width=327
processBar.backImg = "/upload/2007415102319929.jpg"; processBar.foreImg = "/upload/2007415102319777.jpg"; processBar.top = 100;
processBar.left = 20;
processBar.init();

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

一个已封装好的漂亮进度条

复制代码代码如下: <body> <input type="button" value="start" onclick="processBar.changeMode();if(processBar.isMoving){this.value='Stop';}else{this.value='Start';}"> </body> <script> document.execCommand("
一个原生的用户等级的进度条

本人对后台不是太了解,所以这里做成了用户自己输入参数的办法来模拟从后台读参数的过程. 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="content" content="text/html charset=gb2312"> <style type="text/css"> *{margin:0; padding:0;}
Android 进度条使用详解及示例代码

在这里,总结一下loading进度条的使用简单总结一下. 一.说起进度条,必须说说条形进度条,经常都会使用到嘛,特别是下载文件进度等等,还有像腾讯QQ安装进度条一样,有个进度总给人良好的用户体验. 先来找图看看,做这个图完成不用图片就可以做到了. 看下xml布局文件,其实就是直接用xml写的在加两个属性设置一下就好了,一个style,另一个是background. <ProgressBar android:id="@+id/pb_progressbar" style="
Android 实现自定义圆形进度条的功能

Android 实现自定义圆形进度条: Android 自定义view,在大多数项目中根据客户需求及用户的体验度来说,都要重新写控件的来展示漂亮的界面,这里就对圆形进度条说下如何实现. 绘制自定义的圆形进度条,分为三个步骤,内圆.外圆.文字. 其中内圆和文字比较好绘制,进度条的变化是由外圆来控制的,所以核心就是绘制外圆. 首先定义分别定义这三个画笔,两个Paint和一个TextPaint mCirclePaint = new Paint(); mCirclePai
微信小程序之圆形进度条实现思路

需求概要小程序中使用圆形倒计时,效果图: 思路使用2个canvas 一个是背景圆环,一个是彩色圆环. 使用setInterval让彩色圆环逐步绘制. 解决方案第一步先写结构一个盒子包裹2个canvas以及文字盒子: 盒子使用相对定位作为父级,flex布局,设置居中: 一个canvas,使用绝对定位作为背景,canvas-id="canvasProgressbg" 另一个canvas,使用相对定位作为进度条,canvas-id="canvasProgress"
Android实现百分比下载进度条效果

现在很多APP中都会集成下载功能,所以有一个方便好看又实用的进度条来展示下载进度很有必要,也能提高用户体验,在这里我就把项目里的下载进度条抽取出来分享给大家,话不多说,先看效果图: 这个进度条是自定义的一个View,其中有一个自定义属性就是百分比文字的大小(也可以把那两条显示颜色的进度条自定义属性,这里就没有实现,在代码里面写的). 先说说实现原理: 1:由于自定义了属性,所以先获取属性的值. 2:绘制底色那条灰色的线. 3:根据传入的数据计算当前百分比,然后绘制那条橘黄色的线. 4:再在橘黄色
iOS快速实现环形渐变进度条

前言进度条相信我们大家都不陌生,往往我们很多时候需要使用到圆形进度条.这篇文章给大家分享了利用iOS如何快速实现环形进度条,下面来一起看看. 一:先制作一个不带颜色渐变的进度条自定义一个cycleView,在.m 中实现drawRect方法 - (void)drawRect:(CGRect)rect { CGContextRef ctx = UIGraphicsGetCurrentContext();//获取上下文 CGPoint center = CGPointMake(100, 100)
用CSS+JS实现的进度条效果效果

进度条,就是在用户进入你的网站的时候,能让用户看到网页下载了多少,这个的作用非常明显---就是让用户的等待时间变长,可以有效的弥补空间慢的缺点(当然,你空间太慢,还是建议你换下空间,呵呵) 好了,现在我先来举两个例子一个是用FLASH实现的 (这个网上很多网站都是,不说了) 一个是用动态的GIF实现的 (这个你可以看微软官方的下载页面,也不说了) 这里,我们的重点是用 CSS+JS 实现这个效果好了,废话不多说,我们开始首先,写一段HTML代码 <div id="loading&qu
Android开发之ProgressBar字体随着进度条的加载而滚动

在网上翻阅了很多关于ProgressBar滚动效果,但是始终没有找到适合项目中的这种效果,故自己写这篇文章,记录一下写作过程,给大家做一个参考.先看下最终效果效果图我这里用的是LICEcap软件录制的gif图,效果有点掉帧,哪位仁兄有比较好的录制gif的软件烦请相告,小弟在此先行谢过. 首先看下xml代码,只有两个系统控件,一个TextView和一个ProgressBar,Button只是为了方便触发进度条的效果,实际项目中可以根据需求来做.首先看下xml中的代码: <?xml version
JS实现进度条顺滑版详细方案

进度条不顺滑相信大多前端同学都自己写过音频.视频播放器,实现并不复杂.最近在小程序里,做了一个类似微博刷视频的需求.其中有一部分功能需要实现自定义进度条,在做完第一版之后发现进度条不顺滑,而后想查查网上看有没有什么好的方案,但最终没找到合适的.于是想看看微信小程序里的"微博"进度条如何,结果也是很生硬的动画,下面放了一个GIF,大家也可以自己搜索微信小程序的微博,找个视频看看效果. 常规方案最终决定还是优化一下这个问题,先来捋一捋我们现有常规方案. 监听TimeUpdate事件获

一个已封装好的漂亮进度条

相关推荐

随机推荐