zoukankan      html  css  js  c++  java
  • 如何设置一个好看的进度条,支持回显默认值

    项目需要,在网上 招了一个进度条,但是甲方粑粑觉得视觉效果不好,我。。。没办法,谁让人家是甲方呢,我改,经过前段同事的帮助,终于搞出来了一个相对来说还阔以的进度条,记录下来,希望有所帮助。特别感觉前辈们的分享,如有错误,敬请指教

    第一步:先创建div

    <div style="300px;">
                <div class="jinduCoat">
                    <p id="default" value="20">默认值:20</p>
                    <span class="bars_10" id="max" style="float: right; font-weight: bold;" value="50">最大</span>
                    <span class="bars_10" id="min" style="font-weight: bold;" value="0">最小</span>
                    <div id="jindutiao">
                        <div class="lang"></div>
                        <input type="range" value="0" id="range" style=" 100%;">
                        <input type="hidden" value="" id="current">
                    </div>
                    <p style="color: #333; font-size: 16px; text-align: center; margin-top: 20px; margin-bottom: 0;">
                                当前值:<span id="title0">20</span>
                            </p>
                </div>
            </div>
    View Code

    第二步:设置css样式和js

    #range {
        background-color:transparent;
        -webkit-appearance: none;
        width: 300px;
        border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
        
    }
    #range::-webkit-slider-thumb {
        -webkit-appearance: none;
    }  
    #range::-webkit-slider-runnable-track {
        height: 10px;
        background: transparent;
        border: 0;
        /* border-radius: 10px; 将轨道设为圆角的 */
        /* box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; */ /*轨道内置阴影效果*/
    }
    #range:focus {
        outline: none;
    }
    #range::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 25px;
        width: 25px;
        margin-top: -20px; /*使滑块超出轨道部分的偏移量相等*/
        background: #005caf; 
        border-radius: 50%; /*外观设置为圆形*/
        border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
        box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
    }
    
    #jinduCoat {
        height: .52rem;
        overflow: hidden;
        position: relative;
        width: 100%;
        margin-bottom: .1rem;
    }
    #jindutiao {
        margin-top: .16rem;
        height: 100%;
        border-radius: 1rem;
        background-color: #f0f0f0;
        height: 10px;
        position: relative;
    }
    .lang {
        margin-bottom: -5px;
        margin-top: 10px;
        width: 0;
        height: 10px;
        border-radius: 1rem;
        background: linear-gradient(to right, RGBA(0, 92, 175, .8),
            RGBA(0, 92, 175, 1));
        -webkit-background: linear-gradient(to right, RGBA(0, 92, 175, .5),
            RGBA(0, 92, 175, 1));
    }
    css
    $.fn.RangeSlider = function(cfg){
                this.sliderCfg = {
                    min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null, 
                    max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
                    step: cfg && Number(cfg.step) ? cfg.step : 1,
                    callback: cfg && cfg.callback ? cfg.callback : null
                };
            
                var $input = $(this);
                var min = this.sliderCfg.min;
                var max = this.sliderCfg.max;
                var step = this.sliderCfg.step;
                var callback = this.sliderCfg.callback;
                $('.lang')[0].style.width = 0;
                console.log(this);
                $input.attr('min', min)
                    .attr('max', max)
                    .attr('step', step);
                $input.bind("input", function(e){
                    $input.attr('value', this.value);
                    //$input.css( 'background-size',this.value*100/max + '% 100%' );
                    //$input.css( 'background', 'linear-gradient(to right, #059CFA, #059CFA ' + this.value*100/max + '%, white)' );
                    //console.log(this.value*100/max);
                    $('.lang')[0].style.width = (this.value-min)*100/(max-min) + '%';
                    $("#range").css({"margin-left":0});
                    $("#title0").html(this.value);
                    if ($.isFunction(callback)) {
                        callback(this);
                    }
                });
            };
    js

    第三步:写js

    //调用方法,动态生成进度条
            var min = $("#min").attr("value");
            var max = $("#max").attr("value");
            var current = $("#default").attr("value");
            $('#range').RangeSlider({
                min : min,
                max : max,
                step : (max - min) / 300,
                callback : change
            });
            var change = function($input) {
            }
            var now = $("#title0").text();
            if(current == now){
                //开始设置宽度
                $('.lang')[0].style.width = (current-min )*100/(max-min) + '%';
                $("#range").css({"margin-left":(current-min)*100/(max-min) + '%'});
            }else{
                //开始设置宽度
                $('.lang')[0].style.width = (now-min)*100/(max-min) + '%';
            }

    至此一个比较好看的进度条就形成了,还能回显默认值。

  • 相关阅读:
    HDU2013 蟠桃记
    HDU2012 素数判定
    I00030 Grades conversion
    HDU2011 多项式求和
    HDU2009 求数列的和
    HDU2005 第几天?【日期计算】
    HDU2004 成绩转换
    HDU2006 求奇数的乘积
    HDU2007 平方和与立方和【序列处理】
    HDU2010 水仙花数【进制+趣味程序】
  • 原文地址:https://www.cnblogs.com/ly-gaoshuaige/p/10827227.html
Copyright © 2011-2022 走看看