Клиентский JS

Показать/скрыть содержимое элементов

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<style>
.reveal * { display: none; }
.reveal *.handle { display: block; }
</style>
<sсriрt>
window.onload = function () {
    var elements = document.getElementsByClassName("reveal");
    for (var i = 0; i < elements.length; i++) {
        var elt = elements[i];
        var title = elt.getElementsByClassName("handle")[0];
        addRevealHandler(title, elt);
    }

    function addRevealHandler(title, elt) {
        title.onclick = function () {
            if (elt.className == "reveal") elt.className = "revealed";
            else if (elt.className == "revealed") elt.className = "reveal";
        };
    }
};
</sсriрt>
</head> 
<body>	
	<div class="reveal">
	<h1 class="handle">Щелкните здесь, чтобы увидеть скрытый текст</h1>
	<p>Этот обзац не видим. Он появляется после щелчка на заголовке</p>
	</div>
	<div class="reveal">
	<h1 class="handle">Щелкните здесь, чтобы увидеть скрытый текст</h1>
	<p>Этот обзац не видим. Он появляется после щелчка на заголовке</p>
	</div>
</body>

Цифровые часы

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<style>
#clock {
	font: bold 24pt sans;
	background: #ddf;
	padding: 10
	border: solid black 2
	border-radius: 10
}
</style>
<sсriрt>
function displayTime() {
	var elt = document.getElementById("clock");
	var now = new Date();
	elt.innerHTML = now.toLocaleTimeString();
	setTimeout(displayTime, 1000);
}
window.onload = displayTime;
</sсriрt>
</head> 
<body>	
	<h1>Цифровые часы</h1>
	<span id="clock"></span>
</body>

Клиентский JS

Смотрите также