Javascript.RU

Форум

 Учебник Node.JS скринкаст Стандарт языка

Справочник

Discord чат

  
Статьи Тест знаний Аналоги функций PHP

Курсы javascript

  Сообщения за день

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.06.2021, 11:43
Кандидат Javascript-наук
Отправить личное сообщение для firsmember Посмотреть профиль Найти все сообщения от firsmember 		 
Регистрация: 08.11.2019
Сообщений: 113

Помогите со спидометром
Всем доброго дня, уважаемые гуру! Очень прошу вашей помощи, помогите реализовать, в JS я полный 0... =(
Есть спидометр на JS, CSS, HTML
<style class="INLINE_PEN_STYLESHEET_ID">

.speedtest_box{
  width: 320px;
  height: 400px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(#e31212, #e31212 50%, #fff 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Nunito", sans-serif;
  border-radius:5px;
}
    html, body {
  height: 100%;
}



#speedtest {
  position: relative;
  width: 300px;
  height: 300px;
  padding: 20px;
  border-radius: 6px;
  box-sizing: border-box;
}
#speedtest #gauge {
  width: 100%;
  height: 100%;
  padding: 12px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 32px rgba(21, 55, 172, 0.25), inset 0 -192px 192px -240px #e31212;
  box-sizing: border-box;
}
#speedtest #gauge path:first-child {
  opacity: 1 !important;
  display: block !important;
}
#speedtest #gauge-label {
  position: absolute;
  top: 47.5%;
  left: 50%;
  font-size: 64px;
  transform: translate(-50%, -50%);
  color: #e31212;
}
#speedtest #gauge-label:after {
  content: "Простой выбор!";
  position: absolute;
  font-size: 18px;
  line-height: 20px;
    bottom: -25px;
  left: 50%;
  transform: translate(-50%, 100%);
  text-align: center;
  font-family: "Nunito", sans-serif;
}
#speedtest #gauge-label:before {
  content: "Магазинов";
  position: absolute;
  font-size: 14px;
  top: -65px;
  left: 50%;
  transform: translate(-50%, 100%);
  text-align: center;
  font-family: "Nunito", sans-serif;
}
#speedtest:before, #speedtest:after {
  display: block;
  position: absolute;
  bottom: 25%;
  font-family: inherit;
  font-size: 14px;
  color: #9198af;
}
#speedtest:before {
  content: "0";
  left: 28%;
}
#speedtest:after {
  content: "100";
  right: 28%;
}
  </style>



<div class="promo-item active text-center speedtest_box byjdadaptspeed" style="padding: 0 15px;">
                    <div class="">

<div id="speedtest">
  <svg id="gauge" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
    <path style="fill: #e31212;" d="M12.9,75.5c0.3,0.5,0.7,0.9,1,1.4l7.6-5.7c-0.3-0.4-0.5-0.7-0.8-1.1L12.9,75.5z"/>
    <path style="fill: #ea1f39; display: none;" d="M9.3,69.3c0.3,0.5,0.5,1,0.8,1.5l8.4-4.4c-0.2-0.4-0.4-0.8-0.6-1.2L9.3,69.3z"/>
    <path style="fill: #f12d60; display: none;" d="M6.7,62.4C6.9,62.9,7,63.5,7.2,64l9.1-3c-0.1-0.4-0.3-0.8-0.4-1.2L6.7,62.4z"/>
    <path style="fill: #f83c85; display: none;" d="M5.3,55.2c0,0.6,0.1,1.1,0.2,1.7l9.4-1.5c-0.1-0.4-0.1-0.9-0.2-1.3L5.3,55.2z"/>
    <path style="fill: #ff4ba8; display: none;" d="M5,47.9c0,0.6,0,1.1,0,1.7l9.5,0.1c0-0.5,0-0.9,0-1.4L5,47.9z"/>
    <path style="fill: #fb3eb2; display: none;" d="M5.9,40.7c-0.1,0.6-0.2,1.1-0.3,1.7L15,44c0.1-0.4,0.2-0.9,0.2-1.3L5.9,40.7z"/>
    <path style="fill: #f732bf; display: none;" d="M8,33.7c-0.2,0.5-0.4,1.1-0.6,1.6l9,3.1c0.1-0.4,0.3-0.9,0.5-1.3L8,33.7z"/>
    <path style="fill: #f226cd; display: none;" d="M11.2,27.1c-0.3,0.5-0.5,1-0.8,1.5l8.3,4.6c0.2-0.4,0.4-0.8,0.7-1.2L11.2,27.1z"/>
    <path style="fill: #ee1adc; display: none;" d="M15.5,21.2c-0.4,0.4-0.8,0.9-1.1,1.3l7.5,5.8c0.3-0.4,0.6-0.7,0.9-1.1L15.5,21.2z"/>
    <path style="fill: #ae19de; display: none;" d="M20.6,16c-0.5,0.3-0.9,0.7-1.3,1.1l6.5,7c0.3-0.3,0.6-0.6,1-0.9L20.6,16z"/>
    <path style="fill: #6618cd; display: none;" d="M26.4,11.7c-0.5,0.3-0.9,0.6-1.4,0.9l5.3,7.9c0.3-0.2,0.7-0.5,1-0.7L26.4,11.7z"/>
    <path style="fill: #2716bd; display: none;" d="M33,8.3c-0.6,0.2-1.1,0.5-1.6,0.7l3.9,8.7c0.4-0.2,0.9-0.4,1.3-0.6L33,8.3z"/>
    <path style="fill: #1537ac; display: none;" d="M39.9,6.1c-0.5,0.1-1.1,0.3-1.6,0.4l2.5,9.2c0.4-0.1,0.8-0.2,1.2-0.3L39.9,6.1z"/>
    <path style="fill: #2061c1; display: none;" d="M47.2,5.2c-0.6,0-1.1,0-1.7,0.1l0.9,9.4c0.4,0,0.9-0.1,1.3-0.1L47.2,5.2z"/>
    <path style="fill: #2c90d5; display: none;" d="M54.5,5.2c-0.6,0-1.1-0.1-1.7-0.1l-0.6,9.5c0.4,0,0.9,0.1,1.3,0.1L54.5,5.2z"/>
    <path style="fill: #3bc2ea; display: none;" d="M61.6,6.5c-0.5-0.1-1.1-0.3-1.6-0.4l-2.2,9.3c0.4,0.1,0.9,0.2,1.3,0.3L61.6,6.5z"/>
    <path style="fill: #4bf7ff; display: none;" d="M68.6,9C68,8.7,67.5,8.5,67,8.3l-3.6,8.8c0.4,0.2,0.8,0.3,1.2,0.5L68.6,9z"/>
    <path style="fill: #39f6d2; display: none;" d="M74.9,12.5c-0.4-0.3-0.9-0.6-1.4-0.9l-5,8.1c0.4,0.2,0.7,0.5,1.1,0.7L74.9,12.5z"/>
    <path style="fill: #28ed99; display: none;" d="M80.6,17c-0.5-0.4-0.9-0.7-1.3-1.1l-6.2,7.2c0.3,0.3,0.7,0.6,1,0.9L80.6,17z"/>
    <path style="fill: #19e55d; display: none;" d="M85.7,22.4c-0.4-0.4-0.7-0.9-1.1-1.3l-7.4,6.1c0.3,0.3,0.5,0.7,0.8,1L85.7,22.4z"/>
    <path style="fill: #0adc1e; display: none;" d="M89.6,28.6c-0.2-0.5-0.5-1-0.8-1.5L80.6,32c0.2,0.4,0.4,0.7,0.6,1.1L89.6,28.6z"/>
    <path style="fill: #0adc1e; display: none;" d="M92.5,35.3c-0.2-0.5-0.4-1.1-0.6-1.6l-8.8,3.4c0.2,0.4,0.3,0.8,0.5,1.2L92.5,35.3z"/>
    <path style="fill: #0adc1e; display: none;" d="M94.4,42.2c-0.1-0.5-0.2-1.1-0.3-1.6l-9.4,2c0.1,0.4,0.2,0.9,0.2,1.3L94.4,42.2z"/>
    <path style="fill: #0adc1e; display: none;" d="M95,47.8l-9.5,0.5c0,0.4,0,0.9,0,1.3l9.5-0.1C95,48.9,95,48.4,95,47.8z"/>
    <path style="fill: #0adc1e; display: none;" d="M94.5,56.8c0.1-0.5,0.1-1.1,0.2-1.7l-9.4-1c-0.1,0.4-0.1,0.9-0.2,1.3L94.5,56.8z"/>
    <path style="fill: #0adc1e; display: none;" d="M92.8,63.9c0.2-0.5,0.3-1,0.5-1.7l-9.1-2.6c-0.1,0.4-0.3,0.9-0.4,1.3L92.8,63.9z"/>
    <path style="fill: #0adc1e; display: none;" d="M90,70.7c0.2-0.5,0.5-1,0.8-1.5l-8.7-4.1c-0.2,0.4-0.4,0.8-0.6,1.2L90,70.7z"/>
    <path style="fill: #0adc1e; display: none;" d="M89.9,80.1c0.5-0.7,1-1.3,1.4-1.9l-12-8.2c-0.3,0.4-0.6,0.9-0.9,1.3L89.9,80.1z"/>
  </svg>
  <div id="gauge-label">0</div>
</div>

</div>
                  </div>



var delay = 2000, value = 0, valueStore = 0, tick = 1, tickStore = 1, tickDiff = 0, tickDiffValue = 0;
function valBetween(v, min, max) {
  return (Math.min(max, Math.max(min, v)));
}
(function loop() {
  value = Math.ceil(Math.random() * 100);
  tick = valBetween(Math.ceil((value/100)*28), 1, 28);
  tickDiff = Math.abs(tick-tickStore);
  tickDiffValue = Math.abs(value-valueStore)/tickDiff;
  console.log("tickDiff: "+tickDiffValue+" * "+tickDiff+" = "+(tickDiffValue*tickDiff));
  var counter = 0, valueStoreTemp = valueStore, tickStoreTemp = tickStore;
  if (value > valueStore) {
    for (i=tickStoreTemp; i<=tick; i++) {
      (function(i){
        setTimeout(function() {
          $('.speedtest_box').css('background-image', 'linear-gradient(rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 50%), linear-gradient('+$('#gauge path:nth-child('+i+')')[0].style.fill+', '+$('#gauge path:nth-child('+i+')')[0].style.fill+' 50%, #fff 50%)');
          $('#gauge').css('box-shadow', '0 0 32px rgba(21, 55, 172, 0.25), inset 0 -192px 192px -240px '+$('#gauge path:nth-child('+i+')')[0].style.fill+', inset 0 0 2px -1px '+$('#gauge path:nth-child('+i+')')[0].style.fill);
          $('#gauge path:nth-child('+i+')').show();
          $('#gauge-label')
            .css('color', $('#gauge path:nth-child('+i+')')[0].style.fill)
            .text(Math.ceil(valueStoreTemp+(tickDiffValue*Math.abs(tickStoreTemp-i))));
          if (i==tick) { $('#gauge-label').text(value); }
          // console.log(i);
        }, 50 * counter);
        counter++;
      }(i));
    }
  } else if (value < valueStore) {
    for (i=tickStoreTemp; i>=tick; i--) {
      (function(i){
        setTimeout(function() {
          $('.speedtest_box').css('background-image', 'linear-gradient(rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 50%), linear-gradient('+$('#gauge path:nth-child('+i+')')[0].style.fill+', '+$('#gauge path:nth-child('+i+')')[0].style.fill+' 50%, #fff 50%)');
          $('#gauge').css('box-shadow', '0 0 32px rgba(21, 55, 172, 0.25), inset 0 -192px 192px -240px '+$('#gauge path:nth-child('+i+')')[0].style.fill+', inset 0 0 2px -1px '+$('#gauge path:nth-child('+i+')')[0].style.fill);
          $('#gauge path:nth-child('+i+')').hide();
          $('#gauge-label')
            .css('color', $('#gauge path:nth-child('+i+')')[0].style.fill)
            .text(Math.floor(valueStoreTemp-(tickDiffValue*Math.abs(tickStoreTemp-i))));
          if (i==tick) { $('#gauge-label').text(value); }
          // console.log(i);
        }, 50 * counter);
        counter++;
      }(i));
    }
  }
  valueStore = value;
  tickStore = tick;
  window.setTimeout(loop, delay);
})();


Суть в том, что этот скрипт рандомно гоняет спидометр по разным числам,
Мне же нужно, что бы он делал это только при изменении числа в блоке 
<div id="gauge-label">0</div>
т.е. Спидометр менял шкалу, цвет и все что он меняет сейчас в зависимости от числа в этом блоке... Значение в блоке 
<div id="gauge-label">0</div>
может быть любым от 0 до 100...
Последний раз редактировалось firsmember, 24.06.2021 в 11:46.
Ответить с цитированием
  #2 (permalink)  
Старый 25.06.2021, 04:00
Кандидат Javascript-наук
Отправить личное сообщение для firsmember Посмотреть профиль Найти все сообщения от firsmember 		 
Регистрация: 08.11.2019
Сообщений: 113

Сделал как написали
<style class="INLINE_PEN_STYLESHEET_ID">

.speedtest_box{
  width: 320px;
  height: 400px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(#e31212, #e31212 50%, #fff 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Nunito", sans-serif;
  border-radius:5px;
}
    html, body {
  height: 100%;
}



#speedtest {
  position: relative;
  width: 300px;
  height: 300px;
  padding: 20px;
  border-radius: 6px;
  box-sizing: border-box;
}
#speedtest #gauge {
  width: 100%;
  height: 100%;
  padding: 12px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 32px rgba(21, 55, 172, 0.25), inset 0 -192px 192px -240px #e31212;
  box-sizing: border-box;
}
#speedtest #gauge path:first-child {
  opacity: 1 !important;
  display: block !important;
}
#speedtest #gauge-label {
  position: absolute;
  top: 47.5%;
  left: 50%;
  font-size: 64px;
  transform: translate(-50%, -50%);
  color: #e31212;
}
#speedtest #gauge-label:after {
  content: "Простой выбор!";
  position: absolute;
  font-size: 18px;
  line-height: 20px;
    bottom: -25px;
  left: 50%;
  transform: translate(-50%, 100%);
  text-align: center;
  font-family: "Nunito", sans-serif;
}
#speedtest #gauge-label:before {
  content: "Магазинов";
  position: absolute;
  font-size: 14px;
  top: -65px;
  left: 50%;
  transform: translate(-50%, 100%);
  text-align: center;
  font-family: "Nunito", sans-serif;
}
#speedtest:before, #speedtest:after {
  display: block;
  position: absolute;
  bottom: 25%;
  font-family: inherit;
  font-size: 14px;
  color: #9198af;
}
#speedtest:before {
  content: "0";
  left: 28%;
}
#speedtest:after {
  content: "100";
  right: 28%;
}
  </style>

<div class="promo-item active text-center speedtest_box byjdadaptspeed" style="padding: 0 15px;">
                    <div class="">

<div id="speedtest">
  <svg id="gauge" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
    <path style="fill: #e31212;" d="M12.9,75.5c0.3,0.5,0.7,0.9,1,1.4l7.6-5.7c-0.3-0.4-0.5-0.7-0.8-1.1L12.9,75.5z"/>
    <path style="fill: #ea1f39; display: none;" d="M9.3,69.3c0.3,0.5,0.5,1,0.8,1.5l8.4-4.4c-0.2-0.4-0.4-0.8-0.6-1.2L9.3,69.3z"/>
    <path style="fill: #f12d60; display: none;" d="M6.7,62.4C6.9,62.9,7,63.5,7.2,64l9.1-3c-0.1-0.4-0.3-0.8-0.4-1.2L6.7,62.4z"/>
    <path style="fill: #f83c85; display: none;" d="M5.3,55.2c0,0.6,0.1,1.1,0.2,1.7l9.4-1.5c-0.1-0.4-0.1-0.9-0.2-1.3L5.3,55.2z"/>
    <path style="fill: #ff4ba8; display: none;" d="M5,47.9c0,0.6,0,1.1,0,1.7l9.5,0.1c0-0.5,0-0.9,0-1.4L5,47.9z"/>
    <path style="fill: #fb3eb2; display: none;" d="M5.9,40.7c-0.1,0.6-0.2,1.1-0.3,1.7L15,44c0.1-0.4,0.2-0.9,0.2-1.3L5.9,40.7z"/>
    <path style="fill: #f732bf; display: none;" d="M8,33.7c-0.2,0.5-0.4,1.1-0.6,1.6l9,3.1c0.1-0.4,0.3-0.9,0.5-1.3L8,33.7z"/>
    <path style="fill: #f226cd; display: none;" d="M11.2,27.1c-0.3,0.5-0.5,1-0.8,1.5l8.3,4.6c0.2-0.4,0.4-0.8,0.7-1.2L11.2,27.1z"/>
    <path style="fill: #ee1adc; display: none;" d="M15.5,21.2c-0.4,0.4-0.8,0.9-1.1,1.3l7.5,5.8c0.3-0.4,0.6-0.7,0.9-1.1L15.5,21.2z"/>
    <path style="fill: #ae19de; display: none;" d="M20.6,16c-0.5,0.3-0.9,0.7-1.3,1.1l6.5,7c0.3-0.3,0.6-0.6,1-0.9L20.6,16z"/>
    <path style="fill: #6618cd; display: none;" d="M26.4,11.7c-0.5,0.3-0.9,0.6-1.4,0.9l5.3,7.9c0.3-0.2,0.7-0.5,1-0.7L26.4,11.7z"/>
    <path style="fill: #2716bd; display: none;" d="M33,8.3c-0.6,0.2-1.1,0.5-1.6,0.7l3.9,8.7c0.4-0.2,0.9-0.4,1.3-0.6L33,8.3z"/>
    <path style="fill: #1537ac; display: none;" d="M39.9,6.1c-0.5,0.1-1.1,0.3-1.6,0.4l2.5,9.2c0.4-0.1,0.8-0.2,1.2-0.3L39.9,6.1z"/>
    <path style="fill: #2061c1; display: none;" d="M47.2,5.2c-0.6,0-1.1,0-1.7,0.1l0.9,9.4c0.4,0,0.9-0.1,1.3-0.1L47.2,5.2z"/>
    <path style="fill: #2c90d5; display: none;" d="M54.5,5.2c-0.6,0-1.1-0.1-1.7-0.1l-0.6,9.5c0.4,0,0.9,0.1,1.3,0.1L54.5,5.2z"/>
    <path style="fill: #3bc2ea; display: none;" d="M61.6,6.5c-0.5-0.1-1.1-0.3-1.6-0.4l-2.2,9.3c0.4,0.1,0.9,0.2,1.3,0.3L61.6,6.5z"/>
    <path style="fill: #4bf7ff; display: none;" d="M68.6,9C68,8.7,67.5,8.5,67,8.3l-3.6,8.8c0.4,0.2,0.8,0.3,1.2,0.5L68.6,9z"/>
    <path style="fill: #39f6d2; display: none;" d="M74.9,12.5c-0.4-0.3-0.9-0.6-1.4-0.9l-5,8.1c0.4,0.2,0.7,0.5,1.1,0.7L74.9,12.5z"/>
    <path style="fill: #28ed99; display: none;" d="M80.6,17c-0.5-0.4-0.9-0.7-1.3-1.1l-6.2,7.2c0.3,0.3,0.7,0.6,1,0.9L80.6,17z"/>
    <path style="fill: #19e55d; display: none;" d="M85.7,22.4c-0.4-0.4-0.7-0.9-1.1-1.3l-7.4,6.1c0.3,0.3,0.5,0.7,0.8,1L85.7,22.4z"/>
    <path style="fill: #0adc1e; display: none;" d="M89.6,28.6c-0.2-0.5-0.5-1-0.8-1.5L80.6,32c0.2,0.4,0.4,0.7,0.6,1.1L89.6,28.6z"/>
    <path style="fill: #0adc1e; display: none;" d="M92.5,35.3c-0.2-0.5-0.4-1.1-0.6-1.6l-8.8,3.4c0.2,0.4,0.3,0.8,0.5,1.2L92.5,35.3z"/>
    <path style="fill: #0adc1e; display: none;" d="M94.4,42.2c-0.1-0.5-0.2-1.1-0.3-1.6l-9.4,2c0.1,0.4,0.2,0.9,0.2,1.3L94.4,42.2z"/>
    <path style="fill: #0adc1e; display: none;" d="M95,47.8l-9.5,0.5c0,0.4,0,0.9,0,1.3l9.5-0.1C95,48.9,95,48.4,95,47.8z"/>
    <path style="fill: #0adc1e; display: none;" d="M94.5,56.8c0.1-0.5,0.1-1.1,0.2-1.7l-9.4-1c-0.1,0.4-0.1,0.9-0.2,1.3L94.5,56.8z"/>
    <path style="fill: #0adc1e; display: none;" d="M92.8,63.9c0.2-0.5,0.3-1,0.5-1.7l-9.1-2.6c-0.1,0.4-0.3,0.9-0.4,1.3L92.8,63.9z"/>
    <path style="fill: #0adc1e; display: none;" d="M90,70.7c0.2-0.5,0.5-1,0.8-1.5l-8.7-4.1c-0.2,0.4-0.4,0.8-0.6,1.2L90,70.7z"/>
    <path style="fill: #0adc1e; display: none;" d="M89.9,80.1c0.5-0.7,1-1.3,1.4-1.9l-12-8.2c-0.3,0.4-0.6,0.9-0.9,1.3L89.9,80.1z"/>
  </svg>
  <div id="gauge-label">50</div>
