Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Отключение функции по нажатию кнопки (https://javascript.ru/forum/dom-window/64167-otklyuchenie-funkcii-po-nazhatiyu-knopki.html)

Хан 23.07.2016 20:06
Отключение функции по нажатию кнопки
 
Всем привет! Есть меню с пятью ссылками, по этому меню бегает огонь (при нажатии на кнопку). Хочу сделать так, чтобы при нажатии на другую кнопку огонь останавливался. Вот код: 
<!DOCTYPE html>
<html>
<head>
	<title>jQuery</title>
	<meta charset="utf-8" />
	<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
	<script type="text/javascript">
		var active = 0;
		var links = false;
		
		function parseDocument() {
			if (!links) links = $("#menu a");
			for (var i = 0; i < links.length; i++) {
				if (i == active) links[i].style.color = "red";
				else links[i].style.color = "blue";
			}
			if ((active + 1) == links.length) active = 0;
			else active++;
			setTimeout(parseDocument, 100);
		}
		
		function noparseDocument() {
			
		}
		
		function nob(nohide) {
			var x = $("#nohide");
			for (var i = 0; i < x.length; i++) {
				x.get(i).style.display = 'inline';
			}
		}
		
		function nod(nohide) {
			var x = $("#nohide");
			for (var i = 0; i < x.length; i++) {
				x.get(i).style.display = 'none';
			}
		}
		
		function ukrainestyle(blue) {
			$('body').css("background", "url(images/ukraine.jpg)");
			$('.ukr').css("display", "inline");
		}
		
		function deleteukraine(yellow) {
			$('body').css("background", "white");
			$('.ukr').css("display", "none");
		}
		
		function russianstyle(red) {
			$('body').css("background", "url(images/russia.jpg)");
			$('.rus').css("display", "inline");
		}
		
		function deleterussia(white) {
			$('body').css("background", "white");
			$('.rus').css("display", "none");
		}
		
		function usastyle(blue_white) {
			$('body').css("background", "url(images/usa.jpg)");
			$('.usa').css("display", "inline");
		}
		
		function deleteusa(red_white) {
			$('body').css("background", "white");
			$('.usa').css("display", "none");
		}
	</script>
	<style>
		img {display: none;}
		#nohide {width: 477px;}
		::-webkit-input-placeholder {color:#c0392b;}
	</style>
</head>
<body>
	<input type="button" name="delete_all" value="Создать Украину" class="blue" onclick="ukrainestyle()" />
	<input type="button" name="nodelete_all" value="Удалить Украину" class="yellow" onclick="deleteukraine()" />
	<input type="button" name="deleete_all" value="Создать Россию" class="red" onclick="russianstyle()" />
	<input type="button" name="nodeelete_all" value="Удалить Россию" class="white" onclick="deleterussia()" />
	<input type="button" name="deleeete_all" value="Создать США" class="blue_white" onclick="usastyle()" />
	<input type="button" name="nodeeleete_all" value="Удалить США" class="red_white" onclick="deleteusa()" />
	<input type="button" name="yeshide" value="Cкрыть форму" onclick="nod()" />
	<input type="button" name="nohide" value="Показать форму" onclick="nob()" />
	<br/>
	<br/>
	<input type="text" name="text" id="nohide" placeholder="Прежде чем создать Россию или США, удалите сначала Украину или наоборот" /> 
	<br/>
	<ul id="menu">
		<li>
			<a href="#">Ссылка 1</a>
		</li>
		<li>
			<a href="#">Ссылка 2</a>
		</li>
		<li>
			<a href="#">Ссылка 3</a>
		</li>
		<li>
			<a href="#">Ссылка 4</a>
		</li>
		<li>
			<a href="#">Ссылка 5</a>
		</li>
	</ul>
	<input type="button" name="vkl" value="Включить огонь" onclick="parseDocument()" />
	<input type="button" name="vikl" value="Выключить огонь" onclick="noparseDocument()" />
	<br/>
	<br/>
	<img src="images/ukr.png" class="ukr" alt="" />
	<img src="images/ukr.png" class="ukr" alt="" />
	<img src="images/ukr.png" class="ukr" alt="" />
	<img src="images/ukr.png" class="ukr" alt="" />
	<img src="images/ukr.png" class="ukr" alt="" />
	<img src="images/ukr.png" class="ukr" alt="" />
	
	<img src="images/rus.png" class="rus" alt="" />
	<img src="images/rus.png" class="rus" alt="" />
	<img src="images/rus.png" class="rus" alt="" />
	<img src="images/rus.png" class="rus" alt="" />
	<img src="images/rus.png" class="rus" alt="" />
	<img src="images/rus.png" class="rus" alt="" />
	<img src="images/rus.png" class="rus" alt="" />
	<img src="images/rus.png" class="rus" alt="" />
	<img src="images/rus.png" class="rus" alt="" />
	<img src="images/rus.png" class="rus" alt="" />
	<img src="images/rus.png" class="rus" alt="" />
	<img src="images/rus.png" class="rus" alt="" />
	<img src="images/rus.png" class="rus" alt="" />
	<img src="images/rus.png" class="rus" alt="" />
	
	<img src="images/us.png" class="usa" alt="" />
	<img src="images/us.png" class="usa" alt="" />
	<img src="images/us.png" class="usa" alt="" />
	<img src="images/us.png" class="usa" alt="" />
	<img src="images/us.png" class="usa" alt="" />
	<img src="images/us.png" class="usa" alt="" />
</body>
</html>

рони 23.07.2016 20:39
Хан,
может делать полноценный рабочий макет?
[HTML run height=300] тут ваш код[/HTML]

рони 23.07.2016 20:42
Хан,
строка 10 создать переменную, строка 19 в переменную добавить таймер, строка 23 обнулить таймер в переменной

рони 23.07.2016 20:45
Хан,
<!DOCTYPE html>
<html>
<head>
  <title>jQuery</title>
  <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script type="text/javascript">
    var active = 0;
    var links = false;
    var timer;
    function parseDocument() {
      if (!links) links = $("#menu a");
      for (var i = 0; i < links.length; i++) {
        if (i == active) links[i].style.color = "red";
        else links[i].style.color = "blue";
      }
      if ((active + 1) == links.length) active = 0;
      else active++;
      timer=setTimeout(parseDocument, 100);
    }

    function noparseDocument() {
      window.clearTimeout(timer)
    }

    function nob(nohide) {
      var x = $("#nohide");
      for (var i = 0; i < x.length; i++) {
        x.get(i).style.display = 'inline';
      }
    }

    function nod(nohide) {
      var x = $("#nohide");
      for (var i = 0; i < x.length; i++) {
        x.get(i).style.display = 'none';
      }
    }

    function ukrainestyle(blue) {
      $('body').css("background", "url(images/ukraine.jpg)");
      $('.ukr').css("display", "inline");
    }

    function deleteukraine(yellow) {
      $('body').css("background", "white");
      $('.ukr').css("display", "none");
    }

    function russianstyle(red) {
      $('body').css("background", "url(images/russia.jpg)");
      $('.rus').css("display", "inline");
    }

    function deleterussia(white) {
      $('body').css("background", "white");
      $('.rus').css("display", "none");
    }

    function usastyle(blue_white) {
      $('body').css("background", "url(images/usa.jpg)");
      $('.usa').css("display", "inline");
    }

    function deleteusa(red_white) {
      $('body').css("background", "white");
      $('.usa').css("display", "none");
    }
  </script>
  <style>
    img {display: none;}
    #nohide {width: 477px;}
    ::-webkit-input-placeholder {color:#c0392b;}
  </style>
</head>
<body>
  <input type="button" name="delete_all" value="Создать Украину" class="blue" onclick="ukrainestyle()" />
  <input type="button" name="nodelete_all" value="Удалить Украину" class="yellow" onclick="deleteukraine()" />
  <input type="button" name="deleete_all" value="Создать Россию" class="red" onclick="russianstyle()" />
  <input type="button" name="nodeelete_all" value="Удалить Россию" class="white" onclick="deleterussia()" />
  <input type="button" name="deleeete_all" value="Создать США" class="blue_white" onclick="usastyle()" />
  <input type="button" name="nodeeleete_all" value="Удалить США" class="red_white" onclick="deleteusa()" />
  <input type="button" name="yeshide" value="Cкрыть форму" onclick="nod()" />
  <input type="button" name="nohide" value="Показать форму" onclick="nob()" />
  <br/>
  <br/>
  <input type="text" name="text" id="nohide" placeholder="Прежде чем создать Россию или США, удалите сначала Украину или наоборот" />
  <br/>
  <ul id="menu">
    <li>
      <a href="#">Ссылка 1</a>
    </li>
    <li>
      <a href="#">Ссылка 2</a>
    </li>
    <li>
      <a href="#">Ссылка 3</a>
    </li>
    <li>
      <a href="#">Ссылка 4</a>
    </li>
    <li>
      <a href="#">Ссылка 5</a>
    </li>
  </ul>
  <input type="button" name="vkl" value="Включить огонь" onclick="parseDocument()" />
  <input type="button" name="vikl" value="Выключить огонь" onclick="noparseDocument()" />
  <br/>
  <br/>
  <img src="images/ukr.png" class="ukr" alt="" />
  <img src="images/ukr.png" class="ukr" alt="" />
  <img src="images/ukr.png" class="ukr" alt="" />
  <img src="images/ukr.png" class="ukr" alt="" />
  <img src="images/ukr.png" class="ukr" alt="" />
  <img src="images/ukr.png" class="ukr" alt="" />

  <img src="images/rus.png" class="rus" alt="" />
  <img src="images/rus.png" class="rus" alt="" />
  <img src="images/rus.png" class="rus" alt="" />
  <img src="images/rus.png" class="rus" alt="" />
  <img src="images/rus.png" class="rus" alt="" />
  <img src="images/rus.png" class="rus" alt="" />
  <img src="images/rus.png" class="rus" alt="" />
  <img src="images/rus.png" class="rus" alt="" />
  <img src="images/rus.png" class="rus" alt="" />
  <img src="images/rus.png" class="rus" alt="" />
  <img src="images/rus.png" class="rus" alt="" />
  <img src="images/rus.png" class="rus" alt="" />
  <img src="images/rus.png" class="rus" alt="" />
  <img src="images/rus.png" class="rus" alt="" />

  <img src="images/us.png" class="usa" alt="" />
  <img src="images/us.png" class="usa" alt="" />
  <img src="images/us.png" class="usa" alt="" />
  <img src="images/us.png" class="usa" alt="" />
  <img src="images/us.png" class="usa" alt="" />
  <img src="images/us.png" class="usa" alt="" />
</body>
</html>

Хан 23.07.2016 21:14
Спасибо, помогло!


Часовой пояс GMT +3, время: 01:55.