Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Dobbin Horses (https://javascript.ru/forum/events/6144-dobbin-horses.html)

posvad 13.11.2009 17:57
Dobbin Horses
 
Написал небольшой скрипт:
<html>
  <head>
  <title>Старые клячи (java)</title>
  </head>

<BODY onLoad="stopclock()">
<div style="width:698px;border-right-width:2px;border-right-style:solid;border-right-color:#FF0000">
  
  <div>
    <input title="GO!" type="submit" name="GO!" value="GO!" onclick='startclock()'>
    <input title="On start" type="submit" name="On start" value="On start" onclick='stopclock()'>
    <input id="rez" type="text" size="20">
    <br>
    <br>
  </div>

<!-- Функции, осуществляющие перемещение картинок -->
<SCRIPT LANGUAGE="JavaScript">
var timerID = null
var timerRunning = false
var TinT = 200
var StP = 4

function stopclock(){
   	if(timerRunning)
	      clearInterval(timerID)
	timerRunning = false
document.getElementById("im1").style.left = "0px"
document.getElementById("im2").style.left = "0px"
document.getElementById("im3").style.left = "0px"
document.getElementById("im4").style.left = "0px"
document.getElementById("im5").style.left = "0px"
document.getElementById("rez").value = ""
}

function startclock(){
   stopclock()
   timerID = setInterval("move()",TinT)
   timerRunning = true
}

function move(){
if (document.getElementById("im1").offsetLeft > 671+StP) 
	{
		if(document.getElementById("rez").value.indexOf("1") == -1) document.getElementById("rez").value += " 1";
	}
else 
	{
		rnd14 = Math.random();
		res15 = (rnd14*StP);
		res16 = (res15+document.getElementById("im1").offsetLeft);
		document.getElementById("im1").style.left = (res16).toString() + "px";
	}
if (document.getElementById("im2").offsetLeft > 671+StP) 
	{
		if(document.getElementById("rez").value.indexOf("2") == -1) document.getElementById("rez").value += " 2";
	}
else 
	{
		rnd18 = Math.random();
		res19 = (rnd18*StP);
		res20 = (res19+document.getElementById("im2").offsetLeft);
		document.getElementById("im2").style.left = (res20).toString() + "px";
	}
if (document.getElementById("im3").offsetLeft > 671+StP) 
	{
		if(document.getElementById("rez").value.indexOf("3") == -1) document.getElementById("rez").value += " 3";
	}
else 
	{
		rnd22 = Math.random();
		res23 = (rnd22*StP);
		res24 = (res23+document.getElementById("im3").offsetLeft);
		document.getElementById("im3").style.left = (res24).toString() + "px";
	}
if (document.getElementById("im4").offsetLeft > 671+StP) 
	{
		if(document.getElementById("rez").value.indexOf("4") == -1) document.getElementById("rez").value += " 4";
	}
else 
	{
		rnd26 = Math.random();
		res27 = (rnd26*StP);
		res28 = (res27+document.getElementById("im4").offsetLeft);
		document.getElementById("im4").style.left = (res28).toString() + "px";
	}
if (document.getElementById("im5").offsetLeft > 671+StP) 
	{
		if(document.getElementById("rez").value.indexOf("5") == -1) document.getElementById("rez").value += " 5";
	}
else 
	{
		rnd30 = Math.random();
		res31 = (rnd30*StP);
		res32 = (res31+document.getElementById("im5").offsetLeft);
		document.getElementById("im5").style.left = (res32).toString() + "px";
	}
}

<!-- Картинки для перемещения -->
</SCRIPT>
  <div>
    <img src="_images/truk.gif" width="32" height="32" id="im1" style="position: relative;">    </div>
  <div>
    <img src="_images/truk.gif" width="32" height="32" id="im2" style="position: relative;">    </div>
  <div>
    <img src="_images/truk.gif" width="32" height="32" id="im3" style="position: relative;">    </div>
  <div>
    <img src="_images/truk.gif" width="32" height="32" id="im4" style="position: relative;">    </div>
  <div>
    <img src="_images/truk.gif" width="32" height="32" id="im5" style="position: relative;">    </div>
</div>
</body>
</html>

Всё работает прекрасно. Вставляю тот же код в статью (сам код в следующем посте):

Дёргается безбожно.
В чём дело и как победить?

posvad 13.11.2009 18:04 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Игра «Старые клячи» (Dobbin horses)</title>
<LINK href="/favicon.ico" type=image/x-icon rel="SHORTCUT ICON">
<META name="Description" content="Игра старые клячи сделана на HiAsmeза пару часов">
<META name="Keywords" content="HiAsm, игра, старые клячи, букмекер">

</head>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-5546063-2");
pageTracker._initData();
pageTracker._trackPageview();
</script>

<body>

<table border="0" cellpadding="0" cellspacing="0" id="Hyper">
  <tr>
    <td colspan="3"><div id="Head">
				<div id="Logo">
					<img src="/_Files/Map.gif" alt="map" width="128" height="50" id="LogoImg">
				</div>
				<div id="Title">Помоги своему здоровью</div>
				<div id="Lang">
                  <h3><br>Контент доступен только на русском языке
                  <hr>
                  Сontent available only in russian language</h3>
                  <!-- -->
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&w=160&h=60&title=&border=&output=js"></script>
<!-- -->
				</div>
				<div id="Deskipt">Сайт посвящен сохранению здоровья пользователей компьютеров</div>
	            <div id="Tools">
					<table width="128" height="24" border="0" align="center" cellpadding="0" cellspacing="0">
					    <tr>
							<td align="center">
								<a href="/rss.php">
									<img src="/_images/rss.gif" width="22" height="22" border="0" class="img_0" title="Подписка на ленту новостей">								</a>							</td>
							<td>
								<div align="center">
									<a href="mailto:posvad@posvad.com"><img src="/_images/P.gif" title="Написать мне письмо" width="22" height="22" border="0" class="img_0" /></a> </div>
							</td>
							<td>
								<div align="center">
									<a href="http://subscribe.ru/catalog/comp.paper.tehnikabezopasn"><img src="/_images/S.gif" title="Прочти мою рассылку" width="22" height="22" border="0" class="img_0" /></a> </div>
							</td>
							<td>
								<div align="center">
									<a href="/enter.htm"><img src="/_images/R.gif" title="Подпишись на бесплатный курс по сохранению здоровья за компьютером" width="22" height="22" border="0" class="img_0" /></a> </div>
							</td>
							<td>
								<div align="center">
									<a href="mailto:posvad@posvad.com ?subject=Question about hels &Body=My question is:">
										<img src="/_images/Q.gif" alt="Задайте мне Ваш самый главный вопрос о сохранении здоровья" width="22" height="22" border="0" class="img_0" title="Задайте мне Ваш самый главный вопрос о сохранении здоровья" />									</a>								</div>
							</td>
					    </tr>
					</table>
				</div>
	            <div id="Crumb">
					<a href="/index.php">www.posvad.com</a> ⇒ <a href="/index.php?id=9">Программирование</a> ⇒ Игра «Старые клячи» (Dobbin horses)				</div>
</div></td>
  </tr>
  <tr>
    <td width="150" valign="top">
</td>
    <td valign="top" id="Main">
	<!-- google_ad_section_start -->
	<h1>Игра «Старые клячи» (Dobbin horses)</h1><p>Это была моя первая работающая полноценная программа JavaScript'е. .</p>
<div style="width:698px;border-right-width:2px;border-right-style:solid;border-right-color:#FF0000">
  
  <div>
    <input title="GO!" type="submit" name="GO!" value="GO!" onclick='startclock()'>
    <input title="On start" type="submit" name="On start" value="On start" onclick='stopclock()'>
    <input id="rez" type="text" size="20">
    <br>
    <br>
  </div>
<SCRIPT LANGUAGE="JavaScript">
var timerID = null
var timerRunning = false
var TinT = 200
var StP = 4

function stopclock(){
   	if(timerRunning)
	      clearInterval(timerID)
	timerRunning = false
document.getElementById("im1").style.left = "0px"
document.getElementById("im2").style.left = "0px"
document.getElementById("im3").style.left = "0px"
document.getElementById("im4").style.left = "0px"
document.getElementById("im5").style.left = "0px"
document.getElementById("rez").value = ""
}

function startclock(){
   stopclock()
   timerID = setInterval("move()",TinT)
   timerRunning = true
}

function move(){
if (document.getElementById("im1").offsetLeft > 671+StP) 
	{
		if(document.getElementById("rez").value.indexOf("1") == -1) document.getElementById("rez").value += " 1";
	}
else 
	{
		rnd14 = Math.random();
		res15 = (rnd14*StP);
		res16 = (res15+document.getElementById("im1").offsetLeft);
		document.getElementById("im1").style.left = (res16).toString() + "px";
	}
if (document.getElementById("im2").offsetLeft > 671+StP) 
	{
		if(document.getElementById("rez").value.indexOf("2") == -1) document.getElementById("rez").value += " 2";
	}
else 
	{
		rnd18 = Math.random();
		res19 = (rnd18*StP);
		res20 = (res19+document.getElementById("im2").offsetLeft);
		document.getElementById("im2").style.left = (res20).toString() + "px";
	}
if (document.getElementById("im3").offsetLeft > 671+StP) 
	{
		if(document.getElementById("rez").value.indexOf("3") == -1) document.getElementById("rez").value += " 3";
	}
else 
	{
		rnd22 = Math.random();
		res23 = (rnd22*StP);
		res24 = (res23+document.getElementById("im3").offsetLeft);
		document.getElementById("im3").style.left = (res24).toString() + "px";
	}
if (document.getElementById("im4").offsetLeft > 671+StP) 
	{
		if(document.getElementById("rez").value.indexOf("4") == -1) document.getElementById("rez").value += " 4";
	}
else 
	{
		rnd26 = Math.random();
		res27 = (rnd26*StP);
		res28 = (res27+document.getElementById("im4").offsetLeft);
		document.getElementById("im4").style.left = (res28).toString() + "px";
	}
if (document.getElementById("im5").offsetLeft > 671+StP) 
	{
		if(document.getElementById("rez").value.indexOf("5") == -1) document.getElementById("rez").value += " 5";
	}
else 
	{
		rnd30 = Math.random();
		res31 = (rnd30*StP);
		res32 = (res31+document.getElementById("im5").offsetLeft);
		document.getElementById("im5").style.left = (res32).toString() + "px";
	}
}
</SCRIPT>
  <div>
    <img src="_images/truk.gif" width="32" height="32" id="im1" style="position: relative;">    </div>
  <div>
    <img src="_images/truk.gif" width="32" height="32" id="im2" style="position: relative;">    </div>
  <div>
    <img src="_images/truk.gif" width="32" height="32" id="im3" style="position: relative;">    </div>
  <div>
    <img src="_images/truk.gif" width="32" height="32" id="im4" style="position: relative;">    </div>
  <div>
    <img src="_images/truk.gif" width="32" height="32" id="im5" style="position: relative;">    </div>
</div>







<div class="metaStAutor">Posvad</div><div class="metaStData">Написано: 2009-05-27</div><div class="metaStData">Последняя редакция: 2009-10-27</div><h2>Еще статьи в этом разделе:</h2>
<div ><a href="/ruletka.htm">HiAsm – мольберт для программиста</a></div><div ><a href="/files.htm">Работа с файлами в HiAsm</a></div><div ><a href="/UserEntering.htm">Поведение пользователя на сайте</a></div><div ><a href="/matrcalc.htm">Матричный калькулятор</a></div>	<!-- google_ad_section_end -->
	</td>
    <td align="center" valign="top"  id="Right">
	  <!-- google_ad_section_start(weight=ignore) -->
	    <!--<a href="mailto:posvad@posvad.com">Задайте мне Ваш самый главный вопрос о сохранении здоровья</a>
<hr />

<h2>Статистика<br />
<img src="http://chart.apis.google.com/chart?cht=p&amp;chtt=Visitors&amp;chd=t:14.0,4.0,3.0&amp;chs=120x120&amp;chdl=Russia|Ukraina|Other"></h2>-->

<hr />
<h3>Результаты опроса</h3><h4>Имеются ли у вас симптомы ухудшения зрения?</h4><table width="100%" border="1" cellspacing="0"><tr><td width=95><h5>Да</h5></td><td width=45 align='right'><h5>12</h5></td></tr><tr><td width=95><h5>Нет </h5></td><td width=45 align='right'><h5>5</h5></td></tr></table></div><hr />

<h2>Реклама</h2>
<script type="text/javascript"><!--
google_ad_client = "pub-1973603586255421";
/* posvad_adsence_01 */
google_ad_slot = "3375184106";
google_ad_width = 120;
google_ad_height = 240;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<hr>
<script type="text/javascript">
var begun_auto_pad = 138309534;
var begun_block_id = 138309696;
</script>
<script src="http://autocontext.begun.ru/autocontext2.js" type="text/javascript"></script>
	  <!-- google_ad_section_end -->
	</td>
  </tr>
  <tr>
    <td colspan="3">			<div id="Footer">
				Copyright &copy; Posvad, <a href="mailto:posvad@posvad.com" title="Написать email Вадиму">posvad@posvad.com</a>, <a href="http://posvad.com" title="Сайт о том, как сохранить здоровье при использовании компьютера">www.posvad.com</a>, 2008.<br />
<br />
Дизайн и кодинг Posvad,  <a href="mailto:posvad@posvad.com" title="Написать email Вадиму">posvad@posvad.com</a>, <a href="http://posvad.com" title="Сайт о том, как сохранить здоровье при использовании компьютера">www.posvad.com</a>, 2009.<br />
<br />
Принимаю заказы на создание сайтов, компиляцию электронных книг и размещение рекламы на сайте <a href="http://posvad.com" title="Сайт о том, как сохранить здоровье при использовании компьютера">www.posvad.com</a>.
			</div></td>
  </tr>
</table>

</body>
</html>


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