Показать сообщение отдельно
  #5 (permalink)  
Старый 21.02.2013, 11:56
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

lazerru,
Оно вроде как в % добавил Вывод соотношений
<!DOCTYPE HTML>
<html>
  <head> 
<style>
* {
 margin:0;
 padding:0;
}
body {
  width:100%;
}
#green {
 display:inline-block;
 height:200px;
 width:50%;
 background-color:green;
}
#green span,#red  span{
 background-color:#fff;
 padding: 0 6px;
 border:1px #000 solid;
}
#red {
 text-align:right;
 display:inline-block;
 height:200px;
 width:50%;
 background-color:red;
}
 </style>
    <script>


(function(){
var LeftClick=500;
var RightClick=500;

Out=function (){
  var attLeft = (100*LeftClick/1000).toFixed(2)
  var attRight=(100-attLeft).toFixed(2)

  document.getElementById('Left').innerHTML=''+ attLeft +'%';
  document.getElementById('Right').innerHTML=''+ attRight +'%';
  document.getElementById('green').style.width=''+ attLeft +'%';
  document.getElementById('red').style.width=''+ attRight +'%';
}

return attitude = function(a){
  if(!a){if(RightClick-1)LeftClick++;RightClick--;}
  if(a) {if(LeftClick-1) LeftClick--;RightClick++;}
  Out ();
}

})();
window.onload = Out;
    </script>

  </head>
  <body>

<div id=green><span id="Left"></span> <input type=button value=" Жми " onclick="attitude(0)"></div><div id=red><span id="Right"></span> <input type=button value=" Жми " onclick="attitude(1)"></div>

  </body>
</html>

Последний раз редактировалось Deff, 21.02.2013 в 12:01.
Ответить с цитированием