<!DOCTYPE HTML>
<html>
<head>
<style>
* {
margin:0;
padding:0;
}
body {
width:100%;
}
#green {
display:inline-block;
height:200px;
width:50%;
background-color:green;
}
#red {
text-align:right;
display:inline-block;
height:200px;
width:50%;
background-color:red;
}
</style>
<script>
(function(){
var LeftClick=500;
var RightClick=500;
return attitude = function(a){
if(!a){if(RightClick-1)LeftClick++;RightClick--;}
if(a) {if(LeftClick-1) LeftClick--;RightClick++;}
//alert(LeftClick+RightClick)
var attLeft = (100*LeftClick/1000).toFixed(2)
var attRight=100-attLeft
document.getElementById('green').style.width=''+attLeft+'%';
document.getElementById('red').style.width=''+attRight+'%';
}
})();
</script>
</head>
<body>
<div id=green><input type=button value=" Жми " onclick="attitude(0)"></div><div id=red><input type=button value=" Жми " onclick="attitude(1)"></div>
</body>
</html>