</div>

</div>
                  </div>



var delay = 2000, value = 0, valueStore = 0, tick = 1, tickStore = 1, tickDiff = 0, tickDiffValue = 0;
function valBetween(v, min, max) {
  return (Math.min(max, Math.max(min, v)));
}
(function loop() {
  //value = Math.ceil(Math.random() * 100);
  tick = valBetween(Math.ceil((value/100)*28), 1, 28);
  tickDiff = Math.abs(tick-tickStore);
  tickDiffValue = Math.abs(value-valueStore)/tickDiff;
  console.log("tickDiff: "+tickDiffValue+" * "+tickDiff+" = "+(tickDiffValue*tickDiff));
  var counter = 0, valueStoreTemp = valueStore, tickStoreTemp = tickStore;
  if (value > valueStore) {
    for (i=tickStoreTemp; i<=tick; i++) {
      (function(i){
        setTimeout(function() {
          $('.speedtest_box').css('background-image', 'linear-gradient(rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 50%), linear-gradient('+$('#gauge path:nth-child('+i+')')[0].style.fill+', '+$('#gauge path:nth-child('+i+')')[0].style.fill+' 50%, #fff 50%)');
          $('#gauge').css('box-shadow', '0 0 32px rgba(21, 55, 172, 0.25), inset 0 -192px 192px -240px '+$('#gauge path:nth-child('+i+')')[0].style.fill+', inset 0 0 2px -1px '+$('#gauge path:nth-child('+i+')')[0].style.fill);
          $('#gauge path:nth-child('+i+')').show();
          $('#gauge-label')
            .css('color', $('#gauge path:nth-child('+i+')')[0].style.fill)
            .text(Math.ceil(valueStoreTemp+(tickDiffValue*Math.abs(tickStoreTemp-i))));
          if (i==tick) { $('#gauge-label').text(value); }
          // console.log(i);
        }, 50 * counter);
        counter++;
      }(i));
    }
  } else if (value < valueStore) {
    for (i=tickStoreTemp; i>=tick; i--) {
      (function(i){
        setTimeout(function() {
          $('.speedtest_box').css('background-image', 'linear-gradient(rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 50%), linear-gradient('+$('#gauge path:nth-child('+i+')')[0].style.fill+', '+$('#gauge path:nth-child('+i+')')[0].style.fill+' 50%, #fff 50%)');
          $('#gauge').css('box-shadow', '0 0 32px rgba(21, 55, 172, 0.25), inset 0 -192px 192px -240px '+$('#gauge path:nth-child('+i+')')[0].style.fill+', inset 0 0 2px -1px '+$('#gauge path:nth-child('+i+')')[0].style.fill);
          $('#gauge path:nth-child('+i+')').hide();
          $('#gauge-label')
            .css('color', $('#gauge path:nth-child('+i+')')[0].style.fill)
            .text(Math.floor(valueStoreTemp-(tickDiffValue*Math.abs(tickStoreTemp-i))));
          if (i==tick) { $('#gauge-label').text(value); }
          // console.log(i);
        }, 50 * counter);
        counter++;
      }(i));
    }
  }
  valueStore = value;
  tickStore = tick;
  //window.setTimeout(loop, delay);
}
function setGaugeLabel(_value) {

    value = valBetween(_value, 0, 100);

    loop();

}

)();


