js实现进度条拖拉功能

zc19840831 2008-10-10 05:25:23

请问各位大侠:

我想用JS实现这样的功能:比如1-------10中间有类似指针的图片,在中间可来回拖拉并显示当前值,请问各位大侠该如何实现,谢谢!!!

...全文

209 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

Eagle_ice 2008-10-10

打赏
举报

楼上的代码收藏了...

mengxj85 2008-10-10

打赏
举报

贴一段以前收藏的代码吧，ASP.NET实现进度条
在网上查阅了很多相关资料，参照对比一番后自己整理了一下，做了个小例子。能够实现根据后台数据加载的进度在前台动态更新进度条、进度条在页面居中显示、在进度条内显示百分比，完成进度后隐藏进度条。个人感觉还是有一定的参考价值，贴出来先。

建立一个WEB工程，添加新项->HTML页面，命名为ProgressBar.htm，内容如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="mainWindow">
<head>
<title>无标题页</title>
<script language="javascript">
function SetPorgressBar(pos)
{
//设置进度条居中
var screenHeight = window["mainWindow"].offsetHeight;
var screenWidth = window["mainWindow"].offsetWidth;
ProgressBarSide.style.width = Math.round(screenWidth / 2);
ProgressBarSide.style.left = Math.round(screenWidth / 4);
ProgressBarSide.style.top = Math.round(screenHeight / 2);
ProgressBarSide.style.height = "21px";
ProgressBarSide.style.display = "";

//设置进度条百分比
ProgressBar.style.width = pos + "%";
ProgressText.innerHTML = pos + "%";
}

//完成后隐藏进度条
function SetCompleted()
{
ProgressBarSide.style.display = "none";
}
</script>
</head>
<body>
<div id="ProgressBarSide" style="position:absolute;height:21x;width:100px;color:Silver;border-width:1px;border-style:Solid;display:none">
<div id="ProgressBar" style="position:absolute;height:21px;width:0%;background-color:#3366FF"></div>
<div id="ProgressText" style="position:absolute;height:21px;width:100%;text-align:center"></div>
</div>
</body>
</html>
后台代码，Default.aspx.cs：
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Threading;
using System.IO;

public partial class _Default : System.Web.UI.Page
{
private void beginProgress()
{
//根据ProgressBar.htm显示进度条界面
string templateFileName = Path.Combine(Server.MapPath("."), "ProgressBar.htm");
StreamReader reader = new StreamReader(@templateFileName,System.Text.Encoding.GetEncoding("GB2312"));
string html = reader.ReadToEnd();
reader.Close();
Response.Write(html);
Response.Flush();
}

private void setProgress(int percent)
{
string jsBlock = "<script>SetPorgressBar('" + percent.ToString() + "'); </script>";
Response.Write(jsBlock);
Response.Flush();
}

private void finishProgress()
{
string jsBlock = "<script>SetCompleted();</script>";
Response.Write(jsBlock);
Response.Flush();
}

private void Page_Load(object sender, System.EventArgs e)
{
beginProgress();

for (int i = 1; i <= 100; i++)
{
setProgress(i);

//此处用线程休眠代替实际的操作，如加载数据等
System.Threading.Thread.Sleep(50);
}

finishProgress();
}
}

gdjlc 2008-10-10

打赏
举报

对啊,1楼的代码运行有错误!

a12321321321312321 2008-10-10

打赏
举报

1楼代码好像有点问题？

lupanlupan 2008-10-10

打赏
举报

沙发

shulei521 2008-10-10

打赏
举报



<html>

 <head>

 <title>进度条</title>

 <style type="text/css">

    .bgBar{

               background: #FFFFFF;

               

               border: 1px solid #000000;

               font-size: 17;

               font-weight: bold;

   }

   .bgBar div{

               background: #DAECC8;

          border: 1px solid #FFFFFF;

          color: #308040;

          text-align: right;

         overflow: hidden;

   }

 </style>

 <script type="text/javascript">

    //下面代码为进度条的封装

    if (syj == null) var syj = {};

    //进度条parent进度条的父控件对象,barClass进度条的css,display是否显示

    syj.ProgressBar=function(parent, width , barClass, display) {

               this.parent=parent;

              this.pixels = width;

             this.parent.innerHTML="<div/>";

             this.outerDIV = this.parent.childNodes[0];

                 this.outerDIV.innerHTML="<div/>";

                 this.fillDIV = this.outerDIV.childNodes[0];

               this.fillDIV.innerHTML = "0";

               this.fillDIV.style.width = "0px";

               this.outerDIV.className = barClass;

               this.outerDIV.style.width = (width + 2) + "px";

               this.parent.style.display = display==false?'none':'';

   }

   //更新进度条进度 pct的值要介于0和1之间

   syj.ProgressBar.prototype.setPercent = function(pct) {

           var fillPixels;

           if (pct < 1.0){

                    fillPixels = Math.round(this.pixels * pct);

          }

          else {

                 pct = 1.0;

                    fillPixels = this.pixels;

          }

          this.fillDIV.innerHTML = Math.round(100 * pct) + "%";

          this.fillDIV.style.width = fillPixels + "px";

    }

   //控制进度条的显示/隐藏

   syj.ProgressBar.prototype.display= function(v){

         this.parent.style.display = v==true?'':'none';

   }

   //初始化进度条

   function init(){

window.jtProBar = new syj.ProgressBar(document.getElementById("p   rogressBar"), 450 , "bgBar");

    } 

    //开始演示

    function startAutoDemo(){

            if(window.thread==null)

                    window.thread=window.setInterval("updatePercent()",60);

    }

    //停止演示

    function stopAutoDemo(){

          window.clearInterval(window.thread);

        window.thread=null;

    }

    //演示程序

    function updatePercent(){

          if(window.count==null)window.count=0;

          window.count=count%100

          jtProBar.setPercent(window.count/100);

          window.count++;

    }

 </script>

</head>

<body onload="init()">

 <input type="button" value="100%效果" onclick="window.stop=false;jtProBar.setPercent(1);"/>

 <input type="button" value="开始自动演示" onclick="startAutoDemo()"/>

 <input type="button" value="停止自动演示" onclick="stopAutoDemo()"/>

 <input type="button" value="显示" onclick="jtProBar.display(true)"/>

 <input type="button" value="隐藏" onclick="jtProBar.display(false)"/>

 <!-- 进度条的父控件 -->

 <div id="progressBar"></div>

 </body>

</html>