Question

我想制作类似温度计的东西，但我的背景有问题。我使用以下jQuery脚本

<script type="text/javascript">
$(document).ready(function () {
 var bkcolor;
 $('#slider').slider({
 range: "min",
  min : 36.6,
  max  : 43,
  value: 36.6,
  step: 0.1,
  slide: function(event, ui) {

   if(ui.value<=36.8){ bkcolor='#0f0';};
   if(ui.value>36.8 && ui.value<=37.5){bkcolor='#ff0';};
   if(ui.value>37.5 && ui.value<=39){bkcolor='#f6931f';};     
   if (ui.value > 39) { bkcolor = '#f00'; }
   $('.progressbar-cover').css('bottom' , ui.value + '%');  // line 1
   $('.progressbar-value').css('backgroundColor' , bkcolor );  
   $( "#amount" ).val($( "#slider" ).slider( "value" ));   
  }
 });
});
</script>

但我希望element.style从0到100％现在，它是36.6 - 43％

我遇到的问题是数学:( 我如何编辑1号线？我尝试乘以一个数字（1.4）和sub与另一个（36）来测试它，但它不能正常工作。

非常感谢

Answer 1

尝试对您的代码进行这些修改。

我还设置了以下jsFiddle的演示版。由于您没有提供任何HTML或CSS，因此演示只会将值输出到屏幕。

$(document).ready(function () {        
    $('#slider').slider({
        range: "min",
        min : 36.6,
        max  : 43,
        value: 36.6,
        step: 0.1,
        slide: function(event, ui) {

            // determine background color
            var bkcolor;
            if (ui.value<=36.8)
                bkcolor='#0f0';
            else if (ui.value>36.8 && ui.value<=37.5)
                bkcolor='#ff0';
            else if (ui.value>37.5 && ui.value<=39)
                bkcolor='#f6931f';
            else if (ui.value > 39)
                bkcolor = '#f00';

            // determine percentage value
            var minValue = $(this).slider('option', 'min');
            var maxValue = $(this).slider('option', 'max');
            var currentValue = ui.value;
            var percentageValue = Math.round((currentValue - minValue) / (maxValue - minValue) * 100);

            // update screen
            $('.progressbar-cover').css('bottom' , percentageValue + '%');  // line 1
            $('.progressbar-value').css('backgroundColor' , bkcolor );  
            $( "#amount" ).val($( "#slider" ).slider( "value" ));
        }
    });
});

希望它有所帮助。

jquery温度计不覆盖0 - 100％之间的区域

1 个答案: