进度条(可拖动,可定义)

在工作中,有一个进度条的效果,左边是一个input,两者存在着密不可分的联系,引用的插件却出现了点小BUG,一怒之下自己写了一个。

HTML

    <div>
        <input type="text" id="input" value="" placeholder="0" autocomplete="off">%
        <div id="tiao">
            <div id="yuan"></div>
            <div id="jindu"></div>
        </div>
    </div>

CSS

    html,body{
            height: 100%;
        }
        body{
            margin: 0;
        }
        body>div{
            padding-top: 60px;
            margin-left: 60px;
        }
        #tiao{
            display: inline-block;
            width: 200px;
            height: 4px;
            background: #ddd;
            border-radius: 3px;
            position: relative;
            margin-left: 50px;
        }
        input{
            border: 1px solid #ddd;
            width: 100px;
            text-align: center;
            vertical-align: top;
        }
        #yuan{
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50% 50%;
            background: #177ad8;
            position: absolute;
            margin-top: -4px;
            cursor: pointer;
            box-shadow: 0px 0px 3px #177ad8;
        }
        #jindu{
            width: 0px;
            height: 4px;
            background-color: #177ad8;
            border-radius: 3px;
        }

JS

    var scale =function(input,yuan,jindu,tiao){
        this.input =document.getElementById(input);
        this.yuan =document.getElementById(yuan);
        this.jindu=document.getElementById(jindu);
        this.tiao=document.getElementById(tiao);
        this.tiaoW =this.tiao.offsetWidth;
        this.init()
    }
    scale.prototype ={
        init: function(){
            var isfalse =false,
                f = this,
                m = Math,
                b = document.body,
                minValue =0,
                maxValue =100;

            f.yuan.onmousedown =function(e){
                isfalse =true;
                var X =e.clientX;
                var offleft =this.offsetLeft;
                var max = f.tiao.offsetWidth - this.offsetWidth;

                b.onmousemove =function(e){
                    if (isfalse == false){
                        return;
                    }
                    var changeX= e.clientX;
                    var moveX =m.min(max,m.max(-2,offleft+(changeX-X)));
                    f.input.value =m.round(m.max(0,moveX / max) * 100);
                    f.yuan.style.marginLeft =m.max(0, moveX) +"px";
                    f.jindu.style.width =moveX +"px";
                }
            }
            b.onmouseup =function(){
                isfalse =false;
            }

            f.input.onblur =function(){
                var theV =this.value*1;
                if(theV >maxValue || theV <minValue){
                    alert("输入的数值不正确");
                    f.input.value ="";
                    f.yuan.style.marginLeft ="0px";
                    f.jindu.style.width ="0px";
                    return;
                }
                var xxx =theV/100*f.tiaoW;
                f.yuan.style.marginLeft =xxx +"px";
                f.jindu.style.width =xxx +"px";
            }
        }
    }

    new scale("input","yuan","jindu","tiao");

封装了一下,感觉更麻烦了。。。每次封装都有这样的感觉,毕竟小菜鸟一枚,若是有更优化的方法望看到的园友指正。。。

关于数学,关于逻辑,都是我的弱势,思考起来常常脑海一片混乱,所以自己在编写的时候也会加上注释,放一波代码

    var input =document.getElementById("input");
    var yuan =document.getElementById("yuan");
    var jindu =document.getElementById("jindu");
    var tiao =document.getElementById("tiao");
    var tiaoW =tiao.offsetWidth;

    function schedule(){

        var isfalse =false; //控制滑动

        yuan.onmousedown =function(e){
            isfalse =true;

            var X =e.clientX; //获取当前元素相对于窗口的X左边

            var offleft =this.offsetLeft; //当前元素相对于父元素的左边距

            var max = tiao.offsetWidth - this.offsetWidth; //宽度的差值

            document.body.onmousemove=function(e){
                if (isfalse == false){
                    return;
                }
                var changeX= e.clientX; //在移动的时候获取X坐标

                var moveX =Math.min(max,Math.max(-2,offleft+(changeX-X))); //超过总宽度取最大宽
                input.value =Math.round(Math.max(0,moveX / max) * 100);
                yuan.style.marginLeft =Math.max(0, moveX) +"px";
                jindu.style.width =moveX +"px";
            }
        }
        document.body.onmouseup =function(){
            isfalse =false;
        }

        var minValue =0;
        var maxValue =100;
        input.onblur =function(){
            var theV =this.value*1;
            if(theV >maxValue || theV <minValue){
                alert("输入的数值不正确");
                input.value ="";
                jindu.style.width ="0px";
                yuan.style.marginLeft ="0px";
                return;
            }
            var xxx =theV/100*tiaoW;
            yuan.style.marginLeft =xxx +"px";
            jindu.style.width =xxx +"px";
        }
    }
    schedule();