Не работает, шкала не изменилась и цвет не поменялся =((
Ответить с цитированием
  #3 (permalink)  
Старый 25.06.2021, 09:34
Кандидат Javascript-наук
Отправить личное сообщение для firsmember Посмотреть профиль Найти все сообщения от firsmember 		 
Регистрация: 08.11.2019
Сообщений: 113

https://codepen.io/ijogold/pen/JjWgppG

Не работает(
Ответить с цитированием
  #4 (permalink)  
Старый 25.06.2021, 10:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони 		 
Регистрация: 27.05.2010
Сообщений: 33,126

firsmember,
код запустите!
Сообщение от Rise
setGaugeLabel(50).
Ответить с цитированием
  #5 (permalink)  
Старый 25.06.2021, 10:31
Кандидат Javascript-наук
Отправить личное сообщение для firsmember Посмотреть профиль Найти все сообщения от firsmember 		 
Регистрация: 08.11.2019
Сообщений: 113

т.е. здесь вместо 
function setGaugeLabel(_value) {
    value = valBetween(_value, 0, 100);
    loop();
}
нужно писать 
function setGaugeLabel(50) {
    value = valBetween(_value, 0, 100);
    loop();
}


? в codepen.io подключил jquery
Покажите там плиз
Ответить с цитированием
  #6 (permalink)  
Старый 25.06.2021, 10:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони 		 
Регистрация: 27.05.2010
Сообщений: 33,126

firsmember,
панель js строка 56 добавить 
setGaugeLabel(50)
Ответить с цитированием
  #7 (permalink)  
Старый 25.06.2021, 10:51
Кандидат Javascript-наук
Отправить личное сообщение для firsmember Посмотреть профиль Найти все сообщения от firsmember 		 
Регистрация: 08.11.2019
Сообщений: 113

Работает, супер! Спасибо уважаемые!
Ответить с цитированием
Ответ

« Передача информации на разные домены | Не закрывается модальное окно. »


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите решить небольшую задачу kseosru Общие вопросы Javascript 1 24.11.2019 17:08
Помогите с динамическим спидометром Vjacheslav143 Общие вопросы Javascript 1 31.07.2017 12:56
Помогите с таймером и окошком! xXapokalypsesXx Общие вопросы Javascript 4 07.06.2012 01:12
Помогите с наследованием develka Общие вопросы Javascript 1 06.06.2012 09:50
Помогите! Многоуровневые вкладки! sergeeeeee Элементы интерфейса 2 02.08.2010 23:50


© Илья Кантор, 2007-2021 О проекте - Обратная связь - Архив форума - Вверх