Вход

Просмотр полной версии : Хелп, не могу написать таймер

batarejka
01.11.2015, 14:59
Добрый день, изучаю js, не могу решить дз:
Создать текстовое поле и кнопку, при щелчке на кнопку цвет фона должен мигнуть количество раз, заданное в текстовом поле. Если в поле введены некорректные данные, то вывести сообщение в alert().
Спасибо
Safort
01.11.2015, 15:22
Покажи что уже сделано, а мы поможем исправить/улучшить код.
batarejka
01.11.2015, 16:21
Safort,
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>login</title>
<script languege="javascript">
function check(){
var header = document.getElementById('header');
var z = Number(document.form1.ogonek.value);
func(header,z);
}
function func(header, z){
if (z>0)

header.style.backgroundColor="red";

if (z == false)header.style.backgroundColor="white";
else alert ("введены не корректные данные");

}
</script>
</head>
<body id="header">
<form name = "form1" action = "seript/request.php" method="post">
<label>Кол-во миганий</label>
<input type="textarea" id = "ogonek">
<label id="og1"></label>
<br>
<input type="button" id = "kn1" value="мигай" onClick="check()">
</form>
</body>
</html>
рони
01.11.2015, 17:05
batarejka,
<!DOCTYPE HTML>

<html>

<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #D2B48C;
}

</style>
</head>

<body>
<input id="n" name="" value="3">
<input id="b" name="" type="button" value="go" onclick="go(n.value)">
<script>
function blinker(color, duration, elem) {
var timer, rgb = getComputedStyle(elem)["backgroundColor"];
return function fn(num) {
window.clearTimeout(timer);
if (isNaN(+num)) { alert("!!!"); return}
(function mig(a) {
elem.style.backgroundColor = a % 2 ? color : rgb;
a-- && (timer = window.setTimeout(function() {
mig(a)
}, duration))
})(num * 2)
}
};
var go = blinker('#FF00FF',300, document.body)

</script>

</body>

</html>
ruslan_mart
01.11.2015, 18:12
Дело было вечером - делать было нечего. :)

<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #D2B48C;
}
</style>
</head>

<body>

<script type="text/javascript">
function Blinker(element, color, frames, duration) {
if(element instanceof Node) {
this._color = color;
this._duration = Math.max(+duration, 0) || Blinker.DEFAULT_DURATION;
this._element = element;
this._frames = Math.max(+frames, 1) || 1;
this._currentFrame = this._frames * 2;
this._originalColor = element.style.backgroundColor || '';
}
else {
throw new Error('"Element" is not a "Node"');
}
};
Blinker.prototype = {
isPlayed: false,
onEnd: null,
onEnterFrame: null,

changeFrame: function() {
this._element.style.backgroundColor = this._currentFrame % 2 ? this._originalColor : this._color;
this.dispatchEvent('onEnterFrame');
if(!--this._currentFrame) {
this.stop();
this.dispatchEvent('onEnd');
}
},
dispatchEvent: function(eventName) {
if(typeof this[eventName] == 'function') {
this[eventName]();
}
},
start: function(newDuration) {
if(this.isPlayed) {
this.stop();
this.isPlayed = true;
}
this._intervalID = setInterval(this.changeFrame.bind(this), this._duration);
},
stop: function() {
clearInterval(this._intervalID);
this.isPlayed = true;
this._element.style.backgroundColor = this._originalColor;
}
};

Blinker.DEFAULT_DURATION = 1000;



var blinker = new Blinker(document.body, '#FF0AD4', 10, 500);
blinker.start();

</script>

</body>
</html>
рони
01.11.2015, 18:28
Ruslan_xDD,
:)
batarejka
01.11.2015, 20:26
Ruslan_xDD,
:victory: