Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.08.2018, 00:04
Интересующийся
Отправить личное сообщение для Sergius182 Посмотреть профиль Найти все сообщения от Sergius182
 
Регистрация: 11.08.2018
Сообщений: 27

Подскажите как решить небольшую задачку
Небольшой скрипт чтоб мозги поразвивать- счет в уме.
Пользователь вводит число секунд после истечения которых генерируется новый пример, нажимает кнопку "следующий"- и счет в уме начинается.
Почитал о Java Script и написал вот такой скрипт. Но не могу доделать 1 вещь-
чтобы при генерации нового примера скрипт давал ответ НА ДВА примера, - на новый И НА ПРЕДЫДУЩИЙ пример.
не могу сделать чтоб программа и на предыдущий пример давала ответ.

Подскажите как это сделать.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">


// Функ для генерации целого случайного числа
function  f2 (min, max) {
  var rand = min + Math.random() * (max - min)
  rand = Math.round(rand+6);
  return rand;      
}

// Функция записи примера, его решения и вывода ответа
function f1(){var x,y,z;
				
x=document.getElementById("iks");
y=document.getElementById("igrek");
z=document.getElementById("zed");

x.innerHTML= f2(11,99);
y.innerHTML=f2(11,99); 
z.innerHTML=y.innerHTML*x.innerHTML;

var t= document.getElementById("forma").value*1000;
setTimeout("f1()", t);
}



</script>
</head>
<body bgcolor="black"  >
<font color='#C0C0C0'>
<h2><table cellspacing="5" cellpadding="0">
<tr>
	<td id='iks'> <!-- X -->
	
	</td>
	<td> <!-- * -->
	х
	</td>
	<td id='igrek'> <!-- Y-->
	
	</td>
	<td> <!-- = -->
	=
	</td>
	
</tr>
</table></h2>
<button id='zed'>ответ</button> <!-- z -->
<button id='zed2'>ответ на предыдущ пример</button> <!-- z2 -->


<br>
<input type="text" id="forma" />

 <br> <br> 

 <button  onclick='f1()'> Следующий </button>

</font>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 12.08.2018, 04:54
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>

// Функ для генерации целого случайного числа
function  rand(min, max) {
	return Math.round(min + Math.random() * (max - min))     
}

// Функция записи примера, его решения и вывода ответа
function f1() {
	clearTimeout(timeout);
	var a = rand(11, 99);
	var b = rand(11, 99);
	var c = a * b;
	
	var section = document.createElement("section");
	section.innerHTML = `
		${a} × ${b} = <span class="answer">${c}</span>
		<svg>
			<circle style="--time: ${speed.value}s;"></circle>
		</svg>`;
	
	document.querySelectorAll("section:nth-last-of-type(n + 2)").forEach(element => element.remove())
	document.body.appendChild(section);
	
	timeout = setTimeout(f1, (1 + Number(speed.value)) * 1e3);
}
var timeout;

</script>
<style>
	body {
		background: #111; color: #ccc;
		font: 10vmin / 1.5 Helvetica Neue, Segoe UI, Roboto, Ubuntu, sans-serif;
		overflow: hidden; display: flex;
		flex-direction: column-reverse;
		align-items: center;
	}
	
	button, select { order: 1; margin: 1em; }
	
	section {
		animation: appear 1s ease-out backwards;
		padding: 1em; max-width: 10em;
		transition: 1s;
		position: relative;
	}
	
	section:last-of-type { color: deeppink;	}
	
	section .answer {
		border-bottom: .1em dotted transparent;
	}
	
	section:last-of-type .answer {
		border-color: gray;
		color: transparent;
		text-shadow: none;
		pointer-events: none;
		user-select: none;
	}
	
	svg {
		width: 5vmin;
		height: 5vmin;
		transform: rotate(-90deg);
		position: absolute;
		opacity: 0;
		right: 0; top : 42.5%;
		transition: 500ms;
	}
	
	section:last-of-type svg {
		opacity: 1;
	}

	circle {
		fill: none;
		r: 2vmin;
		cx: 2.5vmin;
		cy: 2.5vmin;
		stroke-width: .75vmin;
		stroke: currentColor;
		stroke-linecap: round;
		stroke-dasharray: 0 12.6vmin; /* 2π × 2vmin ≈ 12.6vmin */
		animation: fillup var(--time) 1s linear forwards;
	}

	@keyframes fillup {
		to {
			stroke-dasharray: 12.6vmin 12.6vmin;
		}
	}
	
	@keyframes appear {
		from {
			font-size: 0; opacity: 0;
			padding: 0; margin: 0;
			transform: scale(0);
		}
	}
	
	label {
		font-size: 3.5vmin;
		order: 2;
	}
	
	input {
		font: inherit;
		background: none;
		color: inherit;
		border: 0;
		width: 3em;
		text-align: center;
	}

	
</style>
</head>
<body>
	<label>Следующий пример автоматически через <input type="number" value="5" id="speed"> сек.</label>
	<button onclick="f1(); this.textContent = 'Следующий';">Начать</button>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 12.08.2018, 14:59
Интересующийся
Отправить личное сообщение для Sergius182 Посмотреть профиль Найти все сообщения от Sergius182
 
Регистрация: 11.08.2018
Сообщений: 27

СпасиБог. Хороший, рабочий вариант. Я со своим скриптом повозился, у меня тоже получилось, правда я сам досих пор не понимаю почему он работает именно так, я от него другого ожидал- а вышло то что я в конце концов и хотел.
Ответить с цитированием
  #4 (permalink)  
Старый 12.08.2018, 15:00
Интересующийся
Отправить личное сообщение для Sergius182 Посмотреть профиль Найти все сообщения от Sergius182
 
Регистрация: 11.08.2018
Сообщений: 27

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
// Ooie aey aaia?aoee oaeiai :enea


function  f2 (min, max) {
  var rand = min + Math.random() * (max - min)
  rand = Math.round(rand+6);
  return rand;      
}
/*OOIEOEE F1 E F12 IAEIAEIAUA, II N NUEEIE AeOA IA AeOAA,
IIE EAE AAA eOEE IAeAEEAUAA^O AIe"x EAeOI?EO AeOA AeOAO- NIAxAEA 
IAIA AAIAeEeOAO xENEA, IIOII AOIeA". N IIAOIeII II EIOAeAAEO 
IA AU?EI- AE^EE EAEEA OI*/

function f1(){document.getElementById("iks").innerHTML= f2(11,99);
document.getElementById("igrek").innerHTML=f2(11,99); 
document.getElementById("zed").innerHTML=document.getElementById("igrek").innerHTML*document.getElementById("iks").innerHTML
var t= document.getElementById("forma").value*1000;
setTimeout("f12()", t);
}

function f12(){document.getElementById("iks2").innerHTML= f2(11,99);
document.getElementById("igrek2").innerHTML=f2(11,99); 
document.getElementById("zed2").innerHTML=document.getElementById("igrek").innerHTML*document.getElementById("iks").innerHTML
var t= 1000;
setTimeout("f1()", t);
}

</script>
</head>
<body bgcolor="black"  >
<font color='#C0C0C0' size=300px>
<h2><table cellspacing="5" cellpadding="0">



<tr bgcolor='#C0C0C0'>
   <td id='iks2'> <!-- X -->

   </td>
   <td> <!-- * -->
   x
   </td>
   <td id='igrek2'> <!-- Y-->
   
   </td>
  
   
</tr>




<tr> 
   <td id='iks'> <!-- X -->
   
   </td>
   <td> <!-- * -->
   x
   </td>
   <td id='igrek'> <!-- Y-->
   
   </td>
   
</tr>

</table></h2>
<button id='zed'>ioaao</button> <!-- z -->
<button id='zed2'>ioaao</button> <!-- z 2-->

<button  onclick='f1()'> Neaao?uee </button>

<br>
<input type="text" id="forma" />

 </font>
</body>
</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подскажите, как реализовать (пара строчек кода) Volonter jQuery 0 31.01.2014 14:58
Подскажите, как сделать правильно отрисовку без перезагрузки всей страницы yiooxir Angular.js 1 24.12.2013 18:30
Подскажите как реализовать такую задачу Gasherez (X)HTML/CSS 0 20.09.2013 19:59
Подскажите как это сделано Marta Элементы интерфейса 2 12.09.2013 09:02
Подскажите как при помощи JS hta в трею свернуть kimboo Общие вопросы Javascript 4 11.07.2008 16:00