Javascript-форум - Показать сообщение отдельно

Deff · #49 (**permalink**) 19.12.2015, 22:22

См. Спойлер:

<!DOCTYPE HTML>
<html>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
#Lamp{
  border: rgba(56,185,53,.7) solid 2px;
  height: 123px;
  background: transparent url(http://s2.uploads.ru/t/BJc5O.jpg) center no-repeat;
}
#Lamp.set{
  border-color: rgba(255,0,0,.4) !important;
  background-image: url(http://s7.uploads.ru/t/yxOtG.jpg) !important;
}
.btn-group {
  position: relative;
}
/*Загородил кнопки от клика*/
.btn-group img {
  position: absolute;
  z-index: 1000;
  width: 100%;
  height: 100%;
}
</style>


	<br>
	<br>
        <table width=600>
	<tr><td id="Lamp"  colspan="2" valign="top"><!--Типо Лампа--></td></tr>
        <tr><td>
	<br>
	<br>
	<input style="width:300px;" type="range" min="0" max="100" step="1" value="50" id="polzunok1" oninput="inputRezistor(this)">
	<br>
	<br>
Текущее значение R1 = <span id="itog1" >0</span>;</td><td>Значение Включения = <span id="Pcheck1" >??</span> ±<span id="trigDelta">1</span></td></tr>
        </table>
	<br>
	<br>
	<div class="btn-group">
          <img src="http://forum.mybb.ru/i/blank.gif" alt="Загораживалка кнопок от клика">
	  Вкл<input type="radio" name="on-off" class="btn btn-default botaoEnvia" id="009"/>
	  Выкл<input type="radio" name="on-off" class="btn btn-default botaoEnvia" id="010" checked/>
	</div>



<script>
 window.onload = function(){
 var T_подсветки = 10*1000;		//Пока 10 сек//Время задержки на время подсветки планшета
 var T_зaдержВкл = 1000;		//Задержка отключения Вкл.
 var Lamp = false;			//Подсветка включена/выключена;
 var trigDelta = 3;			//Дельта сработки от начального значения ползунка при выключенной подсветке [>0];
 var R1 = $('#polzunok1');		//Элемент ползунок;
 var itog = $("#itog1");		//Отображающий элемент текущего значения ползунка;
 var pcheck1 = false;			//Значение ползунка для подключения подсветки 
 var elPcheck1 = $('#Pcheck1');		//Отображающий элемент Значение ползунка для подключения подсветки;
 var elTrigDelta = $("#trigDelta");	//Отображающий элемент Дельта сработки;	
 elTrigDelta.text(trigDelta);

  setTimeout(function(){ //Дожидаемся autocomplete для id="polzunok1";

    function addLampRestart() { //Индикатор повторного перезапуска/продления/ подсветки;
      $('#restart-Lamp').remove();
      $('#Lamp').append('<img id="restart-Lamp" src="http://s2.uploads.ru/t/0ZAIE.png" style="float:right" alt="Дозапуск подсветки">');
      setTimeout(function(){$('#restart-Lamp').remove()},700);
    }
   
    var timID; //ID таймера подсветки;
    function tstLampOnOff (x) {
      if(pcheck1===false)return false;
      if(Math.abs(+x-pcheck1)<trigDelta)return false;

      //Переустановка пункта отсчёта;
      elPcheck1.text(x);
      pcheck1 = +x;

      //Дергаем реле:
      if(!Lamp){
         $('#009').click(); $('#Lamp').addClass('set');
         setTimeout(function(){$('#010').click()},T_зaдержВкл);
      }
      //Тест на перезапуск(автопродление) при наличии подсветки;
      if(Lamp){
        clearTimeout(timID);
        addLampRestart();
      }
      //Зажигаем!
      Lamp = true;
      timID = setTimeout(function(){
           clearTimeout(timID);
           Lamp = false;
           busy = false;
           $('#Lamp').removeClass('set');
           inputRezistor(R1[0]);
      },T_подсветки);
    }

    var busy = false;
    function setStartLampZn (x) {  //Установка начального отсчёта включения [pcheck1]
      if(busy||Lamp) return false;
      busy = true;
      elPcheck1.text(x);
      pcheck1 = +x;
    }

    function setItog (x) {
      itog.text(x);
      setStartLampZn (x)
    }

    inputRezistor = function(el) {
      var x = el.value;
      setItog (x);
      tstLampOnOff(x);
    }
 
    inputRezistor(R1[0]);

  },1200);
};
</script>


</body>
</html>