Как сделать чтобы значения менялись через 1 секунду o=на+2 m=на+3 и осталась зависимость от формул которые меняют цвет?

Question

allcoma @allcoma

Как сделать чтобы значения менялись через 1 секунду o=на+2 m=на+3 и осталась зависимость от формул которые меняют цвет?

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

		<title>Document</title>
		<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
		<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="http://boedesign.com/demos/gritter/js/jquery.gritter.js"></script><!-- тырим  плагин -->
		<link rel="stylesheet" type="text/css" href="http://boedesign.com/demos/gritter/css/jquery.gritter.css" />


		<script type="text/javascript">
function init(d, r, g, b, r1, g1, b1) {
	d.colors = new Array();
	d.colors.push(r);
	d.colors.push(g);
	d.colors.push(b);
	d.colors.push(r1);
	d.colors.push(g1);
	d.colors.push(b1);
}
interval = []
once= true
function zapusk(d) {
	s = '#';
	for (var i = 0; i < 3; i++) {
		d.colors[i] += d.colors[i + 3];
		if (d.colors[i] < 0) {
			d.colors[i] = 0;
			d.colors[i + 3] = -d.colors[i + 3];
		}
		if (d.colors[i] > 0xff) {
			d.colors[i] = 0xff;
			d.colors[i + 3] = -d.colors[i + 3];
		}
		s1 = Math.floor(d.colors[i]).toString(16);
		while (s1.length < 2) {
			s1 = '0' + s1;
		}
		s += s1;
	}
	d.style.backgroundColor = s;
}
 function start() {
	var h = $('#i0').val()||10; // шаг цвета
	var o = parseInt($('#i1').val())||1111; // число скачков
	var m = parseInt($('#i2').val())||12345; // пройденное время в секундах 
	var a = parseInt($('#i3').val())||9999999999; // пройденное время в секундах максимальное
	var b = parseInt($('#i4').val())||0.001; // 1 цвет в столько секундах
	var c = parseInt($('#i5').val())||a / b; // такой цвет через пройденное время
	var t = parseInt($('#i6').val())||255; // диапазон количество цветов
	var k = parseInt($('#i7').val())||1; // время изменения цвета
	var l = parseInt($('#i8').val())||0; // номер цвета
	
	$('#i0').val(h)
	$('#i1').val(o)
	$('#i2').val(m)
	$('#i3').val(a)
	$('#i4').val(b)
	$('#i5').val(c)
	$('#i6').val(t)
	$('#i7').val(k)
	$('#i8').val(l)
	
	
	var f = Math.floor(c);
	var u = c / t;
	var q = Math.floor(u);
	var z = t * q;
	var x = f - z;
	var e = Math.floor(c) - t * (Math.floor((c) / t)); // перевод такого цвета через пройденное время в заданный диапазон цветов
	var v = Math.floor(a / b) - t * (Math.floor((a / b) / t)); // перевод такого цвета через пройденное время в заданный диапазон цветов
	var p = (((Math.floor(a / b) - t * (Math.floor((a / b) / t))) * o) + (Math.floor(m / b) - t * (Math.floor((m / b) / t)))); // скачки во времени
	var r = Math.floor((((Math.floor(a / b) - t * (Math.floor((a / b) / t))) * o) + (Math.floor(m / b) - t * (Math.floor((m / b) / t))))) - t * (Math.floor(((((Math.floor(a / b) - t * (Math.floor((a / b) / t))) * o) + (Math.floor(m / b) - t * (Math.floor((m / b) / t))))) / t)); // скачки во времени в заданный диапазон цветов
	var s = (((Math.ceil(r * 2)) * 255)) - 255; // скачек в черно белое 0 и 255init(document.getElementById('cvet1'), r, 1, 1, 1, 1, 1); // цвет
	var n=(((Math.ceil(Math.random() *2))*255))-255; // черно белое 0 и 255 случайно
	
	
	
init($(".quard")[0], l, l, Math.floor(a/(b+0.000))-t*(Math.floor((a/(b+0.000))/t)), 1, 1, h);
init($(".quard")[1], l, l, Math.floor(a/(b+0.001))-t*(Math.floor((a/(b+0.001))/t)), 1, 1, h);
init($(".quard")[2], l, l, Math.floor(a/(b+0.002))-t*(Math.floor((a/(b+0.002))/t)), 1, 1, h);
init($(".quard")[3], l, l, Math.floor(a/(b+0.003))-t*(Math.floor((a/(b+0.003))/t)), 1, 1, h);
init($(".quard")[4], l, l, Math.floor(a/(b+0.004))-t*(Math.floor((a/(b+0.004))/t)), 1, 1, h);
init($(".quard")[5], l, l, Math.floor(a/(b+0.005))-t*(Math.floor((a/(b+0.005))/t)), 1, 1, h);
init($(".quard")[6], l, l, Math.floor(a/(b+0.006))-t*(Math.floor((a/(b+0.006))/t)), 1, 1, h);
init($(".quard")[7], l, l, Math.floor(a/(b+0.007))-t*(Math.floor((a/(b+0.007))/t)), 1, 1, h);
init($(".quard")[8], l, l, Math.floor(a/(b+0.008))-t*(Math.floor((a/(b+0.008))/t)), 1, 1, h);



	interval.push(setInterval(function() { zapusk($(".quard")[0]) }, k+1));
interval.push(setInterval(function() { zapusk($(".quard")[1]) }, k+2));
interval.push(setInterval(function() { zapusk($(".quard")[2]) }, k+3));
interval.push(setInterval(function() { zapusk($(".quard")[3]) }, k+4));
interval.push(setInterval(function() { zapusk($(".quard")[4]) }, k+5));
interval.push(setInterval(function() { zapusk($(".quard")[5]) }, k+6));
interval.push(setInterval(function() { zapusk($(".quard")[6]) }, k+7));
interval.push(setInterval(function() { zapusk($(".quard")[7]) }, k+8));
interval.push(setInterval(function() { zapusk($(".quard")[8]) }, k+9));


}
window.onload =  function(){
	
	$(document).on( "click","#start",  function(event){

for (var i = 0; i < interval.length; i++) { //останавливаем   предыдушее
	clearInterval(interval[i]);
};
start()// стартуем новый  цикл  с введенными значениями 
if(once){
$.gritter.add({
	// (string | mandatory) the heading of the notification
	title: 'вопрос ',
	// (string | mandatory) the text inside the notification
	text: ' Если картина имеет ширину и длину то можно получить из красок все варианты изображений и это число не бесконечно как длинна ширина и количество цветов, если в картине перемешать цвета то можно получить другую картину, и можно ли получить перемешиванием цветов картину будущего или прошлого и будет ли эта схем перемешивания машиной времени?'})
once = false;
}
event.preventDefault();	
	})//on
}//  onload
</script>
		<style>
		#cell{width:302px;
		height:302px;
		border:1px solid  rgb(00,00,00);}
		.quard{
			width: 100px;
			height: 100px;
			float: left;
		}
		</style>
		<script>
		</script>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-md-6">
					<form action="" role="form">
						
						<div class="form-group"><label for="i0">шаг цвета</label><input type="text" class="form-control" placeholder="шаг цвета" id="i0"></div>
						<div class="form-group"><label for="i1">число скачков</label><input type="text" class="form-control" placeholder="число скачков" id="i1"></div>
						<div class="form-group"><label for="i2">пройденное время в секундах </label><input type="text" class="form-control" placeholder="пройденное время в секундах " id="i2"></div>
						<div class="form-group"><label for="i3">пройденное время в секундах максимальное</label><input type="text" class="form-control" placeholder="пройденное время в секундах максимальное" id="i3"></div>
						<div class="form-group"><label for="i4">цвет в столько секундах</label><input type="text" class="form-control" placeholder="цвет в столько секундах" id="i4"></div>
						<div class="form-group"><label for="i5">такой цвет через пройденное время</label><input type="text" class="form-control" placeholder="такой цвет через пройденное время" id="i5"></div>
						<div class="form-group"><label for="i6">диапазон количество цветов</label><input type="text" class="form-control" placeholder="диапазон количество цветов" id="i6"></div>
						<div class="form-group"><label for="i7">время изменения цвета</label><input type="text" class="form-control" placeholder="время изменения цвета" id="i7"></div>
						<div class="form-group"><label for="i8">номер цвета</label><input type="text" class="form-control" placeholder="номер цвета" id="i8"></div>
						<div class="form-group"><label for=""></label><button class="btn btn-danger" id="start">поехали</button></div>
					</form>
				</div>
				<div class="col-md-6"><div class="center-block" id="cell">

