Форум

SV4 · #1 (**permalink**) 19.11.2016, 21:36

Доброго вечера знатокам JS!

Нужна ваша помощь в написании скрипта автоматического перехода
по ссылкам с якорем на одной странице.

Имеется вот такой html (для примера)

<html>
<body>

<div><img onclick="скрипт">кнопка посмотреть список</img></div>

<div align="center">
<div id="div1"> контейнер <strong>(№1)</strong></div>
<div><a href="#div2" class="GoDiv">ссылка на контейнер (№2)</a></div>
<div> здесь содержимое (№1) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>

<br>
<br>

<div align="center">
<div id="div2"> это контейнер <strong>(№2)</strong></div>
<div><a href="#div3" class="GoDiv">ссылка на контейнер (№3)</a></div>
<div> здесь содержимое (№2) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>

<br>
<br>

<div align="center">
<div id="div3"> это контейнер <strong>(№3)</strong></div>
<div><a href="#div4" class="GoDiv">ссылка на контейнер (№4)</a></div>
<div> здесь содержимое (№3) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>
<br>
<br>

<div align="center">
<div id="div4"> контейнер <strong>(№4)</strong></div>
<div><a href="#div5" class="GoDiv">ссылка на контейнер (№5)</a></div>
<div> здесь содержимое (№4) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>

<br>
<br>

<div align="center">
<div id="div5"> это контейнер  <strong>(№5)</strong></div>
<div><a href="#div1" class="GoDiv">ссылка на контейнер (№1)</a></div>
<div> здесь содержимое (№5) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>


</body>
</html>

Третий день безуспешно пытаюсь написать скрипт автоматического перехода по ссылкам с якорем и классом "GoDiv"

Прочитал страницы учебника по таким темам как:
как найти элементы с одним классом (getElementsByClassName)
как перебрать массив в цикле
как сделать задержку по времени
и всё что мне показалось пригодным для создания скрипта.

Теперь в голове всё перемешалось и я совсем запутался.
Если сперва у меня что то немного получалось, то теперь мой
скрипт совсем перестал работать
получился чудо велосипед на jQuery

В общем я его удалил с концами...
И мне ничего не осталось как обратится к спецам то есть к вам!

что должен сделать скрипт:
1) пользователь нажимает кнопку "посмотреть список"
2) скрипт запускается и проходит по очереди по всем ссылкам
у которых указан класс "GoDiv" (количество ссылок всегда разное)
на каждом блоке задерживается на пять секунд.
3) дойдя до последнего блока, делает так же задержку 5 сек. и возвращается к первому. Там и останавливается.

В гугл и учебник прошу не отправлять, там я был и безрезультатно.
Если бы получилось написать код самостоятельно, то так бы и сделал.

Coriolan161 · #2 (**permalink**) 20.11.2016, 18:04

SV4,

([]+{})[!+[]+!+[]<<+!+[]]
+(prompt+([]+[]))[+[+!+[]+[+[]]]-+!+[]]
+([![]]+[][[]])[+!+[]+[+[]]]
+([]+{})[+[+!+[]+[+[]]]/[!+[]+!+[]]]
+([]+{})[(+!+[]+!+[]+!+[]<<+!+[])+!+[]]
+(![]+[])[+[]]
+(+[][[]]+[]+[])[+!+[]]
+([![]]+[][[]])[+!+[]+[+[]]]
+(![]+[])[!+[]+!+[]];

SV4 · #3 (**permalink**) 21.11.2016, 06:00

Какой исчерпывающий ответ

Единственное, что я из этого всего понял prompt
Но мне это точно не поможет

ksa · #4 (**permalink**) 21.11.2016, 09:39

Сообщение от SV4

что должен сделать скрипт:
1) пользователь нажимает кнопку "посмотреть список"
2) скрипт запускается и проходит по очереди по всем ссылкам
у которых указан класс "GoDiv" (количество ссылок всегда разное)
на каждом блоке задерживается на пять секунд.
3) дойдя до последнего блока, делает так же задержку 5 сек. и возвращается к первому. Там и останавливается.

Как вариант...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
#list img {
	cursor: pointer;
}
</style>
<script type='text/javascript'>
$(function (){
	var obj=$('.GoDiv').parent().prev();
	var tmout=2000;
	var pos;
	$('#list img').click(function (){
		pos=0;
		go();
	});
	function go(){
		var id=obj.eq(pos).prop('id');
		++pos;
		if (pos>obj.length){
			id=obj.eq(0).prop('id');
			setTimeout(function(){
				top.location='#'+id;
			},tmout);
			return;
		};
		top.location='#'+id;
		setTimeout(go,tmout);
	};
});
</script>
</head>
<body>
<div id='list'><img src='http://javascript.ru/forum/images/smilies/victory.gif'>кнопка посмотреть список</img></div>
<div align="center">
	<div id="div1"> контейнер <strong>(№1)</strong></div>
	<div><a href="#div2" class="GoDiv">ссылка на контейнер (№2)</a></div>
	<div> 
		здесь содержимое (№1) и в нём некоторый текст....<br>
		-------------------------------------------------------<br>
		-------------------------------------------------------<br>
		-------------------------------------------------------
	</div>
</div>
<br>
<br>
<div align="center">
<div id="div2"> это контейнер <strong>(№2)</strong></div>
<div><a href="#div3" class="GoDiv">ссылка на контейнер (№3)</a></div>
<div> здесь содержимое (№2) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>
<br>
<br>
<div align="center">
<div id="div3"> это контейнер <strong>(№3)</strong></div>
<div><a href="#div4" class="GoDiv">ссылка на контейнер (№4)</a></div>
<div> здесь содержимое (№3) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>
<br>
<br>
<div align="center">
<div id="div4"> контейнер <strong>(№4)</strong></div>
<div><a href="#div5" class="GoDiv">ссылка на контейнер (№5)</a></div>
<div> здесь содержимое (№4) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>
<br>
<br>
<div align="center">
<div id="div5"> это контейнер  <strong>(№5)</strong></div>
<div><a href="#div1" class="GoDiv">ссылка на контейнер (№1)</a></div>
<div> здесь содержимое (№5) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>
</body>
</html>

Coriolan161 · #5 (**permalink**) 21.11.2016, 11:03

SV4,
Это ArrayScript

SV4 · #6 (**permalink**) 21.11.2016, 18:06

Сообщение от ksa

Как вариант...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
#list img {
	cursor: pointer;
}
</style>
<script type='text/javascript'>
$(function (){
	var obj=$('.GoDiv').parent().prev();
	var tmout=2000;
	var pos;
	$('#list img').click(function (){
		pos=0;
		go();
	});
	function go(){
		var id=obj.eq(pos).prop('id');
		++pos;
		if (pos>obj.length){
			id=obj.eq(0).prop('id');
			setTimeout(function(){
				top.location='#'+id;
			},tmout);
			return;
		};
		top.location='#'+id;
		setTimeout(go,tmout);
	};
});
</script>
</head>
<body>
<div id='list'><img src='http://javascript.ru/forum/images/smilies/victory.gif'>кнопка посмотреть список</img></div>
<div align="center">
	<div id="div1"> контейнер <strong>(№1)</strong></div>
	<div><a href="#div2" class="GoDiv">ссылка на контейнер (№2)</a></div>
	<div> 
		здесь содержимое (№1) и в нём некоторый текст....<br>
		-------------------------------------------------------<br>
		-------------------------------------------------------<br>
		-------------------------------------------------------
	</div>
</div>
<br>
<br>
<div align="center">
<div id="div2"> это контейнер <strong>(№2)</strong></div>
<div><a href="#div3" class="GoDiv">ссылка на контейнер (№3)</a></div>
<div> здесь содержимое (№2) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>
<br>
<br>
<div align="center">
<div id="div3"> это контейнер <strong>(№3)</strong></div>
<div><a href="#div4" class="GoDiv">ссылка на контейнер (№4)</a></div>
<div> здесь содержимое (№3) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>
<br>
<br>
<div align="center">
<div id="div4"> контейнер <strong>(№4)</strong></div>
<div><a href="#div5" class="GoDiv">ссылка на контейнер (№5)</a></div>
<div> здесь содержимое (№4) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>
<br>
<br>
<div align="center">
<div id="div5"> это контейнер  <strong>(№5)</strong></div>
<div><a href="#div1" class="GoDiv">ссылка на контейнер (№1)</a></div>
<div> здесь содержимое (№5) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>
</body>
</html>

Большое Человеческое Спасибо!!!
Только не могу понять почему на последнем блоке двойная задержка
по времени. В какую строку надо смотреть?

SV4 · #7 (**permalink**) 21.11.2016, 18:43

Сообщение от ksa

Как вариант...

<script type='text/javascript'>
$(function (){
var obj=$('.GoDiv').parent().prev();
var tmout=2000;
var pos;
$('#list img').click(function (){
pos=0;
go();
});
function go(){
var id=obj.eq(pos).prop('id');
++pos;
if (pos>obj.length){
id=obj.eq(0).prop('id');
setTimeout(function(){
top.location='#'+id;
},tmout);
return;
};
top.location='#'+id;
setTimeout(go,tmout);
};
});
</script>

[/html]

Если я не ошибаюсь то что бы убрать задержку в последнем блоке
надо делать так:
Создать ещё одну переменную, что бы узнать количество
всех блоков. например:

var count_obj = $("a.GoDiv").length;

затем создать условие внутри функции setTimeout:

if (pos==count_obj) {var tmout=1000;}

или я снова горожу велосипед

Форум

Справочник

Discord чат

Курсы javascript