这个看起来易懂点。。。

时间: 2024-10-12 15:31:57

进度条(可拖动,可定义)的相关文章

android 14 进度条和拖动条

进度条: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ProgressBar 默认进度条 andr

进度条与拖动条的使用学习

(一)进度条 常用属性详解: android:max:进度条的最大值android:progress:进度条已完成进度值android:progressDrawable:设置轨道对应的Drawable对象android:indeterminate:如果设置成true,则进度条不精确显示进度android:indeterminateDrawable:设置不显示进度的进度条的Drawable对象android:indeterminateDuration:设置不精确显示进度的持续时间android:s

iOS实现自定义进度条、拖动条效果,可多个

项目用到的一个场景,需要设置一个周期内不同时间时的数值 比如要设置10秒内,每一秒的大小,通过10个拖动条来设置实现,只需拖动到想要的数值即可, 这里周期10秒和每个拖动条的最大值都是可以自己定义的. 动态图效果见图片. Demo网址:http://code.cocoachina.com/view/129908

Android View 之进度条+拖动条+星级评论条....

PS:将来的你会感谢现在奋斗的自己.... 学习内容: 1.进度条 2.拖动条 3.星级评论条 1.进度条...       进图条这东西想必大家是很熟悉的...为了使用户不会觉得应用程序死掉了,因此为之设置一个进度条使应用程序的运行状态更好的反馈给客户...这也就是进度条的作用...因此一般的应用程序都会加入进度条...进度条分为圆形进度条和线性的进度条...目的都是一样的,只是展示的效果是不同的...用代码讲解一下... <LinearLayout xmlns:android="htt

Android零基础入门第51节:进度条ProgressBar

不知不觉这已经是第51期了,在前面50期我们学了Android开发中使用频率非常高的一些UI组件,当然这些组件还不足够完成所有APP的开发,还会经常用到一些诸如进度条.拖动条.搜索框.时间和日期选择器等组件,那么后面几期就来一起学习这些高级组件. 一.ProgressBar系列组件 ProgressBar也是一组重要的组件,ProgressBar本身代表了进度条组件,它还派生了两个常用的组件:SeekBar和RatingBar.ProgressBar及其子类在用法上十分相似,只是显示界面有一定的

OpenCV GUI基本操作,回调函数,进度条,裁剪图像等

代码为转载,出处找不到了,不贴了 工具条进度条: // ConvertColor.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp> #pragma comment(lib,"opencv_core2410d.l

【JavaScript】HTML5/CSS3实现五彩进度条应用

今天要介绍的是一款基于HTML5和CSS3的进度条应用,这款进度条是静态的,仅提供进度条的五彩外观.当然你可以在CSS中动态设置进度值来让其变得动态,一个很好的实现方式是利用jQuery动态改变CSS中的进度值,让进度条实时动起来.具体效果大家可以看演示. 你也可以在这里查看在线演示 接下来我们来分析一下这款进度条的源代码以及实现思路,代码主要由HTML和CSS组成,如果你需要动态改变进度值,也可以自己添加Javascript代码,也是比较简单的. HTML代码: <section class=

制作进度条(UISlider)

怎样判断是否应当使用进度条 用进度条的主要目的是为了用一根管子的充满程度来直观地表示某种数值的百分比,进度条分为可拖动和不可拖动两种. 可拖动进度条和不可拖动进度条的原理几乎是一模一样,唯一的区别是可拖动进度条上多了一个拖动快和BoxCollider来接收事件,而不可拖动的进度条只能显示一个数字的百分比,无法由玩家去操控. 在判断是否应该使用进度条时,有以下的规律可以遵循: (1)如果某一种值,它有最大值,需要表达它当前的值的占比,这个时候用进度条会非常直观.此时应当用不可拖动的进度条.例如:角

控制SeekBar进度条来同时触发ProgressBar

1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:tools="http://schemas.android.com/tools" 4 android:layout_width="match_parent

View(视图)———进度条

一.分类 1.不可拖动  ProgressBar 2.可拖动 1>SeekBar 2>RatingBar 二.ProgressBar 1.style  样式 1>水平 ?android:attr/progressBarStyleHorizontal; 2>旋转 1-默认样式 2-设置大小 ?android:attr/progressBarStyleLarge; 2.水平进度条 1>progress  当前进度 2>max  最大进度 3>secondaryProg