Показать сообщение отдельно
  #6 (permalink)  
Старый 30.12.2017, 10:49
Аватар для void()
Профессор
Отправить личное сообщение для void() Посмотреть профиль Найти все сообщения от void()
 
Регистрация: 11.08.2017
Сообщений: 208

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>С НГ</title>
</head>
<body>

	<div class="wrapper">
		<div class="lamp active1"></div><div class="lamp active2"></div><div class="lamp active3"></div><div class="lamp active4"></div><div class="lamp active5"></div><div class="lamp active6"></div><div class="lamp active1"></div><div class="lamp active2"></div><div class="lamp active3"></div><div class="lamp active4"></div><div class="lamp active5"></div><div class="lamp active6"></div><div class="lamp active1"></div><div class="lamp active2"></div><div class="lamp active3"></div><div class="lamp active4"></div><div class="lamp active5"></div><div class="lamp active5"></div>
		<h1>С Новым Годом! :)</h1>
	</div>

	<script>
		window.onload = function(){
			var items = document.querySelectorAll('.lamp');
			function active(){
				var x = mtRand(1, 7);
				this.classList.remove("active1", "active2", "active3", "active4", "active5", "active6");
				this.classList.toggle('active' + x);
			}
			setInterval(function(){
				var rand = mtRand(0, items.length - 1);
				active.call(items[rand]);
			}, 15);
		}
		function mtRand(min, max){
			return Math.floor(Math.random() * (max - min +1));
		}
	</script>

	<style>
	body{background:#333}
	.wrapper{width:640px; margin: 0 auto; color: gold; text-align: center;}
	.lamp{width:15px; height:15px; float:left; margin:10px; border-radius:25px 8px; background:#8bc34a}
	.active1{background:#ff0000; box-shadow:0px 0px 19px 0px rgba(255,0,0,1)}
	.active2{background:yellow; box-shadow:0px 0px 19px 0px rgba(255,200,0,1)}
	.active3{background:#006cff; box-shadow:0px 0px 9px 0px rgba(0,160,255,1)}
	.active4{background:#02fa0c; box-shadow:0px 0px 19px 0px rgba(50,255,0,1)}
	.active5{background:gold; box-shadow:0px 0px 19px 0px rgba(255,130,0,1)}
	.active6{background:#ff04d5; box-shadow:0px 0px 19px 0px rgba(250,50 250,1)}
</style>
</body>
</html>
Ответить с цитированием