jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

init

Browse source
This commit is contained in:
Ilya Kantor 2014-10-26 22:10:13 +03:00
parent 06f61d8ce8
commit f301cb744d
2271 changed files with 103162 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
02-ui/05-widgets/02-widgets-structure/01-clock/solution.md Normal file
View file

@ -0,0 +1 @@
[edit src="solution"]Открыть в песочнице[/edit]

1
02-ui/05-widgets/02-widgets-structure/01-clock/solution/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"clock","plunk":"APYZSjtojpw9wwlNc6xB"}

31
02-ui/05-widgets/02-widgets-structure/01-clock/solution/clock.js Executable file
View file

@ -0,0 +1,31 @@
function Clock(options) {
var elem = options.elem;
var timer;
function render() {
var date = new Date();
var hours = date.getHours();
if (hours < 10) hours = '0' + hours;
$('.hour', elem).html(hours);
var min = date.getMinutes();
if (min < 10) min = '0' + min;
$('.min', elem).html(min);
var sec = date.getSeconds();
if (sec < 10) sec = '0' + sec;
$('.sec', elem).html(sec);
}
this.stop = function() {
clearInterval(timer);
};
this.start = function() {
render();
timer = setInterval(render, 1000);
}
}

1
02-ui/05-widgets/02-widgets-structure/01-clock/solution/clock/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"clock","plunk":"APYZSjtojpw9wwlNc6xB"}

31
02-ui/05-widgets/02-widgets-structure/01-clock/solution/clock/clock.js Executable file
View file

@ -0,0 +1,31 @@
function Clock(options) {
var elem = options.elem;
var timer;
function render() {
var date = new Date();
var hours = date.getHours();
if (hours < 10) hours = '0' + hours;
$('.hour', elem).html(hours);
var min = date.getMinutes();
if (min < 10) min = '0' + min;
$('.min', elem).html(min);
var sec = date.getSeconds();
if (sec < 10) sec = '0' + sec;
$('.sec', elem).html(sec);
}
this.stop = function() {
clearInterval(timer);
};
this.start = function() {
render();
timer = setInterval(render, 1000);
}
}

37
02-ui/05-widgets/02-widgets-structure/01-clock/solution/clock/index.html Executable file
View file

@ -0,0 +1,37 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Часики</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="clock.js"></script>
<meta charset="utf-8">
<style>
.hour { color: green }
.min { color: blue }
.sec { color: red }
</style>
</head>
<body>
<div id="clock" class="clock">
<span class="hour">00</span>:<span class="min">00</span>:<span class="sec">00</span>
</div>
<script>
var pageClock = new Clock({
elem: $('#clock')
});
</script>
<input type="button" onclick="pageClock.start()" value="Старт">
<input type="button" onclick="pageClock.stop()" value="Стоп">
<input type="button"
onclick="alert('Часы должны останавливаться во время alert,\nи продолжать корректно работать после нажатия на ОК')"
value="alert для проверки корректного возобновления"
>
</body>
</html>

37
02-ui/05-widgets/02-widgets-structure/01-clock/solution/index.html Executable file
View file

@ -0,0 +1,37 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Часики</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="clock.js"></script>
<meta charset="utf-8">
<style>
.hour { color: green }
.min { color: blue }
.sec { color: red }
</style>
</head>
<body>
<div id="clock" class="clock">
<span class="hour">00</span>:<span class="min">00</span>:<span class="sec">00</span>
</div>
<script>
var pageClock = new Clock({
elem: $('#clock')
});
</script>
<input type="button" onclick="pageClock.start()" value="Старт">
<input type="button" onclick="pageClock.stop()" value="Стоп">
<input type="button"
onclick="alert('Часы должны останавливаться во время alert,\nи продолжать корректно работать после нажатия на ОК')"
value="alert для проверки корректного возобновления"
>
</body>
</html>

25
02-ui/05-widgets/02-widgets-structure/01-clock/task.md Normal file
View file

@ -0,0 +1,25 @@
# Часики
[importance 5]
Создайте компонент "Часы" (Clock).
Интерфейс:
```js
var clock = new Clock({
elem: элемент
});
clock.start(); // старт
clock.stop(); // стоп
```
Остальные методы, если нужны, должны быть приватными.
При нажатии на `alert` часы должны приостанавливаться, а затем продолжать идти с правильным временем.
Пример результата:
[iframe src="solution" border=1]
[edit src="task" task/]

1
02-ui/05-widgets/02-widgets-structure/01-clock/task/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"clock-src","plunk":"p4DSlwiBguQ8iirU3RMu"}

38
02-ui/05-widgets/02-widgets-structure/01-clock/task/index.html Executable file
View file

@ -0,0 +1,38 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Часики</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<meta charset="utf-8">
<style>
.hour { color: green }
.min { color: blue }
.sec { color: red }
</style>
</head>
<body>
<div id="clock" class="clock">
<span class="hour">00</span>:<span class="min">00</span>:<span class="sec">00</span>
</div>
<script>
// .. ваш код Clock
var pageClock = new Clock({
elem: $('#clock')
});
</script>
<input type="button" onclick="pageClock.start()" value="Старт">
<input type="button" onclick="pageClock.stop()" value="Стоп">
<input type="button"
onclick="alert('Часы должны останавливаться во время alert,\nи продолжать корректно работать после нажатия на ОК')"
value="alert для проверки корректного возобновления"
>
</body>
</html>