<div class="quard" style="background-color: rgb(0, 0, 1);"></div>
<div class="quard" style="background-color: rgb(0, 0, 2);"></div>
<div class="quard" style="background-color: rgb(0, 0, 3);"></div>
<div class="quard" style="background-color: rgb(0, 0, 4);"></div>
<div class="quard" style="background-color: rgb(0, 0, 5);"></div>
<div class="quard" style="background-color: rgb(0, 0, 6);"></div>
<div class="quard" style="background-color: rgb(0, 0, 7);"></div>
<div class="quard" style="background-color: rgb(0, 0, 8);"></div>
<div class="quard" style="background-color: rgb(0, 0, 9);"></div>




						
					</div></div></div>
				</div>
			</div>
		</body>
	</html>

Вопрос задан более трёх лет назад
2693 просмотра

Комментировать

Подписаться 2 Оценить Комментировать

Пригласить эксперта

Ответы на вопрос 2

Комментировать

6 комментариев

asdz @asdz

setInterval(function (){o=o+2;m=m+3 }, 1000) перед interval.push(setInterval(function() { zapusk($(".quard")[0]) }, k+1));

Написано более трёх лет назад
asdz @asdz

Только изменения o и m уже ничего не даст во время работы цикла, o используется для вычисления p и r, в свою очередь r влияет на s. Наверное после изменения o и m надо заново вычислить p r s

Написано более трёх лет назад
allcoma @allcoma Автор вопроса

не работает, нужно чтобы зависело от формул меняющие цвет

Написано более трёх лет назад
allcoma @allcoma Автор вопроса

как вычислить заново p r s

Написано более трёх лет назад
asdz @asdz

вам нужно блок вычисляющий p r s вынести в отдельную функцию и вызывать ее каждую секунду из таймера в котором вы предварительно будете приращивать о и м

Написано более трёх лет назад
allcoma @allcoma Автор вопроса

приведите пример html кода

Написано более трёх лет назад