Показать сообщение отдельно
  #7 (permalink)  
Старый 08.11.2014, 20:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,137

Vladimir93,

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head lang="en">
    <meta charset="UTF-8">
    <title>Светофор</title>
  <style type="text/css">
body > div{
    width: 100px;
    height: 100px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    border: 2px solid  rgb(51, 0, 0);
 }
body.green div:nth-child(3){
   opacity: 1 ;
}

body.yellow div:nth-child(2){
   opacity: 1
}
body.red div:nth-child(1){
   opacity: 1
}

body div:nth-child(3){
   opacity: 0.2;  background: green;
}

body div:nth-child(2){
   opacity: 0.2 ; background: yellow;
}
body div:nth-child(1){
   opacity: 0.2  ; background: red;
}
  </style>
    <script type="text/javascript">
    function changeDiv (name){
           document.body.className = name

    }
    </script>
</head>
<body class="green">

<div align="center" id="closedred">

</div>
<div align="center" id="closedyellow">

</div>
<div align="center" id="closedgreen">

</div>

<table border=1 align=center><tr><td><form>
    <input type=button value="Красный" onClick="changeDiv('red')">
    <input type=button value="Желтый" onClick="changeDiv('yellow')">
    <input type=button value="Зеленый" onClick="changeDiv('green')">
</form></td></tr></table>


</body>
</html>
Ответить с цитированием