beautify html
This commit is contained in:
Ilya Kantor
parent
ecf1478e7e
commit
5342f628da
354 changed files with 13965 additions and 9486 deletions
|
|
@ -1,16 +1,17 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
На этой странице есть скрипт с ошибкой.
|
||||
<script>
|
||||
|
||||
На этой странице есть скрипт с ошибкой.
|
||||
<script>
|
||||
lalala
|
||||
|
||||
</script>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,13 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
alert('Я - JavaScript!');
|
||||
</script>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,18 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<script>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
var value = prompt('Каково "официальное" название JavaScript?', '');
|
||||
|
||||
if ( value == 'EcmaScript' ) {
|
||||
if (value == 'EcmaScript') {
|
||||
alert('Верно!');
|
||||
} else {
|
||||
alert('Не знаете? "EcmaScript"!');
|
||||
}
|
||||
|
||||
</script>
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,18 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<script>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
var value = prompt('Каково "официальное" название JavaScript?', '');
|
||||
|
||||
if ( value == 'EcmaScript' ) {
|
||||
if (value == 'EcmaScript') {
|
||||
alert('Верно!');
|
||||
} else {
|
||||
alert('Не знаете? "EcmaScript"!');
|
||||
}
|
||||
|
||||
</script>
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,12 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script>
|
||||
|
||||
<script>
|
||||
var value = prompt('Введите число', 0);
|
||||
|
||||
if (value > 0) {
|
||||
|
|
@ -16,8 +17,8 @@
|
|||
} else {
|
||||
alert(0);
|
||||
}
|
||||
|
||||
</script>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,11 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script src="alert.js"></script>
|
||||
<script src="alert.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,8 +1,10 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script src="pow.js"></script>
|
||||
|
|
@ -12,8 +14,9 @@
|
|||
<script>
|
||||
var fiveInCube = pow(5, 3);
|
||||
|
||||
alert( fiveInCube );
|
||||
alert(fiveInCube);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,8 +1,10 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script src="pow.js"></script>
|
||||
|
|
@ -12,8 +14,9 @@
|
|||
<script>
|
||||
var fiveInCube = pow(5, 3);
|
||||
|
||||
alert( fiveInCube );
|
||||
alert(fiveInCube);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,13 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
|
||||
<script> mocha.setup('bdd'); </script>
|
||||
<script>
|
||||
mocha.setup('bdd');
|
||||
</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
|
||||
<script> var assert = chai.assert; </script>
|
||||
<script>
|
||||
var assert = chai.assert;
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -19,6 +24,9 @@
|
|||
<div id="mocha"></div>
|
||||
|
||||
<!-- запустить тесты! -->
|
||||
<script> mocha.run(); </script>
|
||||
<script>
|
||||
mocha.run();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
|
|
@ -8,12 +9,16 @@
|
|||
<!-- подключаем библиотеку Mocha -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
|
||||
<!-- настраиваем Mocha: предстоит BDD-тестирование -->
|
||||
<script> mocha.setup('bdd'); </script>
|
||||
<script>
|
||||
mocha.setup('bdd');
|
||||
</script>
|
||||
|
||||
<!-- подключаем chai -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
|
||||
<!-- в chai есть много всего, выносим assert в глобальную область -->
|
||||
<script> var assert = chai.assert; </script>
|
||||
<script>
|
||||
var assert = chai.assert;
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -31,6 +36,9 @@
|
|||
<div id="mocha"></div>
|
||||
|
||||
<!-- запустить тесты! -->
|
||||
<script> mocha.run(); </script>
|
||||
<script>
|
||||
mocha.run();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
|
|
@ -8,12 +9,16 @@
|
|||
<!-- подключаем библиотеку Mocha -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
|
||||
<!-- настраиваем Mocha: предстоит BDD-тестирование -->
|
||||
<script> mocha.setup('bdd'); </script>
|
||||
<script>
|
||||
mocha.setup('bdd');
|
||||
</script>
|
||||
|
||||
<!-- подключаем chai -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
|
||||
<!-- в chai есть много всего, выносим assert в глобальную область -->
|
||||
<script> var assert = chai.assert; </script>
|
||||
<script>
|
||||
var assert = chai.assert;
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -31,6 +36,9 @@
|
|||
<div id="mocha"></div>
|
||||
|
||||
<!-- запустить тесты! -->
|
||||
<script> mocha.run(); </script>
|
||||
<script>
|
||||
mocha.run();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
|
|
@ -8,12 +9,16 @@
|
|||
<!-- подключаем библиотеку Mocha -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
|
||||
<!-- настраиваем Mocha: предстоит BDD-тестирование -->
|
||||
<script> mocha.setup('bdd'); </script>
|
||||
<script>
|
||||
mocha.setup('bdd');
|
||||
</script>
|
||||
|
||||
<!-- подключаем chai -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
|
||||
<!-- в chai есть много всего, выносим assert в глобальную область -->
|
||||
<script> var assert = chai.assert; </script>
|
||||
<script>
|
||||
var assert = chai.assert;
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -31,6 +36,9 @@
|
|||
<div id="mocha"></div>
|
||||
|
||||
<!-- запустить тесты! -->
|
||||
<script> mocha.run(); </script>
|
||||
<script>
|
||||
mocha.run();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
|
|
@ -8,12 +9,16 @@
|
|||
<!-- подключаем библиотеку Mocha -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
|
||||
<!-- настраиваем Mocha: предстоит BDD-тестирование -->
|
||||
<script> mocha.setup('bdd'); </script>
|
||||
<script>
|
||||
mocha.setup('bdd');
|
||||
</script>
|
||||
|
||||
<!-- подключаем chai -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
|
||||
<!-- в chai есть много всего, выносим assert в глобальную область -->
|
||||
<script> var assert = chai.assert; </script>
|
||||
<script>
|
||||
var assert = chai.assert;
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -22,13 +27,12 @@
|
|||
function pow(x, n) {
|
||||
var result = 1;
|
||||
|
||||
for(var i = 0; i < n; i++) {
|
||||
for (var i = 0; i < n; i++) {
|
||||
result *= x;
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<!-- в этом скрипте находятся спеки -->
|
||||
|
|
@ -38,6 +42,9 @@
|
|||
<div id="mocha"></div>
|
||||
|
||||
<!-- запустить тесты! -->
|
||||
<script> mocha.run(); </script>
|
||||
<script>
|
||||
mocha.run();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
|
|
@ -8,12 +9,16 @@
|
|||
<!-- подключаем библиотеку Mocha -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
|
||||
<!-- настраиваем Mocha: предстоит BDD-тестирование -->
|
||||
<script> mocha.setup('bdd'); </script>
|
||||
<script>
|
||||
mocha.setup('bdd');
|
||||
</script>
|
||||
|
||||
<!-- подключаем chai -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
|
||||
<!-- в chai есть много всего, выносим assert в глобальную область -->
|
||||
<script> var assert = chai.assert; </script>
|
||||
<script>
|
||||
var assert = chai.assert;
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -22,13 +27,12 @@
|
|||
function pow(x, n) {
|
||||
var result = 1;
|
||||
|
||||
for(var i = 0; i < n; i++) {
|
||||
for (var i = 0; i < n; i++) {
|
||||
result *= x;
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<!-- в этом скрипте находятся спеки -->
|
||||
|
|
@ -38,6 +42,9 @@
|
|||
<div id="mocha"></div>
|
||||
|
||||
<!-- запустить тесты! -->
|
||||
<script> mocha.run(); </script>
|
||||
<script>
|
||||
mocha.run();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
|
|
@ -8,12 +9,16 @@
|
|||
<!-- подключаем библиотеку Mocha -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
|
||||
<!-- настраиваем Mocha: предстоит BDD-тестирование -->
|
||||
<script> mocha.setup('bdd'); </script>
|
||||
<script>
|
||||
mocha.setup('bdd');
|
||||
</script>
|
||||
|
||||
<!-- подключаем chai -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
|
||||
<!-- в chai есть много всего, выносим assert в глобальную область -->
|
||||
<script> var assert = chai.assert; </script>
|
||||
<script>
|
||||
var assert = chai.assert;
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -22,10 +27,10 @@
|
|||
function pow(x, n) {
|
||||
if (n < 0) return NaN;
|
||||
if (Math.round(n) != n) return NaN;
|
||||
if (n == 0 && x ==0) return NaN;
|
||||
if (n == 0 && x == 0) return NaN;
|
||||
|
||||
var result = 1;
|
||||
for(var i=0; i<n; i++) {
|
||||
for (var i = 0; i < n; i++) {
|
||||
result *= x;
|
||||
}
|
||||
return result;
|
||||
|
|
@ -39,6 +44,9 @@
|
|||
<div id="mocha"></div>
|
||||
|
||||
<!-- запустить тесты! -->
|
||||
<script> mocha.run(); </script>
|
||||
<script>
|
||||
mocha.run();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
|
|
@ -8,12 +9,16 @@
|
|||
<!-- подключаем библиотеку Mocha -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
|
||||
<!-- настраиваем Mocha: предстоит BDD-тестирование -->
|
||||
<script> mocha.setup('bdd'); </script>
|
||||
<script>
|
||||
mocha.setup('bdd');
|
||||
</script>
|
||||
|
||||
<!-- подключаем chai -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
|
||||
<!-- в chai есть много всего, выносим assert в глобальную область -->
|
||||
<script> var assert = chai.assert; </script>
|
||||
<script>
|
||||
var assert = chai.assert;
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -31,6 +36,9 @@
|
|||
<div id="mocha"></div>
|
||||
|
||||
<!-- запустить тесты! -->
|
||||
<script> mocha.run(); </script>
|
||||
<script>
|
||||
mocha.run();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
|
|
@ -8,12 +9,16 @@
|
|||
<!-- подключаем библиотеку Mocha -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
|
||||
<!-- настраиваем Mocha: предстоит BDD-тестирование -->
|
||||
<script> mocha.setup('bdd'); </script>
|
||||
<script>
|
||||
mocha.setup('bdd');
|
||||
</script>
|
||||
|
||||
<!-- подключаем chai -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
|
||||
<!-- в chai есть много всего, выносим assert в глобальную область -->
|
||||
<script> var assert = chai.assert; </script>
|
||||
<script>
|
||||
var assert = chai.assert;
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -21,7 +26,7 @@
|
|||
<script>
|
||||
function pow(x, n) {
|
||||
var result = 1;
|
||||
for(var i=0; i<n; i++) {
|
||||
for (var i = 0; i < n; i++) {
|
||||
result *= x;
|
||||
}
|
||||
return result;
|
||||
|
|
@ -35,6 +40,9 @@
|
|||
<div id="mocha"></div>
|
||||
|
||||
<!-- запустить тесты! -->
|
||||
<script> mocha.run(); </script>
|
||||
<script>
|
||||
mocha.run();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
|
|
@ -8,12 +9,16 @@
|
|||
<!-- подключаем библиотеку Mocha -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
|
||||
<!-- настраиваем Mocha: предстоит BDD-тестирование -->
|
||||
<script> mocha.setup('bdd'); </script>
|
||||
<script>
|
||||
mocha.setup('bdd');
|
||||
</script>
|
||||
|
||||
<!-- подключаем chai -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
|
||||
<!-- в chai есть много всего, выносим assert в глобальную область -->
|
||||
<script> var assert = chai.assert; </script>
|
||||
<script>
|
||||
var assert = chai.assert;
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -21,7 +26,7 @@
|
|||
<script>
|
||||
function pow(x, n) {
|
||||
var result = 1;
|
||||
for(var i=0; i<n; i++) {
|
||||
for (var i = 0; i < n; i++) {
|
||||
result *= x;
|
||||
}
|
||||
return result;
|
||||
|
|
@ -35,6 +40,9 @@
|
|||
<div id="mocha"></div>
|
||||
|
||||
<!-- запустить тесты! -->
|
||||
<script> mocha.run(); </script>
|
||||
<script>
|
||||
mocha.run();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<script>
|
||||
|
|
@ -7,14 +8,16 @@
|
|||
</script>
|
||||
<script src="hello.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<button>Кнопка</button>
|
||||
<button>Кнопка</button>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
alert(message);
|
||||
</script>
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<script>
|
||||
|
|
@ -7,14 +8,16 @@
|
|||
</script>
|
||||
<script src="hello.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<button>Кнопка</button>
|
||||
<button>Кнопка</button>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
alert(message);
|
||||
</script>
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,49 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style> div { height: 18px; margin: 1px; background-color:green; } </style>
|
||||
<style>
|
||||
div {
|
||||
height: 18px;
|
||||
margin: 1px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<input type="button" id="start" value="Старт">
|
||||
<input type="button" id="stop" value="Стоп" disabled>
|
||||
<input type="button" id="start" value="Старт">
|
||||
<input type="button" id="stop" value="Стоп" disabled>
|
||||
|
||||
<script>
|
||||
for (var i=0; i<=20; i+=2) {
|
||||
document.write('<div>'+i+'</div>');
|
||||
}
|
||||
<script>
|
||||
for (var i = 0; i <= 20; i += 2) {
|
||||
document.write('<div>' + i + '</div>');
|
||||
}
|
||||
|
||||
var startButton = document.getElementById('start');
|
||||
var stopButton = document.getElementById('stop');
|
||||
var startButton = document.getElementById('start');
|
||||
var stopButton = document.getElementById('stop');
|
||||
|
||||
var timers = [];
|
||||
var timers = [];
|
||||
|
||||
stopButton.onclick = function() {
|
||||
stopButton.onclick = function() {
|
||||
startButton.disabled = false;
|
||||
stopButton.disabled = true;
|
||||
|
||||
for(var i=0; i<timers.length; i++) clearInterval(timers[i]);
|
||||
for (var i = 0; i < timers.length; i++) clearInterval(timers[i]);
|
||||
timers = [];
|
||||
}
|
||||
}
|
||||
|
||||
startButton.onclick = function() {
|
||||
startButton.onclick = function() {
|
||||
startButton.disabled = true;
|
||||
stopButton.disabled = false;
|
||||
|
||||
var divs = document.getElementsByTagName('div');
|
||||
for (var i=0; i<divs.length; i++) {
|
||||
for (var i = 0; i < divs.length; i++) {
|
||||
animateDiv(divs, i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function animateDiv(divs, i) {
|
||||
var div = divs[i], speed = div.innerHTML;
|
||||
function animateDiv(divs, i) {
|
||||
var div = divs[i],
|
||||
speed = div.innerHTML;
|
||||
timers[i] = setInterval(function() {
|
||||
div.style.width = (parseInt(div.style.width||0) + 2) % 400 + 'px'
|
||||
div.style.width = (parseInt(div.style.width || 0) + 2) % 400 + 'px'
|
||||
}, speed);
|
||||
}
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,12 +1,14 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script>
|
||||
function Machine(power) {
|
||||
<script>
|
||||
function Machine(power) {
|
||||
this._enabled = false;
|
||||
|
||||
this.enable = function() {
|
||||
|
|
@ -16,9 +18,9 @@ function Machine(power) {
|
|||
this.disable = function() {
|
||||
this._enabled = false;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function CoffeeMachine(power) {
|
||||
function CoffeeMachine(power) {
|
||||
Machine.apply(this, arguments);
|
||||
|
||||
var waterAmount = 0;
|
||||
|
|
@ -38,11 +40,12 @@ function CoffeeMachine(power) {
|
|||
setTimeout(onReady, 1000);
|
||||
};
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
var coffeeMachine = new CoffeeMachine(10000);
|
||||
coffeeMachine.run();
|
||||
</script>
|
||||
var coffeeMachine = new CoffeeMachine(10000);
|
||||
coffeeMachine.run();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,12 +1,14 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script>
|
||||
function Machine(power) {
|
||||
<script>
|
||||
function Machine(power) {
|
||||
this._enabled = false;
|
||||
|
||||
this.enable = function() {
|
||||
|
|
@ -16,9 +18,9 @@ function Machine(power) {
|
|||
this.disable = function() {
|
||||
this._enabled = false;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function CoffeeMachine(power) {
|
||||
function CoffeeMachine(power) {
|
||||
Machine.apply(this, arguments);
|
||||
|
||||
var waterAmount = 0;
|
||||
|
|
@ -35,8 +37,9 @@ function CoffeeMachine(power) {
|
|||
setTimeout(onReady, 1000);
|
||||
};
|
||||
|
||||
}
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,12 +1,14 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script>
|
||||
function Machine(power) {
|
||||
<script>
|
||||
function Machine(power) {
|
||||
this._enabled = false;
|
||||
|
||||
this.enable = function() {
|
||||
|
|
@ -16,9 +18,9 @@ function Machine(power) {
|
|||
this.disable = function() {
|
||||
this._enabled = false;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function CoffeeMachine(power) {
|
||||
function CoffeeMachine(power) {
|
||||
Machine.apply(this, arguments);
|
||||
|
||||
var waterAmount = 0;
|
||||
|
|
@ -45,11 +47,12 @@ function CoffeeMachine(power) {
|
|||
timerId = setTimeout(onReady, 1000);
|
||||
};
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
var coffeeMachine = new CoffeeMachine(10000);
|
||||
coffeeMachine.run();
|
||||
</script>
|
||||
var coffeeMachine = new CoffeeMachine(10000);
|
||||
coffeeMachine.run();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,18 +1,21 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Часики в консоли</title>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script src="clock.js"></script>
|
||||
<script>
|
||||
<script src="clock.js"></script>
|
||||
<script>
|
||||
var clock = new Clock({
|
||||
template: 'h:m:s'
|
||||
});
|
||||
clock.start();
|
||||
</script>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,18 +1,21 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Часики в консоли</title>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script src="clock.js"></script>
|
||||
<script>
|
||||
<script src="clock.js"></script>
|
||||
<script>
|
||||
var clock = new Clock({
|
||||
template: 'h:m:s'
|
||||
});
|
||||
clock.start();
|
||||
</script>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,23 +1,26 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Часики в консоли</title>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script src="clock.js"></script>
|
||||
<script src="clock.js"></script>
|
||||
|
||||
<script src="extended-clock.js"></script>
|
||||
<script src="extended-clock.js"></script>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
var lowResolutionClock = new ExtendedClock({
|
||||
template: 'h:m:s',
|
||||
precision: 10000
|
||||
});
|
||||
|
||||
lowResolutionClock.start();
|
||||
</script>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,14 +1,16 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Часики в консоли</title>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- исходные часы, от них нужно унаследовать -->
|
||||
<script src="clock.js"></script>
|
||||
<script>
|
||||
<!-- исходные часы, от них нужно унаследовать -->
|
||||
<script src="clock.js"></script>
|
||||
<script>
|
||||
var clock = new Clock({
|
||||
template: 'h:m:s'
|
||||
});
|
||||
|
|
@ -26,8 +28,8 @@
|
|||
|
||||
lowResolutionClock.start();
|
||||
*/
|
||||
|
||||
</script>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,13 +1,14 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script src="menu.js"></script>
|
||||
<script>
|
||||
|
||||
<script src="menu.js"></script>
|
||||
<script>
|
||||
function AnimatingMenu() {
|
||||
Menu.apply(this, arguments);
|
||||
}
|
||||
|
|
@ -33,7 +34,7 @@
|
|||
|
||||
AnimatingMenu.prototype._stateAsString = function() {
|
||||
|
||||
switch(this._state) {
|
||||
switch (this._state) {
|
||||
case this.STATE_ANIMATING:
|
||||
return 'анимация';
|
||||
|
||||
|
|
@ -56,12 +57,8 @@
|
|||
menu.close();
|
||||
menu.showState(); // закрыто
|
||||
}, 1000);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,13 +1,14 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script src="menu.js"></script>
|
||||
<script>
|
||||
|
||||
<script src="menu.js"></script>
|
||||
<script>
|
||||
var AnimatingMenu = Menu; // замените на ваш код для AnimatingMenu
|
||||
|
||||
// использование..
|
||||
|
|
@ -25,9 +26,8 @@
|
|||
menu.close();
|
||||
menu.showState(); // закрыто (закрытие без анимации)
|
||||
}, 1000);
|
||||
|
||||
|
||||
</script>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,17 +1,18 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<script src="setImmediate.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<button onclick="testTimeout()">testTimeout</button>
|
||||
<button onclick="testImmediate()">testImmediate</button>
|
||||
|
||||
<script>
|
||||
<button onclick="testTimeout()">testTimeout</button>
|
||||
<button onclick="testImmediate()">testImmediate</button>
|
||||
|
||||
<script>
|
||||
function testTimeout() {
|
||||
var start = new Date();
|
||||
var i = 0;
|
||||
|
|
@ -37,9 +38,8 @@
|
|||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,18 +1,20 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="ex2" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;">
|
||||
<div id="ex2" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;">
|
||||
<h2 style="color:#333; margin:0; padding:0 0 7px 0; font:bold 15px Arial;">Соз|даем Range-объект</h2>
|
||||
<p style="color:#333; margin:0; font:13px Arial;">От третье|го символа заголовка до десятого символа это абзаца.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button onclick="alert(domRangeCreate())">Создать Range и вывести его текст</button>
|
||||
<button onclick="alert(domRangeCreate())">Создать Range и вывести его текст</button>
|
||||
|
||||
<script>
|
||||
function domRangeCreate() {
|
||||
<script>
|
||||
function domRangeCreate() {
|
||||
// Найдем корневой контейнер
|
||||
var root = document.getElementById('ex2');
|
||||
// Найдем контейнеры граничных точек (в данном случае тестовые)
|
||||
|
|
@ -22,16 +24,17 @@ function domRangeCreate() {
|
|||
// Создаем Range
|
||||
var rng = document.createRange();
|
||||
// Задаем верхнюю граничную точку, передав контейнер и смещение
|
||||
rng.setStart( start, 3 );
|
||||
rng.setStart(start, 3);
|
||||
// Аналогично для нижней границы
|
||||
rng.setEnd( end, 10 );
|
||||
rng.setEnd(end, 10);
|
||||
// Теперь мы можем вернуть текст, который содержится в полученной области
|
||||
return rng.toString();
|
||||
} else {
|
||||
return 'Вероятно, у вас IE8-, смотрите реализацию TextRange ниже';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,34 +1,37 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="ex3" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;">
|
||||
<div id="ex3" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;">
|
||||
Найдем в этом тексте слово "бабуля" и подсветим его синим фоном
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
<div>
|
||||
<input onclick="domRangehighlight('бабуля'); this.style.display = 'none';" type="button" value="Найти!">
|
||||
</div>
|
||||
<script>
|
||||
function domRangehighlight( text ) {
|
||||
</div>
|
||||
<script>
|
||||
function domRangehighlight(text) {
|
||||
var root = document.getElementById('ex3').firstChild;
|
||||
var content = root.nodeValue;
|
||||
if ( ~content.indexOf( text ) ) {
|
||||
if ( document.createRange ) {
|
||||
if (~content.indexOf(text)) {
|
||||
if (document.createRange) {
|
||||
var rng = document.createRange();
|
||||
rng.setStart( root, content.indexOf( text ) );
|
||||
rng.setEnd( root, content.indexOf( text ) + text.length );
|
||||
rng.setStart(root, content.indexOf(text));
|
||||
rng.setEnd(root, content.indexOf(text) + text.length);
|
||||
var highlightDiv = document.createElement('span');
|
||||
highlightDiv.style.backgroundColor = 'blue';
|
||||
rng.surroundContents( highlightDiv );
|
||||
rng.surroundContents(highlightDiv);
|
||||
} else
|
||||
alert('Вероятно, у вас IE8-, смотрите реализацию TextRange ниже');
|
||||
} else
|
||||
alert('Совпадений не найдено');
|
||||
}
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="fixIERangeObject.js"></script>
|
||||
|
||||
|
|
@ -8,7 +9,7 @@
|
|||
function test() {
|
||||
|
||||
var range = getRangeObject();
|
||||
if(range) {
|
||||
if (range) {
|
||||
alert(range);
|
||||
alert(range.startContainer.nodeValue);
|
||||
alert(range.startOffset);
|
||||
|
|
@ -18,10 +19,12 @@
|
|||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
Выделите текст:
|
||||
<pre>The quick brown fox jumped over the lazy dog</pre>
|
||||
<input type="button" value="Вывести выделение и свойства startContainer, startOffset, endOffset" onclick="test();" />
|
||||
</body>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,32 +1,35 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="ex4" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;">
|
||||
<div id="ex4" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;">
|
||||
Найдем в этом тексте слово "бабуля" и подсветим его синим фоном
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
<div>
|
||||
<input onclick="ieTextRangeHighlight('бабуля'); this.style.display = 'none';" type="button" value="Найти!">
|
||||
</div>
|
||||
<script>
|
||||
function ieTextRangeHighlight(text) {
|
||||
</div>
|
||||
<script>
|
||||
function ieTextRangeHighlight(text) {
|
||||
var root = document.getElementById('ex4');
|
||||
var content = root.firstChild.nodeValue;
|
||||
if ( ~content.indexOf(text) ) {
|
||||
if ( document.body.createTextRange ) {
|
||||
if (~content.indexOf(text)) {
|
||||
if (document.body.createTextRange) {
|
||||
var rng = document.body.createTextRange();
|
||||
rng.moveToElementText( root );
|
||||
if ( rng.findText( text ) )
|
||||
rng.pasteHTML( '<span style="background:blue;">' + text + '</span>' );
|
||||
rng.moveToElementText(root);
|
||||
if (rng.findText(text))
|
||||
rng.pasteHTML('<span style="background:blue;">' + text + '</span>');
|
||||
} else
|
||||
alert('Вероятно, у вас не IE, смотрите реализацию Range выше');
|
||||
} else
|
||||
alert('Совпадений не найдено');
|
||||
}
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,34 +1,37 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="ex5" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;">
|
||||
<div id="ex5" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;">
|
||||
Снова будем выделять <span>бабулю</span>, на этот раз без поиска.
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
<div>
|
||||
<input onclick="setSelection()" type="button" value="Выделить бабулю">
|
||||
</div>
|
||||
<script>
|
||||
function setSelection() {
|
||||
</div>
|
||||
<script>
|
||||
function setSelection() {
|
||||
var target = document.getElementById('ex5').getElementsByTagName('span')[0];
|
||||
var rng, sel;
|
||||
if ( document.createRange ) {
|
||||
if (document.createRange) {
|
||||
rng = document.createRange();
|
||||
rng.selectNode( target )
|
||||
rng.selectNode(target)
|
||||
sel = window.getSelection();
|
||||
sel.removeAllRanges();
|
||||
sel.addRange( rng );
|
||||
sel.addRange(rng);
|
||||
} else {
|
||||
var rng = document.body.createTextRange();
|
||||
rng.moveToElementText( target );
|
||||
rng.moveToElementText(target);
|
||||
rng.select();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<script src="lib.js"></script>
|
||||
|
|
@ -12,13 +13,14 @@
|
|||
<script src="TreeDropTarget.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="dragTree.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Возьмите за любой заголовок и поменяйте ему родителя.<br>
|
||||
В собственных детей перенести нельзя.<br>
|
||||
Потомки всегда отсортированы по алфавиту.
|
||||
Возьмите за любой заголовок и поменяйте ему родителя.
|
||||
<br> В собственных детей перенести нельзя.
|
||||
<br> Потомки всегда отсортированы по алфавиту.
|
||||
|
||||
<ul id="tree">
|
||||
<ul id="tree">
|
||||
<li><span>Древо жизни (сверхмалая часть)</span>
|
||||
<ul>
|
||||
<li><span>Грибы</span>
|
||||
|
|
@ -58,13 +60,14 @@
|
|||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
var tree = document.getElementById('tree');
|
||||
new TreeDragZone(tree);
|
||||
new TreeDropTarget(tree);
|
||||
</script>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,48 +1,57 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head><meta charset="utf-8">
|
||||
<style>
|
||||
.hour { color: red }
|
||||
.min { color: green }
|
||||
.sec { color: blue }
|
||||
</style>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.hour {
|
||||
color: red
|
||||
}
|
||||
|
||||
.min {
|
||||
color: green
|
||||
}
|
||||
|
||||
.sec {
|
||||
color: blue
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="clock">
|
||||
<div id="clock">
|
||||
<span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
var timerId;
|
||||
|
||||
var timerId;
|
||||
|
||||
function update() {
|
||||
function update() {
|
||||
var clock = document.getElementById('clock');
|
||||
var date = new Date();
|
||||
|
||||
var hours = date.getHours();
|
||||
if (hours < 10) hours = '0'+hours;
|
||||
if (hours < 10) hours = '0' + hours;
|
||||
clock.children[0].innerHTML = hours;
|
||||
|
||||
var minutes = date.getMinutes();
|
||||
if (minutes < 10) minutes = '0'+minutes;
|
||||
if (minutes < 10) minutes = '0' + minutes;
|
||||
clock.children[1].innerHTML = minutes;
|
||||
|
||||
var seconds = date.getSeconds();
|
||||
if (seconds < 10) seconds = '0'+seconds;
|
||||
if (seconds < 10) seconds = '0' + seconds;
|
||||
clock.children[2].innerHTML = seconds;
|
||||
}
|
||||
}
|
||||
|
||||
function clockStart() {
|
||||
function clockStart() {
|
||||
setInterval(update, 1000);
|
||||
update(); // <-- начать тут же, не ждать 1 секунду пока setInterval сработает
|
||||
}
|
||||
}
|
||||
|
||||
clockStart();
|
||||
|
||||
|
||||
</script>
|
||||
clockStart();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,11 +1,13 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<input type="button" onclick="clockStart()" value="Start">
|
||||
<input type="button" onclick="clockStart()" value="Start">
|
||||
|
||||
<input type="button" onclick="clockStop()" value="Stop">
|
||||
<input type="button" onclick="clockStop()" value="Stop">
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,12 +1,14 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Создание списка</h1>
|
||||
|
||||
<script>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Создание списка</h1>
|
||||
|
||||
<script>
|
||||
var ul = document.createElement('ul');
|
||||
document.body.appendChild(ul);
|
||||
|
||||
|
|
@ -21,7 +23,8 @@
|
|||
li.appendChild(document.createTextNode(data));
|
||||
ul.appendChild(li);
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,34 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="container"></div>
|
||||
<div id="container"></div>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
var data = {
|
||||
"Рыбы":{
|
||||
"Форель":{},
|
||||
"Щука":{}
|
||||
"Рыбы": {
|
||||
"Форель": {},
|
||||
"Щука": {}
|
||||
},
|
||||
|
||||
"Деревья":{
|
||||
"Хвойные":{
|
||||
"Лиственница":{},
|
||||
"Ель":{}
|
||||
"Деревья": {
|
||||
"Хвойные": {
|
||||
"Лиственница": {},
|
||||
"Ель": {}
|
||||
},
|
||||
"Цветковые":{
|
||||
"Берёза":{},
|
||||
"Тополь":{}
|
||||
"Цветковые": {
|
||||
"Берёза": {},
|
||||
"Тополь": {}
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
function createTree(container, obj) {
|
||||
container.appendChild( createTreeDom(obj) );
|
||||
container.appendChild(createTreeDom(obj));
|
||||
}
|
||||
|
||||
function createTreeDom(obj) {
|
||||
|
|
@ -61,7 +63,8 @@
|
|||
|
||||
var container = document.getElementById('container');
|
||||
createTree(container, data);
|
||||
</script>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,27 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="container"></div>
|
||||
<div id="container"></div>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
var data = {
|
||||
"Рыбы":{
|
||||
"Форель":{},
|
||||
"Щука":{}
|
||||
"Рыбы": {
|
||||
"Форель": {},
|
||||
"Щука": {}
|
||||
},
|
||||
|
||||
"Деревья":{
|
||||
"Хвойные":{
|
||||
"Лиственница":{},
|
||||
"Ель":{}
|
||||
"Деревья": {
|
||||
"Хвойные": {
|
||||
"Лиственница": {},
|
||||
"Ель": {}
|
||||
},
|
||||
"Цветковые":{
|
||||
"Берёза":{},
|
||||
"Тополь":{}
|
||||
"Цветковые": {
|
||||
"Берёза": {},
|
||||
"Тополь": {}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -44,6 +46,7 @@
|
|||
|
||||
var container = document.getElementById('container');
|
||||
createTree(container, data);
|
||||
</script>
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,13 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="tree"></div>
|
||||
<div id="tree"></div>
|
||||
|
||||
<!-- Результат должен быть таким:
|
||||
<!-- Результат должен быть таким:
|
||||
<div id="tree">
|
||||
<ul>
|
||||
<li>Рыбы
|
||||
|
|
@ -36,21 +38,21 @@
|
|||
</div>
|
||||
-->
|
||||
|
||||
<script>
|
||||
<script>
|
||||
var data = {
|
||||
"Рыбы":{
|
||||
"Форель":{},
|
||||
"Щука":{}
|
||||
"Рыбы": {
|
||||
"Форель": {},
|
||||
"Щука": {}
|
||||
},
|
||||
|
||||
"Деревья":{
|
||||
"Хвойные":{
|
||||
"Лиственница":{},
|
||||
"Ель":{}
|
||||
"Деревья": {
|
||||
"Хвойные": {
|
||||
"Лиственница": {},
|
||||
"Ель": {}
|
||||
},
|
||||
"Цветковые":{
|
||||
"Берёза":{},
|
||||
"Тополь":{}
|
||||
"Цветковые": {
|
||||
"Берёза": {},
|
||||
"Тополь": {}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -58,7 +60,8 @@
|
|||
/* ваш код */
|
||||
|
||||
createTree(document.getElementById('tree'), data);
|
||||
</script>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,9 +1,13 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head><meta charset="utf-8"></head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<ul>
|
||||
<li>Животные
|
||||
<ul>
|
||||
<li>Млекопитающие
|
||||
|
|
@ -39,21 +43,22 @@
|
|||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<script>
|
||||
var lis = document.getElementsByTagName('li');
|
||||
<script>
|
||||
var lis = document.getElementsByTagName('li');
|
||||
|
||||
for(i=0; i<lis.length; i++) {
|
||||
for (i = 0; i < lis.length; i++) {
|
||||
// получить количество детей
|
||||
var childCount = lis[i].getElementsByTagName('li').length;
|
||||
if (!childCount) continue;
|
||||
|
||||
// добавить кол-во детей к текстовому узлу
|
||||
lis[i].firstChild.data += ' ['+childCount+']';
|
||||
lis[i].firstChild.data += ' [' + childCount + ']';
|
||||
|
||||
}
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,9 +1,13 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head><meta charset="utf-8"></head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<ul>
|
||||
<li>Животные
|
||||
<ul>
|
||||
<li>Млекопитающие
|
||||
|
|
@ -39,11 +43,12 @@
|
|||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
// .. ваш код ..
|
||||
</script>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,31 +1,34 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td, th {
|
||||
<head>
|
||||
<style>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
border: 1px solid black;
|
||||
padding: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
th {
|
||||
font-weight: bold;
|
||||
background-color: #E6E6E6;
|
||||
}
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
}
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div id="calendar"></div>
|
||||
<div id="calendar"></div>
|
||||
|
||||
<script>
|
||||
function createCalendar(id, year, month) {
|
||||
<script>
|
||||
function createCalendar(id, year, month) {
|
||||
var elem = document.getElementById(id);
|
||||
|
||||
var mon = month - 1; // месяцы в JS идут от 0 до 11, а не от 1 до 12
|
||||
|
|
@ -36,24 +39,24 @@ function createCalendar(id, year, month) {
|
|||
// заполнить первый ряд от понедельника
|
||||
// и до дня, с которого начинается месяц
|
||||
// * * * | 1 2 3 4
|
||||
for (var i=0; i<getDay(d); i++) {
|
||||
for (var i = 0; i < getDay(d); i++) {
|
||||
table += '<td></td>';
|
||||
}
|
||||
|
||||
// ячейки календаря с датами
|
||||
while(d.getMonth() == mon) {
|
||||
table += '<td>'+d.getDate()+'</td>';
|
||||
while (d.getMonth() == mon) {
|
||||
table += '<td>' + d.getDate() + '</td>';
|
||||
|
||||
if (getDay(d) % 7 == 6) { // вс, последний день - перевод строки
|
||||
table += '</tr><tr>';
|
||||
}
|
||||
|
||||
d.setDate(d.getDate()+1);
|
||||
d.setDate(d.getDate() + 1);
|
||||
}
|
||||
|
||||
// добить таблицу пустыми ячейками, если нужно
|
||||
if (getDay(d) != 0) {
|
||||
for (var i=getDay(d); i<7; i++) {
|
||||
for (var i = getDay(d); i < 7; i++) {
|
||||
table += '<td></td>';
|
||||
}
|
||||
}
|
||||
|
|
@ -63,18 +66,19 @@ function createCalendar(id, year, month) {
|
|||
|
||||
// только одно присваивание innerHTML
|
||||
elem.innerHTML = table;
|
||||
}
|
||||
}
|
||||
|
||||
function getDay(date) { // получить номер дня недели, от 0(пн) до 6(вс)
|
||||
function getDay(date) { // получить номер дня недели, от 0(пн) до 6(вс)
|
||||
var day = date.getDay();
|
||||
if (day == 0) day = 7;
|
||||
return day - 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
createCalendar("calendar", 2012, 9)
|
||||
</script>
|
||||
createCalendar("calendar", 2012, 9)
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,39 +1,41 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td, th {
|
||||
<head>
|
||||
<style>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
border: 1px solid black;
|
||||
padding: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
th {
|
||||
font-weight: bold;
|
||||
background-color: #E6E6E6;
|
||||
}
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
}
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div id="calendar"></div>
|
||||
<div id="calendar"></div>
|
||||
|
||||
<script>
|
||||
|
||||
function createCalendar(id, year, month) {
|
||||
<script>
|
||||
function createCalendar(id, year, month) {
|
||||
var elem = document.getElementById(id)
|
||||
|
||||
// ... ваш код, который генерирует в elem календарь
|
||||
}
|
||||
}
|
||||
|
||||
createCalendar('calendar', 2011, 1)
|
||||
|
||||
</script>
|
||||
createCalendar('calendar', 2011, 1)
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,20 +1,23 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Вставляются 100 элементов LI в пустой UL.
|
||||
Вставляются 100 элементов LI в пустой UL.
|
||||
|
||||
<input type="button" onclick="alert(bench(DocumentFragmentTest.insertPlain,200))" value="Замерить время на обычную вставку"/>
|
||||
<input type="button" onclick="alert(bench(DocumentFragmentTest.insertPlain,200))" value="Замерить время на обычную вставку" />
|
||||
|
||||
<input type="button" onclick="alert(bench(DocumentFragmentTest.insertDocumentFragment,200))" value="Замерить время на вставку через DocumentFragment">
|
||||
<input type="button" onclick="alert(bench(DocumentFragmentTest.insertDocumentFragment,200))" value="Замерить время на вставку через DocumentFragment">
|
||||
|
||||
<ul id="bench-list"></ul>
|
||||
<ul id="bench-list"></ul>
|
||||
|
||||
<script src="bench.js"></script>
|
||||
<script src="documentfragment-bench.js"></script>
|
||||
<script src="bench.js"></script>
|
||||
<script src="documentfragment-bench.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,14 +1,18 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head><meta charset="utf-8"></head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
Кнопка:
|
||||
<!-- создайте элемент и расположите его тут -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
var a = document.createElement('a');
|
||||
a.className = 'button';
|
||||
a.appendChild(document.createTextNode('Нажми меня'));
|
||||
|
|
@ -28,10 +32,9 @@
|
|||
|
||||
var div = document.body.children[0];
|
||||
div.appendChild(a);
|
||||
|
||||
|
||||
</script>
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,17 +1,22 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head><meta charset="utf-8"></head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
Кнопка:
|
||||
<!-- создайте элемент и расположите его тут -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
// .. ваш код
|
||||
</script>
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,15 +1,19 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h2>Уведомление</h2>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum aspernatur quam ex eaque inventore quod voluptatem adipisci omnis nemo nulla fugit iste numquam ducimus cumque minima porro ea quidem maxime necessitatibus beatae labore soluta voluptatum magnam consequatur sit laboriosam velit excepturi laborum sequi eos placeat et quia deleniti? Corrupti velit impedit autem et obcaecati fuga debitis nemo ratione iste veniam amet dicta hic ipsam unde cupiditate incidunt aut iure ipsum officiis soluta temporibus. Tempore dicta ullam delectus numquam consectetur quisquam explicabo culpa excepturi placeat quo sequi molestias reprehenderit hic at nemo cumque voluptates quidem repellendus maiores unde earum molestiae ad.
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum aspernatur quam ex eaque inventore quod voluptatem adipisci omnis nemo nulla fugit iste numquam ducimus cumque minima porro ea quidem maxime necessitatibus beatae labore soluta voluptatum
|
||||
magnam consequatur sit laboriosam velit excepturi laborum sequi eos placeat et quia deleniti? Corrupti velit impedit autem et obcaecati fuga debitis nemo ratione iste veniam amet dicta hic ipsam unde cupiditate incidunt aut iure ipsum officiis soluta
|
||||
temporibus. Tempore dicta ullam delectus numquam consectetur quisquam explicabo culpa excepturi placeat quo sequi molestias reprehenderit hic at nemo cumque voluptates quidem repellendus maiores unde earum molestiae ad.
|
||||
</p>
|
||||
|
||||
<script>
|
||||
|
|
@ -53,9 +57,9 @@
|
|||
className: "welcome"
|
||||
});
|
||||
}, 2000);
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,15 +1,19 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h2>Уведомление</h2>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum aspernatur quam ex eaque inventore quod voluptatem adipisci omnis nemo nulla fugit iste numquam ducimus cumque minima porro ea quidem maxime necessitatibus beatae labore soluta voluptatum magnam consequatur sit laboriosam velit excepturi laborum sequi eos placeat et quia deleniti? Corrupti velit impedit autem et obcaecati fuga debitis nemo ratione iste veniam amet dicta hic ipsam unde cupiditate incidunt aut iure ipsum officiis soluta temporibus. Tempore dicta ullam delectus numquam consectetur quisquam explicabo culpa excepturi placeat quo sequi molestias reprehenderit hic at nemo cumque voluptates quidem repellendus maiores unde earum molestiae ad.
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum aspernatur quam ex eaque inventore quod voluptatem adipisci omnis nemo nulla fugit iste numquam ducimus cumque minima porro ea quidem maxime necessitatibus beatae labore soluta voluptatum
|
||||
magnam consequatur sit laboriosam velit excepturi laborum sequi eos placeat et quia deleniti? Corrupti velit impedit autem et obcaecati fuga debitis nemo ratione iste veniam amet dicta hic ipsam unde cupiditate incidunt aut iure ipsum officiis soluta
|
||||
temporibus. Tempore dicta ullam delectus numquam consectetur quisquam explicabo culpa excepturi placeat quo sequi molestias reprehenderit hic at nemo cumque voluptates quidem repellendus maiores unde earum molestiae ad.
|
||||
</p>
|
||||
|
||||
<p>В CSS есть готовый класс notification, который можно ставить уведомлению.</p>
|
||||
|
|
@ -38,9 +42,9 @@
|
|||
className: "welcome"
|
||||
});
|
||||
}, 2000);
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,24 +1,30 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<script src="getiecomputedstyle.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<style>
|
||||
#margin-test { margin: 1%; border: 1px solid black; }
|
||||
</style>
|
||||
<style>
|
||||
#margin-test {
|
||||
margin: 1%;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="margin-test">Тестовый элемент с margin 1%</div>
|
||||
<div id="margin-test">Тестовый элемент с margin 1%</div>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
var elem = document.getElementById('margin-test');
|
||||
if (!window.getComputedStyle) { // старые IE
|
||||
document.write(getIEComputedStyle(elem, 'marginTop'));
|
||||
} else {
|
||||
document.write('Пример работает только в IE8-');
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,47 +1,50 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<style>
|
||||
<style>
|
||||
#moving-div {
|
||||
border: 5px groove green;
|
||||
padding: 5px;
|
||||
margin: 10px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Before Before Before
|
||||
Before Before Before
|
||||
|
||||
<div id="moving-div">
|
||||
Text Text Text<br>
|
||||
Text Text Text<br>
|
||||
</div>
|
||||
<div id="moving-div">
|
||||
Text Text Text
|
||||
<br> Text Text Text
|
||||
<br>
|
||||
</div>
|
||||
|
||||
After After After
|
||||
After After After
|
||||
|
||||
<script>
|
||||
var div = document.getElementById('moving-div')
|
||||
<script>
|
||||
var div = document.getElementById('moving-div')
|
||||
|
||||
var placeHolder = document.createElement('div')
|
||||
placeHolder.style.height = div.offsetHeight + 'px'
|
||||
var placeHolder = document.createElement('div')
|
||||
placeHolder.style.height = div.offsetHeight + 'px'
|
||||
|
||||
var computedStyle = div.currentStyle || getComputedStyle(div, null)
|
||||
var computedStyle = div.currentStyle || getComputedStyle(div, null)
|
||||
|
||||
placeHolder.style.marginTop = computedStyle.marginTop // full prop name
|
||||
placeHolder.style.marginBottom = computedStyle.marginBottom
|
||||
placeHolder.style.marginTop = computedStyle.marginTop // full prop name
|
||||
placeHolder.style.marginBottom = computedStyle.marginBottom
|
||||
|
||||
// highlight it for demo purposes
|
||||
placeHolder.style.backgroundColor = '#C0C0C0'
|
||||
// highlight it for demo purposes
|
||||
placeHolder.style.backgroundColor = '#C0C0C0'
|
||||
|
||||
document.body.insertBefore(placeHolder, div)
|
||||
document.body.insertBefore(placeHolder, div)
|
||||
|
||||
div.style.position = 'absolute'
|
||||
div.style.right = div.style.top = 0
|
||||
|
||||
</script>
|
||||
div.style.position = 'absolute'
|
||||
div.style.right = div.style.top = 0
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,33 +1,37 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<style>
|
||||
<style>
|
||||
#moving-div {
|
||||
border: 5px groove green;
|
||||
background-color: yellow;
|
||||
padding: 5px;
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Before Before Before
|
||||
Before Before Before
|
||||
|
||||
<div id="moving-div">
|
||||
Text Text Text<br>
|
||||
Text Text Text<br>
|
||||
</div>
|
||||
<div id="moving-div">
|
||||
Text Text Text
|
||||
<br> Text Text Text
|
||||
<br>
|
||||
</div>
|
||||
|
||||
After After After
|
||||
After After After
|
||||
|
||||
<script>
|
||||
// .. Add your code here
|
||||
<script>
|
||||
// .. Add your code here
|
||||
|
||||
var div = document.getElementById('moving-div')
|
||||
div.style.position = 'absolute'
|
||||
div.style.right = div.style.top = 0
|
||||
</script>
|
||||
var div = document.getElementById('moving-div')
|
||||
div.style.position = 'absolute'
|
||||
div.style.right = div.style.top = 0
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<style>
|
||||
<style>
|
||||
#field {
|
||||
width: 200px;
|
||||
border: 10px groove black;
|
||||
|
|
@ -12,28 +13,29 @@
|
|||
#ball {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div id="field">
|
||||
<img src="https://js.cx/clipart/ball.svg" id="ball">
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
</div>
|
||||
<div id="field">
|
||||
<img src="https://js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
var ball = document.getElementById('ball')
|
||||
var field = document.getElementById('field')
|
||||
<script>
|
||||
var ball = document.getElementById('ball')
|
||||
var field = document.getElementById('field')
|
||||
|
||||
// ball.offsetWidth=0 before image loaded!
|
||||
// to fix: set width
|
||||
ball.style.left = Math.round(field.clientWidth / 2)+'px'
|
||||
ball.style.top = Math.round(field.clientHeight / 2)+'px'
|
||||
|
||||
</script>
|
||||
// ball.offsetWidth=0 before image loaded!
|
||||
// to fix: set width
|
||||
ball.style.left = Math.round(field.clientWidth / 2) + 'px'
|
||||
ball.style.top = Math.round(field.clientHeight / 2) + 'px'
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<style>
|
||||
<style>
|
||||
#field {
|
||||
width: 200px;
|
||||
border: 10px groove black;
|
||||
|
|
@ -12,28 +13,29 @@
|
|||
#ball {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div id="field">
|
||||
<img src="https://js.cx/clipart/ball.svg" width="40" height="40" id="ball">
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
</div>
|
||||
<div id="field">
|
||||
<img src="https://js.cx/clipart/ball.svg" width="40" height="40" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
var ball = document.getElementById('ball')
|
||||
var field = document.getElementById('field')
|
||||
<script>
|
||||
var ball = document.getElementById('ball')
|
||||
var field = document.getElementById('field')
|
||||
|
||||
// ball.offsetWidth=0 before image loaded!
|
||||
// to fix: set width
|
||||
ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2)+'px'
|
||||
ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2)+'px'
|
||||
|
||||
</script>
|
||||
// ball.offsetWidth=0 before image loaded!
|
||||
// to fix: set width
|
||||
ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px'
|
||||
ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'px'
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<style>
|
||||
<style>
|
||||
#field {
|
||||
width: 200px;
|
||||
border: 10px groove black;
|
||||
|
|
@ -12,16 +13,18 @@
|
|||
#ball {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div id="field">
|
||||
<img src="https://js.cx/clipart/ball.svg" id="ball">
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
</div>
|
||||
<div id="field">
|
||||
<img src="https://js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
|
@ -15,23 +16,19 @@
|
|||
body {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="elem">
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
</div>
|
||||
<div id="elem">
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
текст текст
|
||||
</div>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
var elem = document.getElementById("elem");
|
||||
|
||||
// неверно!
|
||||
|
|
@ -48,9 +45,9 @@
|
|||
var bodyInnerWidth = bodyWidth - parseInt(style.paddingLeft) - parseInt(style.paddingRight);
|
||||
|
||||
elem.style.width = bodyInnerWidth + 'px';
|
||||
|
||||
</script>
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
|
@ -14,28 +15,25 @@
|
|||
body {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="elem">
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
</div>
|
||||
<div id="elem">
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
текст текст
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var elem = document.getElementById("elem");
|
||||
<script>
|
||||
var elem = document.getElementById("elem");
|
||||
|
||||
// ... ваш код
|
||||
</script>
|
||||
// ... ваш код
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,24 +1,26 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head><meta charset="utf-8"></head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="elem" style="overflow-y:scroll;width:300px;height:200px;border:1px solid black">
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
</div>
|
||||
<div id="elem" style="overflow-y:scroll;width:300px;height:200px;border:1px solid black">
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// FF: 200, Ch/Sa: 184, Op: 200, IE9: 184, IE7,8:200
|
||||
</script>
|
||||
<script>
|
||||
// FF: 200, Ch/Sa: 184, Op: 200, IE9: 184, IE7,8:200
|
||||
</script>
|
||||
|
||||
У элемента стоит <code>style="width:300px"</code><br>
|
||||
У элемента стоит <code>style="width:300px"</code>
|
||||
<br>
|
||||
|
||||
<button onclick="alert( getComputedStyle(elem).width )">alert( getComputedStyle(elem).width )</button>
|
||||
<button onclick="alert( getComputedStyle(elem).width )">alert( getComputedStyle(elem).width )</button>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style type="text/css">
|
||||
|
|
@ -15,6 +16,7 @@
|
|||
border: 25px solid #E8C48F;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.key {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
|
|
@ -22,54 +24,56 @@
|
|||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div id="example">
|
||||
<h3>Introduction</h3>
|
||||
<p>This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that company's Navigator 2.0 browser. It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoft starting with Internet Explorer 3.0. The development of this Standard started in November 1996. The first edition of this Ecma Standard was adopted by the Ecma General Assembly of June 1997.</p>
|
||||
<div id="example">
|
||||
<h3>Introduction</h3>
|
||||
<p>This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that company's Navigator 2.0 browser.
|
||||
It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoft starting with Internet Explorer 3.0. The development of this Standard started in November 1996. The first edition of this Ecma Standard was adopted by the
|
||||
Ecma General Assembly of June 1997.</p>
|
||||
|
||||
<p>That Ecma Standard was submitted to ISO/IEC JTC 1 for adoption under the fast-track procedure, and approved as international standard ISO/IEC 16262, in April 1998. The Ecma General Assembly of June 1998 approved the second edition of ECMA-262 to keep it fully aligned with ISO/IEC 16262. Changes between the first and the second edition are editorial in nature.</p>
|
||||
<p>That Ecma Standard was submitted to ISO/IEC JTC 1 for adoption under the fast-track procedure, and approved as international standard ISO/IEC 16262, in April 1998. The Ecma General Assembly of June 1998 approved the second edition of ECMA-262 to keep
|
||||
it fully aligned with ISO/IEC 16262. Changes between the first and the second edition are editorial in nature.</p>
|
||||
|
||||
<p>The third edition of the Standard introduced powerful regular expressions, better string handling, new control statements, try/catch exception handling, tighter definition of errors, formatting for numeric output and minor changes in anticipation of forthcoming internationalisation facilities and future language growth. The third edition of the ECMAScript standard was adopted by the Ecma General Assembly of December 1999 and published as ISO/IEC 16262:2002 in June 2002.</p>
|
||||
<p>The third edition of the Standard introduced powerful regular expressions, better string handling, new control statements, try/catch exception handling, tighter definition of errors, formatting for numeric output and minor changes in anticipation
|
||||
of forthcoming internationalisation facilities and future language growth. The third edition of the ECMAScript standard was adopted by the Ecma General Assembly of December 1999 and published as ISO/IEC 16262:2002 in June 2002.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="mouse-wrap">Координаты мыши: <span id="mouse">...</span></div>
|
||||
<div id="info"></div>
|
||||
<div id="mouse-wrap">Координаты мыши: <span id="mouse">...</span></div>
|
||||
<div id="info"></div>
|
||||
|
||||
|
||||
<script>
|
||||
var example = document.getElementById('example')
|
||||
<script>
|
||||
var example = document.getElementById('example')
|
||||
|
||||
var info = document.getElementById('info')
|
||||
var info = document.getElementById('info')
|
||||
|
||||
var props = {
|
||||
'размеры':
|
||||
['clientLeft','clientTop', 'clientWidth','clientHeight','offsetWidth','offsetHeight','scrollWidth', 'scrollHeight'],
|
||||
'прокрутка':
|
||||
['scrollLeft','scrollTop'] ,
|
||||
'позиционирование по рендерингу':
|
||||
['offsetParent', 'offsetLeft','offsetTop']
|
||||
}
|
||||
var props = {
|
||||
'размеры': ['clientLeft', 'clientTop', 'clientWidth', 'clientHeight', 'offsetWidth', 'offsetHeight', 'scrollWidth', 'scrollHeight'],
|
||||
'прокрутка': ['scrollLeft', 'scrollTop'],
|
||||
'позиционирование по рендерингу': ['offsetParent', 'offsetLeft', 'offsetTop']
|
||||
}
|
||||
|
||||
info.innerHTML = '<h3>Нажмите для просмотра значения:</h3>';
|
||||
for (var k in props) {
|
||||
info.innerHTML = '<h3>Нажмите для просмотра значения:</h3>';
|
||||
for (var k in props) {
|
||||
info.innerHTML += '<h4>' + k + '</h4>';
|
||||
var prop = props[k];
|
||||
for (var i = 0; i < prop.length; i++) {
|
||||
info.innerHTML += "<span class='key'>"+prop[i]+'</span>: <span id="'+prop[i]+'"> </span>' + " "
|
||||
info.innerHTML += "<span class='key'>" + prop[i] + '</span>: <span id="' + prop[i] + '"> </span>' + " "
|
||||
i++;
|
||||
if (i<prop.length) {
|
||||
info.innerHTML += "<span class='key'>"+prop[i]+'</span>: <span id="'+prop[i]+'"> </span>';
|
||||
if (i < prop.length) {
|
||||
info.innerHTML += "<span class='key'>" + prop[i] + '</span>: <span id="' + prop[i] + '"> </span>';
|
||||
}
|
||||
info.innerHTML += "<br/>";
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.onclick = function(event) {
|
||||
document.onclick = function(event) {
|
||||
var target = event.target;
|
||||
if (!target.classList.contains('key')) return;
|
||||
|
||||
|
|
@ -77,15 +81,14 @@ document.onclick = function(event) {
|
|||
var value = example[prop];
|
||||
value = value.tagName || value;
|
||||
document.getElementById(prop).innerHTML = value;
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
document.onmousemove = function(e) {
|
||||
document.getElementById('mouse').innerHTML = Math.round(e.clientX)+':'+Math.round(e.clientY);
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
document.onmousemove = function(e) {
|
||||
document.getElementById('mouse').innerHTML = Math.round(e.clientX) + ':' + Math.round(e.clientY);
|
||||
};
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
|
|
@ -9,15 +10,18 @@
|
|||
};
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Кликните на любое место, чтобы получить координаты относительно окна.<br>
|
||||
Это для удобства тестирования, чтобы проверить результат, который вы получите из DOM.<br>
|
||||
Кликните на любое место, чтобы получить координаты относительно окна.
|
||||
<br> Это для удобства тестирования, чтобы проверить результат, который вы получите из DOM.
|
||||
<br>
|
||||
<div id="coords">(координаты появятся тут)</div>
|
||||
|
||||
|
||||
<div id="field">
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -28,7 +32,6 @@
|
|||
|
||||
|
||||
<script>
|
||||
|
||||
var field = document.getElementById('field');
|
||||
|
||||
// полное решение - в массиве result
|
||||
|
|
@ -55,8 +58,8 @@
|
|||
];
|
||||
|
||||
alert(result.join(' '));
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
|
|
@ -9,15 +10,18 @@
|
|||
};
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Кликните на любое место, чтобы получить координаты относительно окна.<br>
|
||||
Это для удобства тестирования, чтобы проверить результат, который вы получите из DOM.<br>
|
||||
Кликните на любое место, чтобы получить координаты относительно окна.
|
||||
<br> Это для удобства тестирования, чтобы проверить результат, который вы получите из DOM.
|
||||
<br>
|
||||
<div id="coords">(координаты появятся тут)</div>
|
||||
|
||||
|
||||
<div id="field">
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -28,12 +32,11 @@
|
|||
|
||||
|
||||
<script>
|
||||
|
||||
var field = document.getElementById('field');
|
||||
|
||||
// ваш код...
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,30 +1,26 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae esse sequi officia sapiente.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
|
||||
esse sequi officia sapiente.</p>
|
||||
|
||||
|
||||
<blockquote>
|
||||
- Что на завтрак, Бэрримор?
|
||||
- Овсянка, сэр.
|
||||
- А на обед?
|
||||
- Овсянка, сэр.
|
||||
- Ну а на ужин?
|
||||
- Котлеты, сэр.
|
||||
- Уррра!!!
|
||||
- Из овсянки, сэр!!!
|
||||
- Что на завтрак, Бэрримор? - Овсянка, сэр. - А на обед? - Овсянка, сэр. - Ну а на ужин? - Котлеты, сэр. - Уррра!!! - Из овсянки, сэр!!!
|
||||
</blockquote>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae esse sequi officia sapiente.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
|
||||
esse sequi officia sapiente.</p>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
/**
|
||||
* Позиционирует элемент elem относительно элемента anchor, как указано в
|
||||
* в position.
|
||||
|
|
@ -39,7 +35,7 @@
|
|||
|
||||
var anchorCoords = anchor.getBoundingClientRect();
|
||||
|
||||
switch(position) {
|
||||
switch (position) {
|
||||
case "top":
|
||||
elem.style.left = anchorCoords.left + "px";
|
||||
elem.style.top = anchorCoords.top - elem.offsetHeight + "px";
|
||||
|
|
@ -82,4 +78,5 @@
|
|||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,30 +1,26 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae esse sequi officia sapiente.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
|
||||
esse sequi officia sapiente.</p>
|
||||
|
||||
|
||||
<blockquote>
|
||||
- Что на завтрак, Бэрримор?
|
||||
- Овсянка, сэр.
|
||||
- А на обед?
|
||||
- Овсянка, сэр.
|
||||
- Ну а на ужин?
|
||||
- Котлеты, сэр.
|
||||
- Уррра!!!
|
||||
- Из овсянки, сэр!!!
|
||||
- Что на завтрак, Бэрримор? - Овсянка, сэр. - А на обед? - Овсянка, сэр. - Ну а на ужин? - Котлеты, сэр. - Уррра!!! - Из овсянки, сэр!!!
|
||||
</blockquote>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae esse sequi officia sapiente.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
|
||||
esse sequi officia sapiente.</p>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
/**
|
||||
* Позиционирует элемент elem относительно элемента anchor, как указано в
|
||||
* в position.
|
||||
|
|
@ -55,4 +51,5 @@
|
|||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,9 +1,11 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
</head>
|
||||
|
||||
<body style="height:2000px">
|
||||
|
||||
<p>Исправления два:</p>
|
||||
|
|
@ -14,21 +16,14 @@
|
|||
</ol>
|
||||
|
||||
<blockquote>
|
||||
- Что на завтрак, Бэрримор?
|
||||
- Овсянка, сэр.
|
||||
- А на обед?
|
||||
- Овсянка, сэр.
|
||||
- Ну а на ужин?
|
||||
- Котлеты, сэр.
|
||||
- Уррра!!!
|
||||
- Из овсянки, сэр!!!
|
||||
- Что на завтрак, Бэрримор? - Овсянка, сэр. - А на обед? - Овсянка, сэр. - Ну а на ужин? - Котлеты, сэр. - Уррра!!! - Из овсянки, сэр!!!
|
||||
</blockquote>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae esse sequi officia sapiente.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
|
||||
esse sequi officia sapiente.</p>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
/**
|
||||
* Вспомогательная функция для координат относительно документа
|
||||
*/
|
||||
|
|
@ -48,7 +43,10 @@
|
|||
var top = box.top + scrollTop - clientTop;
|
||||
var left = box.left + scrollLeft - clientLeft;
|
||||
|
||||
return { top: top, left: left };
|
||||
return {
|
||||
top: top,
|
||||
left: left
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -56,7 +54,7 @@
|
|||
|
||||
var anchorCoords = getCoords(anchor);
|
||||
|
||||
switch(position) {
|
||||
switch (position) {
|
||||
case "top":
|
||||
elem.style.left = anchorCoords.left + "px";
|
||||
elem.style.top = anchorCoords.top - elem.offsetHeight + "px";
|
||||
|
|
@ -98,4 +96,5 @@
|
|||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,26 +1,23 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
</head>
|
||||
|
||||
<body style="height:2000px">
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae esse sequi officia sapiente.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
|
||||
esse sequi officia sapiente.</p>
|
||||
|
||||
|
||||
<blockquote>
|
||||
- Что на завтрак, Бэрримор?
|
||||
- Овсянка, сэр.
|
||||
- А на обед?
|
||||
- Овсянка, сэр.
|
||||
- Ну а на ужин?
|
||||
- Котлеты, сэр.
|
||||
- Уррра!!!
|
||||
- Из овсянки, сэр!!!
|
||||
- Что на завтрак, Бэрримор? - Овсянка, сэр. - А на обед? - Овсянка, сэр. - Ну а на ужин? - Котлеты, сэр. - Уррра!!! - Из овсянки, сэр!!!
|
||||
</blockquote>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae esse sequi officia sapiente.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
|
||||
esse sequi officia sapiente.</p>
|
||||
|
||||
|
||||
<script>
|
||||
|
|
@ -39,7 +36,10 @@
|
|||
var top = box.top + scrollTop - clientTop;
|
||||
var left = box.left + scrollLeft - clientLeft;
|
||||
|
||||
return { top: top, left: left };
|
||||
return {
|
||||
top: top,
|
||||
left: left
|
||||
};
|
||||
}
|
||||
|
||||
function showNote(anchor, position, html) {
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
|
||||
var anchorCoords = getCoords(anchor);
|
||||
|
||||
switch(position) {
|
||||
switch (position) {
|
||||
case "top-out":
|
||||
elem.style.left = anchorCoords.left + "px";
|
||||
elem.style.top = anchorCoords.top - elem.offsetHeight + "px";
|
||||
|
|
@ -107,9 +107,9 @@
|
|||
showNote(blockquote, "top-out", "заметка top-out");
|
||||
showNote(blockquote, "right-out", "заметка right-out");
|
||||
showNote(blockquote, "bottom-in", "заметка bottom-in");
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,11 +1,13 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<body>
|
||||
|
||||
<body>
|
||||
Правда о лосях
|
||||
<ol>
|
||||
<li>Лось — животное хитрое</li>
|
||||
<!-- комментарий -->
|
||||
<li>..И коварное!</li>
|
||||
</ol>
|
||||
</body>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,28 +1,66 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
table { border-collapse: collapse; }
|
||||
td { border: 1px solid black; padding: 3px 5px; }
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 1px solid black;
|
||||
padding: 3px 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<table>
|
||||
<tr><td>1:1</td><td>2:1</td><td>3:1</td><td>4:1</td><td>5:1</td></tr>
|
||||
<tr><td>1:2</td><td>2:2</td><td>3:2</td><td>4:2</td><td>5:2</td></tr>
|
||||
<tr><td>1:3</td><td>2:3</td><td>3:3</td><td>4:3</td><td>5:3</td></tr>
|
||||
<tr><td>1:4</td><td>2:4</td><td>3:4</td><td>4:4</td><td>5:4</td></tr>
|
||||
<tr><td>1:5</td><td>2:5</td><td>3:5</td><td>4:5</td><td>5:5</td></tr>
|
||||
<tr>
|
||||
<td>1:1</td>
|
||||
<td>2:1</td>
|
||||
<td>3:1</td>
|
||||
<td>4:1</td>
|
||||
<td>5:1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1:2</td>
|
||||
<td>2:2</td>
|
||||
<td>3:2</td>
|
||||
<td>4:2</td>
|
||||
<td>5:2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1:3</td>
|
||||
<td>2:3</td>
|
||||
<td>3:3</td>
|
||||
<td>4:3</td>
|
||||
<td>5:3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1:4</td>
|
||||
<td>2:4</td>
|
||||
<td>3:4</td>
|
||||
<td>4:4</td>
|
||||
<td>5:4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1:5</td>
|
||||
<td>2:5</td>
|
||||
<td>3:5</td>
|
||||
<td>4:5</td>
|
||||
<td>5:5</td>
|
||||
</tr>
|
||||
</table>
|
||||
<script>
|
||||
var table = document.body.children[0];
|
||||
|
||||
for(var i=0; i<table.rows.length; i++) {
|
||||
for (var i = 0; i < table.rows.length; i++) {
|
||||
var row = table.rows[i];
|
||||
row.cells[i].style.backgroundColor = 'red';
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,25 +1,63 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
table { border-collapse: collapse; }
|
||||
td { border: 1px solid black; padding: 3px 5px; }
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 1px solid black;
|
||||
padding: 3px 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<table>
|
||||
<tr><td>1:1</td><td>2:1</td><td>3:1</td><td>4:1</td><td>5:1</td></tr>
|
||||
<tr><td>1:2</td><td>2:2</td><td>3:2</td><td>4:2</td><td>5:2</td></tr>
|
||||
<tr><td>1:3</td><td>2:3</td><td>3:3</td><td>4:3</td><td>5:3</td></tr>
|
||||
<tr><td>1:4</td><td>2:4</td><td>3:4</td><td>4:4</td><td>5:4</td></tr>
|
||||
<tr><td>1:5</td><td>2:5</td><td>3:5</td><td>4:5</td><td>5:5</td></tr>
|
||||
<tr>
|
||||
<td>1:1</td>
|
||||
<td>2:1</td>
|
||||
<td>3:1</td>
|
||||
<td>4:1</td>
|
||||
<td>5:1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1:2</td>
|
||||
<td>2:2</td>
|
||||
<td>3:2</td>
|
||||
<td>4:2</td>
|
||||
<td>5:2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1:3</td>
|
||||
<td>2:3</td>
|
||||
<td>3:3</td>
|
||||
<td>4:3</td>
|
||||
<td>5:3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1:4</td>
|
||||
<td>2:4</td>
|
||||
<td>3:4</td>
|
||||
<td>4:4</td>
|
||||
<td>5:4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1:5</td>
|
||||
<td>2:5</td>
|
||||
<td>3:5</td>
|
||||
<td>4:5</td>
|
||||
<td>5:5</td>
|
||||
</tr>
|
||||
</table>
|
||||
<script>
|
||||
var table = document.body.children[0];
|
||||
|
||||
/* ваш код */
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,12 +1,15 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<form name="search">
|
||||
<label>Поиск по сайту: <input type="text" name="search"></label>
|
||||
<label>Поиск по сайту:
|
||||
<input type="text" name="search">
|
||||
</label>
|
||||
<input type="submit" value="Искать!">
|
||||
</form>
|
||||
|
||||
|
|
@ -18,9 +21,12 @@
|
|||
<tr>
|
||||
<td>Возраст:</td>
|
||||
<td id="age-list">
|
||||
<label><input type="radio" name="age" value="young">до 18</label>
|
||||
<label><input type="radio" name="age" value="mature">18-50</label>
|
||||
<label><input type="radio" name="age" value="senior">более 50</label>
|
||||
<label>
|
||||
<input type="radio" name="age" value="young">до 18</label>
|
||||
<label>
|
||||
<input type="radio" name="age" value="mature">18-50</label>
|
||||
<label>
|
||||
<input type="radio" name="age" value="senior">более 50</label>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
|
@ -37,6 +43,6 @@
|
|||
|
||||
<input type="submit" value="Искать!">
|
||||
</form>
|
||||
</body>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,9 +1,13 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head><meta charset="utf-8"></head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<ul>
|
||||
<li>Животные
|
||||
<ul>
|
||||
<li>Млекопитающие
|
||||
|
|
@ -39,12 +43,12 @@
|
|||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<script>
|
||||
var lis = document.getElementsByTagName('li');
|
||||
<script>
|
||||
var lis = document.getElementsByTagName('li');
|
||||
|
||||
for(i=0; i<lis.length; i++) {
|
||||
for (i = 0; i < lis.length; i++) {
|
||||
// получить название из текстового узла
|
||||
var title = lis[i].firstChild.data;
|
||||
|
||||
|
|
@ -54,8 +58,9 @@ for(i=0; i<lis.length; i++) {
|
|||
var childCount = lis[i].getElementsByTagName('li').length;
|
||||
|
||||
alert(title + ': ' + childCount);
|
||||
}
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,9 +1,13 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head><meta charset="utf-8"></head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<ul>
|
||||
<li>Животные
|
||||
<ul>
|
||||
<li>Млекопитающие
|
||||
|
|
@ -39,11 +43,12 @@
|
|||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
// .. ваш код ..
|
||||
</script>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
|
@ -9,62 +10,198 @@
|
|||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
|
||||
|
||||
<script>
|
||||
function bench(f, times) {
|
||||
<script>
|
||||
function bench(f, times) {
|
||||
var d = new Date();
|
||||
for(var i=0; i<times; i++) f();
|
||||
for (var i = 0; i < times; i++) f();
|
||||
return new Date() - d;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function runGetList() {
|
||||
function runGetList() {
|
||||
var results = document.getElementsByTagName('p');
|
||||
var len = results.length;
|
||||
for(var i = 0; i<len; i++) {
|
||||
for (var i = 0; i < len; i++) {
|
||||
var elem = results[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function runQueryList() {
|
||||
function runQueryList() {
|
||||
var results = document.querySelectorAll('p');
|
||||
var len = results.length;
|
||||
for(var i = 0; i<len; i++) {
|
||||
for (var i = 0; i < len; i++) {
|
||||
var elem = results[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function log(msg) {
|
||||
function log(msg) {
|
||||
alert(msg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
log( 'getElementsByTagName: ' + bench(runGetList, 10000) );
|
||||
log( 'querySelectorAll: ' + bench(runQueryList, 10000) );
|
||||
|
||||
</script>
|
||||
log('getElementsByTagName: ' + bench(runGetList, 10000));
|
||||
log('querySelectorAll: ' + bench(runQueryList, 10000));
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,32 +1,170 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
// ...
|
||||
</script>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYLE HTML>
|
||||
<html>
|
||||
|
||||
<body>
|
||||
|
||||
<div data-widget-name="menu">Выберите жанр</div>
|
||||
|
|
@ -9,4 +10,5 @@
|
|||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
|
@ -8,29 +9,30 @@
|
|||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<a name="list">список</a>
|
||||
<ul>
|
||||
<a name="list">список</a>
|
||||
<ul>
|
||||
<li><a href="http://google.com">http://google.com</a></li>
|
||||
<li><a href="/tutorial">/tutorial.html</a></li>
|
||||
<li><a href="local/path">local/path</a></li>
|
||||
<li><a href="ftp://ftp.com/my.zip">ftp://ftp.com/my.zip</a></li>
|
||||
<li><a href="http://nodejs.org">http://nodejs.org</a></li>
|
||||
<li><a href="http://internal.com/test">http://internal.com/test</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
|
||||
<script>
|
||||
<script>
|
||||
var css = 'a[href*="://"]:not([href^="http://internal.com"])';
|
||||
var links = document.querySelectorAll(css);
|
||||
|
||||
var css = 'a[href*="://"]:not([href^="http://internal.com"])';
|
||||
var links = document.querySelectorAll(css);
|
||||
|
||||
for(var i=0; i<links.length; i++) {
|
||||
for (var i = 0; i < links.length; i++) {
|
||||
links[i].classList.add('external');
|
||||
}
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,20 +1,23 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<input type="button" id="hider" value="Нажмите, чтобы спрятать текст"/>
|
||||
<input type="button" id="hider" value="Нажмите, чтобы спрятать текст" />
|
||||
|
||||
<div id="text">Текст</div>
|
||||
<div id="text">Текст</div>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
// в этой задаче неважно, как именно прятать элемент
|
||||
// например через style.display:
|
||||
document.getElementById('hider').onclick = function() {
|
||||
document.getElementById('text').style.display = 'none';
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,16 +1,19 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<input type="button" id="hider" value="Нажмите, чтобы спрятать текст"/>
|
||||
<input type="button" id="hider" value="Нажмите, чтобы спрятать текст" />
|
||||
|
||||
<div id="text">Текст</div>
|
||||
<div id="text">Текст</div>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
/* ваш код */
|
||||
</script>
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,14 +1,13 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.menu ul {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
padding-left: 20px;
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -30,12 +29,12 @@
|
|||
.menu.open ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="sweeties" class="menu">
|
||||
<div id="sweeties" class="menu">
|
||||
<span class="title">Сладости (нажми меня)!</span>
|
||||
<ul>
|
||||
<li>Торт</li>
|
||||
|
|
@ -43,16 +42,17 @@
|
|||
<li>Пирожное</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
var menuElem = document.getElementById('sweeties');
|
||||
var titleElem = menuElem.querySelector('.title');
|
||||
|
||||
titleElem.onclick = function() {
|
||||
menuElem.classList.toggle('open');
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,17 +1,20 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
▶ ▼ Сладости (нажми меня)!
|
||||
<ul>
|
||||
▶ ▼ Сладости (нажми меня)!
|
||||
<ul>
|
||||
<li>Торт</li>
|
||||
<li>Пончик</li>
|
||||
<li>Пирожное</li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="messages.css">
|
||||
<meta charset="utf-8">
|
||||
|
|
@ -7,7 +8,7 @@
|
|||
|
||||
<body>
|
||||
|
||||
<div id="messages-container">
|
||||
<div id="messages-container">
|
||||
<div class="pane">
|
||||
<h3>Лошадь</h3>
|
||||
<p>Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.</p>
|
||||
|
|
@ -20,18 +21,18 @@
|
|||
</div>
|
||||
<div class="pane">
|
||||
<h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
|
||||
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют тёлками.</p>
|
||||
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют
|
||||
тёлками.</p>
|
||||
<button class="remove-button">[x]</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
<script>
|
||||
var buttons = document.querySelectorAll('#messages-container .remove-button');
|
||||
|
||||
for(var i=0; i<buttons.length; i++) {
|
||||
for (var i = 0; i < buttons.length; i++) {
|
||||
var button = buttons[i];
|
||||
|
||||
button.onclick = function() {
|
||||
|
|
@ -39,8 +40,7 @@
|
|||
el.parentNode.removeChild(el);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="messages.css">
|
||||
<meta charset="utf-8">
|
||||
|
|
@ -7,9 +8,10 @@
|
|||
|
||||
<body>
|
||||
|
||||
Кнопка для удаления: <button class="remove-button">[x]</button>
|
||||
Кнопка для удаления:
|
||||
<button class="remove-button">[x]</button>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<div class="pane">
|
||||
<h3>Лошадь</h3>
|
||||
<p>Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.</p>
|
||||
|
|
@ -20,9 +22,11 @@
|
|||
</div>
|
||||
<div class="pane">
|
||||
<h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
|
||||
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют тёлками.</p>
|
||||
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют
|
||||
тёлками.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
|
@ -6,7 +7,7 @@
|
|||
|
||||
<body>
|
||||
|
||||
<div id="carousel" class="carousel">
|
||||
<div id="carousel" class="carousel">
|
||||
<button class="arrow prev">⇦</button>
|
||||
<div class="gallery">
|
||||
<ul class="images">
|
||||
|
|
@ -23,50 +24,49 @@
|
|||
</ul>
|
||||
</div>
|
||||
<button class="arrow next">⇨</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
/* этот код помечает картинки, для удобства разработки */
|
||||
var lis = document.getElementsByTagName('li');
|
||||
for(var i=0; i<lis.length; i++) {
|
||||
lis[i].style.position='relative';
|
||||
<script>
|
||||
/* этот код помечает картинки, для удобства разработки */
|
||||
var lis = document.getElementsByTagName('li');
|
||||
for (var i = 0; i < lis.length; i++) {
|
||||
lis[i].style.position = 'relative';
|
||||
var span = document.createElement('span');
|
||||
// обычно лучше использовать CSS-классы,
|
||||
// но этот код - для удобства разработки, так что не будем трогать стили
|
||||
span.style.cssText='position:absolute;left:0;top:0';
|
||||
span.innerHTML = i+1;
|
||||
span.style.cssText = 'position:absolute;left:0;top:0';
|
||||
span.innerHTML = i + 1;
|
||||
lis[i].appendChild(span);
|
||||
}
|
||||
}
|
||||
|
||||
/* конфигурация */
|
||||
var width = 130; // ширина изображения
|
||||
var count = 3; // количество изображений
|
||||
/* конфигурация */
|
||||
var width = 130; // ширина изображения
|
||||
var count = 3; // количество изображений
|
||||
|
||||
var carousel = document.getElementById('carousel');
|
||||
var list = carousel.querySelector('ul');
|
||||
var listElems = carousel.querySelectorAll('li');
|
||||
var carousel = document.getElementById('carousel');
|
||||
var list = carousel.querySelector('ul');
|
||||
var listElems = carousel.querySelectorAll('li');
|
||||
|
||||
var position = 0; // текущий сдвиг влево
|
||||
var position = 0; // текущий сдвиг влево
|
||||
|
||||
carousel.querySelector('.prev').onclick = function() {
|
||||
carousel.querySelector('.prev').onclick = function() {
|
||||
if (position >= 0) return; // уже сдвинулись до упора
|
||||
|
||||
// сдвиг влево
|
||||
// последнее передвижение влево может быть не на 3, а на 2 или 1 элемент
|
||||
position = Math.min(position + width*count, 0)
|
||||
position = Math.min(position + width * count, 0)
|
||||
list.style.marginLeft = position + 'px';
|
||||
};
|
||||
};
|
||||
|
||||
carousel.querySelector('.next').onclick = function() {
|
||||
if (position <= -width*(listElems.length-count)) return; // уже до упора
|
||||
carousel.querySelector('.next').onclick = function() {
|
||||
if (position <= -width * (listElems.length - count)) return; // уже до упора
|
||||
|
||||
// сдвиг вправо
|
||||
// последнее передвижение вправо может быть не на 3, а на 2 или 1 элемент
|
||||
position = Math.max(position-width*count, -width*(listElems.length-count));
|
||||
position = Math.max(position - width * count, -width * (listElems.length - count));
|
||||
list.style.marginLeft = position + 'px';
|
||||
};
|
||||
|
||||
</script>
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
|
@ -6,13 +7,13 @@
|
|||
|
||||
<body>
|
||||
|
||||
<!-- ваша верстка виджета, ваши стили -->
|
||||
<!-- ваша верстка виджета, ваши стили -->
|
||||
|
||||
<button class="arrow">⇦</button>
|
||||
<button class="arrow">⇨</button>
|
||||
<button class="arrow">⇦</button>
|
||||
<button class="arrow">⇨</button>
|
||||
|
||||
|
||||
<ul>
|
||||
<ul>
|
||||
<li><img src="https://js.cx/carousel/1.png">
|
||||
<li><img src="https://js.cx/carousel/2.png">
|
||||
<li><img src="https://js.cx/carousel/3.png">
|
||||
|
|
@ -23,26 +24,25 @@
|
|||
<li><img src="https://js.cx/carousel/8.png">
|
||||
<li><img src="https://js.cx/carousel/9.png">
|
||||
<li><img src="https://js.cx/carousel/10.png">
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
|
||||
<script>
|
||||
/* этот код помечает картинки цифрами, для удобства разработки
|
||||
<script>
|
||||
/* этот код помечает картинки цифрами, для удобства разработки
|
||||
его можно убрать, если не нужен */
|
||||
var lis = document.getElementsByTagName('li');
|
||||
for(var i=0; i<lis.length; i++) {
|
||||
lis[i].style.position='relative';
|
||||
var lis = document.getElementsByTagName('li');
|
||||
for (var i = 0; i < lis.length; i++) {
|
||||
lis[i].style.position = 'relative';
|
||||
var span = document.createElement('span');
|
||||
span.style.cssText='position:absolute;left:0;top:0';
|
||||
span.innerHTML = i+1;
|
||||
span.style.cssText = 'position:absolute;left:0;top:0';
|
||||
span.innerHTML = i + 1;
|
||||
lis[i].appendChild(span);
|
||||
}
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
// ваш код..
|
||||
|
||||
</script>
|
||||
<script>
|
||||
// ваш код..
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
|
@ -19,28 +20,27 @@
|
|||
top: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
-webkit-transition: all 1s;
|
||||
-moz-transition: all 1s;
|
||||
-o-transition: all 1s;
|
||||
-ms-transition: all 1s;
|
||||
transition: all 1s;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body style="height:2000px">
|
||||
|
||||
Кликните на любое место поля, чтобы мяч перелетел туда.<br>
|
||||
Кликните на любое место поля, чтобы мяч перелетел туда.
|
||||
<br>
|
||||
|
||||
|
||||
<div id="field">
|
||||
<img src="https://js.cx/clipart/ball.svg" id="ball">
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
<img src="https://js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
var field = document.getElementById('field');
|
||||
var ball = document.getElementById('ball');
|
||||
|
||||
|
|
@ -66,28 +66,27 @@
|
|||
};
|
||||
|
||||
// вылезает за верхнюю границу - разместить по ней
|
||||
if(ballCoords.top < 0) ballCoords.top = 0;
|
||||
if (ballCoords.top < 0) ballCoords.top = 0;
|
||||
|
||||
// вылезает за левую границу - разместить по ней
|
||||
if(ballCoords.left < 0) ballCoords.left = 0;
|
||||
if (ballCoords.left < 0) ballCoords.left = 0;
|
||||
|
||||
|
||||
// вылезает за правую границу - разместить по ней
|
||||
if(ballCoords.left + ball.clientWidth > field.clientWidth) {
|
||||
if (ballCoords.left + ball.clientWidth > field.clientWidth) {
|
||||
ballCoords.left = field.clientWidth - ball.clientWidth;
|
||||
}
|
||||
|
||||
// вылезает за нижнюю границу - разместить по ней
|
||||
if(ballCoords.top + ball.clientHeight > field.clientHeight) {
|
||||
if (ballCoords.top + ball.clientHeight > field.clientHeight) {
|
||||
ballCoords.top = field.clientHeight - ball.clientHeight;
|
||||
}
|
||||
|
||||
ball.style.left = ballCoords.left + 'px';
|
||||
ball.style.top = ballCoords.top + 'px';
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,8 +1,9 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
#field {
|
||||
width: 200px;
|
||||
height: 150px;
|
||||
|
|
@ -19,19 +20,21 @@
|
|||
margin-left: -20px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body style="height:2000px">
|
||||
|
||||
Кликните на любое место поля, чтобы мяч перелетел туда.<br>
|
||||
Мяч никогда не вылетит за границы поля.
|
||||
Кликните на любое место поля, чтобы мяч перелетел туда.
|
||||
<br> Мяч никогда не вылетит за границы поля.
|
||||
|
||||
|
||||
<div id="field">
|
||||
<img src="https://js.cx/clipart/ball.svg" id="ball">
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
</div>
|
||||
<div id="field">
|
||||
<img src="https://js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,17 +1,20 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="example.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<form>FORM
|
||||
<form>FORM
|
||||
<div>DIV
|
||||
<p>P</p>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
|
||||
<script src="script.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,18 +1,21 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="example.css">
|
||||
</head>
|
||||
<body>
|
||||
Клик выведет <code>event.target</code> и <code>this</code>:
|
||||
|
||||
<form id="form">FORM
|
||||
<body>
|
||||
Клик выведет <code>event.target</code> и <code>this</code>:
|
||||
|
||||
<form id="form">FORM
|
||||
<div>DIV
|
||||
<p>P</p>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
|
||||
<script src="script.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,14 +1,16 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<body>
|
||||
<link type="text/css" rel="stylesheet" href="example.css">
|
||||
|
||||
<form>FORM
|
||||
<body>
|
||||
<link type="text/css" rel="stylesheet" href="example.css">
|
||||
|
||||
<form>FORM
|
||||
<div>DIV
|
||||
<p>P</p>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
|
||||
<script src="script.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="messages.css">
|
||||
<meta charset="utf-8">
|
||||
|
|
@ -7,7 +8,7 @@
|
|||
|
||||
<body>
|
||||
|
||||
<div id="messages-container">
|
||||
<div id="messages-container">
|
||||
<div class="pane">
|
||||
<h3>Лошадь</h3>
|
||||
<p>Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.</p>
|
||||
|
|
@ -20,15 +21,15 @@
|
|||
</div>
|
||||
<div class="pane">
|
||||
<h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
|
||||
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют тёлками.</p>
|
||||
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют
|
||||
тёлками.</p>
|
||||
<button class="remove-button">[x]</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
<script>
|
||||
var container = document.getElementById('messages-container');
|
||||
|
||||
container.onclick = function(event) {
|
||||
|
|
@ -36,8 +37,8 @@
|
|||
|
||||
event.target.parentNode.hidden = !event.target.parentNode.hidden;
|
||||
}
|
||||
|
||||
</script>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="messages.css">
|
||||
<meta charset="utf-8">
|
||||
|
|
@ -7,9 +8,10 @@
|
|||
|
||||
<body>
|
||||
|
||||
Кнопка для удаления: <button class="remove-button">[x]</button>
|
||||
Кнопка для удаления:
|
||||
<button class="remove-button">[x]</button>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<div class="pane">
|
||||
<h3>Лошадь</h3>
|
||||
<p>Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.</p>
|
||||
|
|
@ -20,9 +22,11 @@
|
|||
</div>
|
||||
<div class="pane">
|
||||
<h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
|
||||
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют тёлками.</p>
|
||||
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют
|
||||
тёлками.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,19 +1,22 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<style>
|
||||
<style>
|
||||
.tree span:hover {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tree span {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<ul class="tree">
|
||||
<ul class="tree">
|
||||
<li>Животные
|
||||
<ul>
|
||||
<li>Млекопитающие
|
||||
|
|
@ -49,24 +52,24 @@
|
|||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<script>
|
||||
var tree = document.getElementsByTagName('ul')[0];
|
||||
<script>
|
||||
var tree = document.getElementsByTagName('ul')[0];
|
||||
|
||||
var treeLis = tree.getElementsByTagName('li');
|
||||
var treeLis = tree.getElementsByTagName('li');
|
||||
|
||||
/* wrap all textNodes into spans */
|
||||
for(var i=0; i<treeLis.length; i++) {
|
||||
/* wrap all textNodes into spans */
|
||||
for (var i = 0; i < treeLis.length; i++) {
|
||||
var li = treeLis[i];
|
||||
|
||||
var span = document.createElement('span');
|
||||
li.insertBefore(span, li.firstChild);
|
||||
span.appendChild(span.nextSibling);
|
||||
}
|
||||
}
|
||||
|
||||
/* catch clicks on whole tree */
|
||||
tree.onclick = function(event) {
|
||||
/* catch clicks on whole tree */
|
||||
tree.onclick = function(event) {
|
||||
var target = event.target;
|
||||
|
||||
if (target.tagName != 'SPAN') {
|
||||
|
|
@ -78,9 +81,9 @@ tree.onclick = function(event) {
|
|||
if (!childrenContainer) return; // no children
|
||||
|
||||
childrenContainer.hidden = !childrenContainer.hidden;
|
||||
}
|
||||
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,9 +1,13 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head><meta charset="utf-8"></head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<ul class="tree">
|
||||
<ul class="tree">
|
||||
<li>Животные
|
||||
<ul>
|
||||
<li>Млекопитающие
|
||||
|
|
@ -39,7 +43,8 @@
|
|||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,17 +1,20 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
th {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
th:hover {
|
||||
background: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<table id="grid">
|
||||
<thead>
|
||||
|
|
@ -68,7 +71,7 @@
|
|||
// определить функцию сравнения, в зависимости от типа
|
||||
var compare;
|
||||
|
||||
switch(type) {
|
||||
switch (type) {
|
||||
case 'number':
|
||||
compare = function(rowA, rowB) {
|
||||
return rowA.cells[colNum].innerHTML - rowB.cells[colNum].innerHTML;
|
||||
|
|
@ -89,15 +92,15 @@
|
|||
|
||||
// добавить результат в нужном порядке в TBODY
|
||||
// они автоматически будут убраны со старых мест и вставлены в правильном порядке
|
||||
for(var i=0; i<rowsArray.length; i++) {
|
||||
for (var i = 0; i < rowsArray.length; i++) {
|
||||
tbody.appendChild(rowsArray[i]);
|
||||
}
|
||||
|
||||
grid.appendChild(tbody);
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,17 +1,20 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
th {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
th:hover {
|
||||
background: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<table id="grid">
|
||||
<thead>
|
||||
|
|
@ -46,8 +49,8 @@
|
|||
|
||||
<script>
|
||||
/* ваш код */
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,66 +1,94 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<body>
|
||||
<link type="text/css" rel="stylesheet" href="bagua.css">
|
||||
<link type="text/css" rel="stylesheet" href="bagua.css">
|
||||
|
||||
|
||||
<table id="bagua-table">
|
||||
<table id="bagua-table">
|
||||
<tr>
|
||||
<th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="nw"><strong>Northwest</strong><br>Metal<br>Silver<br>Elders
|
||||
<td class="nw"><strong>Northwest</strong>
|
||||
<br>Metal
|
||||
<br>Silver
|
||||
<br>Elders
|
||||
</td>
|
||||
<td class="n"><strong>North</strong><br>Water<br>Blue<br>Change
|
||||
<td class="n"><strong>North</strong>
|
||||
<br>Water
|
||||
<br>Blue
|
||||
<br>Change
|
||||
</td>
|
||||
<td class="ne"><strong>Northeast</strong><br>Earth<br>Yellow<br>Direction
|
||||
<td class="ne"><strong>Northeast</strong>
|
||||
<br>Earth
|
||||
<br>Yellow
|
||||
<br>Direction
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w"><strong>West</strong><br>Metal<br>Gold<br>Youth
|
||||
<td class="w"><strong>West</strong>
|
||||
<br>Metal
|
||||
<br>Gold
|
||||
<br>Youth
|
||||
</td>
|
||||
<td class="c"><strong>Center</strong><br>All<br>Purple<br>Harmony
|
||||
<td class="c"><strong>Center</strong>
|
||||
<br>All
|
||||
<br>Purple
|
||||
<br>Harmony
|
||||
</td>
|
||||
<td class="e"><strong>East</strong><br>Wood<br>Blue<br>Future
|
||||
<td class="e"><strong>East</strong>
|
||||
<br>Wood
|
||||
<br>Blue
|
||||
<br>Future
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sw"><strong>Southwest</strong><br>Earth<br>Brown<br>Tranquility
|
||||
<td class="sw"><strong>Southwest</strong>
|
||||
<br>Earth
|
||||
<br>Brown
|
||||
<br>Tranquility
|
||||
</td>
|
||||
<td class="s"><strong>South</strong><br>Fire<br>Orange<br>Fame
|
||||
<td class="s"><strong>South</strong>
|
||||
<br>Fire
|
||||
<br>Orange
|
||||
<br>Fame
|
||||
</td>
|
||||
<td class="se"><strong>Southeast</strong><br>Wood<br>Green<br>Romance
|
||||
<td class="se"><strong>Southeast</strong>
|
||||
<br>Wood
|
||||
<br>Green
|
||||
<br>Romance
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</table>
|
||||
|
||||
<script>
|
||||
var table = document.getElementById('bagua-table');
|
||||
<script>
|
||||
var table = document.getElementById('bagua-table');
|
||||
|
||||
var selectedTd;
|
||||
var selectedTd;
|
||||
|
||||
table.onclick = function(event) {
|
||||
table.onclick = function(event) {
|
||||
var target = event.target;
|
||||
|
||||
while(target != this) {
|
||||
while (target != this) {
|
||||
if (target.tagName == 'TD') {
|
||||
highlight(target);
|
||||
return;
|
||||
}
|
||||
target = target.parentNode;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function highlight(node) {
|
||||
function highlight(node) {
|
||||
if (selectedTd) {
|
||||
selectedTd.classList.remove('highlight');
|
||||
}
|
||||
selectedTd = node;
|
||||
selectedTd.classList.add('highlight');
|
||||
}
|
||||
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,44 +1,45 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
height: 2000px; /* подсказка должна работать независимо от прокрутки */
|
||||
height: 2000px;
|
||||
/* подсказка должна работать независимо от прокрутки */
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: fixed;
|
||||
padding: 10px 20px;
|
||||
|
||||
/* красивости... */
|
||||
|
||||
border: 1px solid #b3c9ce;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font: italic 14px/1.3 arial, sans-serif;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
box-shadow: 3px 3px 3px rgba(0,0,0,.3);
|
||||
box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
|
||||
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
|
||||
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
|
||||
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
|
||||
|
||||
<button data-tooltip="подсказка длиннее, чем элемент">Короткая кнопка</button>
|
||||
<button data-tooltip="HTML<br>подсказка">Ещё кнопка</button>
|
||||
<button data-tooltip="подсказка длиннее, чем элемент">Короткая кнопка</button>
|
||||
<button data-tooltip="HTML<br>подсказка">Ещё кнопка</button>
|
||||
|
||||
<p>Прокрутите страницу, чтобы ссылки были вверху и проверьте, правильно ли показываются подсказки.</p>
|
||||
<p>Прокрутите страницу, чтобы ссылки были вверху и проверьте, правильно ли показываются подсказки.</p>
|
||||
|
||||
|
||||
<script>
|
||||
<script>
|
||||
var showingTooltip;
|
||||
|
||||
var showingTooltip;
|
||||
|
||||
document.onmouseover = function(e) {
|
||||
document.onmouseover = function(e) {
|
||||
var target = e.target;
|
||||
|
||||
var tooltip = target.getAttribute('data-tooltip');
|
||||
|
|
@ -51,7 +52,7 @@ document.onmouseover = function(e) {
|
|||
|
||||
var coords = target.getBoundingClientRect();
|
||||
|
||||
var left = coords.left + (target.offsetWidth - tooltipElem.offsetWidth)/2;
|
||||
var left = coords.left + (target.offsetWidth - tooltipElem.offsetWidth) / 2;
|
||||
if (left < 0) left = 0; // не вылезать за левую границу окна
|
||||
|
||||
var top = coords.top - tooltipElem.offsetHeight - 5;
|
||||
|
|
@ -63,18 +64,18 @@ document.onmouseover = function(e) {
|
|||
tooltipElem.style.top = top + 'px';
|
||||
|
||||
showingTooltip = tooltipElem;
|
||||
};
|
||||
};
|
||||
|
||||
document.onmouseout = function(e) {
|
||||
document.onmouseout = function(e) {
|
||||
|
||||
if (showingTooltip) {
|
||||
document.body.removeChild(showingTooltip);
|
||||
showingTooltip = null;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
</script>
|
||||
};
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue