JS Keyboard control Div Move

<style type= "Text/css" >
Html,body{overflow:hidden;}
body{margin:0;padding:0;}
pre{color:green;padding:10px 15px;background: #f0f0f0; border:1px dotted #333; font:12px/1.5 Courier new;margin:12px;}
Span{color: #999;}
#box {position:absolute;top:50px;left:300px;width:100px;height:100px;background:red;}
</style>

<script type= "Text/javascript" >
Window.onload = function ()
{
var OBox = document.getElementById ("box");
var bleft = Btop = BRight = Bbottom = Bctrlkey = false;

SetInterval (function ()
{
if (bleft)
{
OBox.style.left = obox.offsetleft-10 + "px"
}
else if (bRight)
{
OBox.style.left = Obox.offsetleft + + "px"
}

if (btop)
{
OBox.style.top = obox.offsettop-10 + "px"
}
else if (bbottom)
{
OBox.style.top = obox.offsettop + + "px"
}
Prevent overflow
Limit ();
},30);

Document.onkeydown = function (event)
{
var event = Event | | window.event;
Bctrlkey = Event.ctrlkey;

Switch (Event.keycode)
{
Case 37:
Bleft = true;
Break
Case 38:
if (Bctrlkey)
{
var oldwidth = obox.offsetwidth;
var oldheight = obox.offsetheight;

OBox.style.width = obox.offsetwidth * 1.5 + "px";
OBox.style.height = obox.offsetheight * 1.5 + "px";

OBox.style.left = Obox.offsetleft-(obox.offsetwidth-oldwidth)/2 + "px";
OBox.style.top = Obox.offsettop-(obox.offsetheight-oldheight)/2 + "px";

Break
}
Btop = true;
Break
Case 39:
BRight = true;
Break
Case 40:
if (Bctrlkey)
{
var oldwidth = obox.offsetwidth;
var oldheight = obox.offsetheight;

OBox.style.width = obox.offsetwidth * 0.75 + "px";
OBox.style.height = obox.offsetheight * 0.75 + "px";

OBox.style.left = Obox.offsetleft-(obox.offsetwidth-oldwidth)/2 + "px";
OBox.style.top = Obox.offsettop-(obox.offsetheight-oldheight)/2 + "px";

Break
}
Bbottom = true;
Break
Case 49:
Bctrlkey && (oBox.style.background = "green");
Break
Case 50:
Bctrlkey && (oBox.style.background = "yellow");
Break
Case 51:
Bctrlkey && (oBox.style.background = "Blue");
Break
}

return False
};

Document.onkeyup = function (event)
{
Switch ((Event | | window.event). keycode)
{
Case 37:
Bleft = false;
Break
Case 38:
Btop = false;
Break
Case 39:
BRight = false;
Break
Case 40:
Bbottom = false;
Break
}
};

Prevent overflow
function limit ()
{
var doc = [Document.documentElement.clientWidth, Document.documentElement.clientHeight]
Prevent left Overflow
Obox.offsetleft <=0 && (oBox.style.left = 0);
Prevent top Overflow
Obox.offsettop <=0 && (oBox.style.top = 0);
Prevent right overflow
Doc[0]-obox.offsetleft-obox.offsetwidth <= 0 && (oBox.style.left = doc[0]-obox.offsetwidth + "px");
Prevent bottom Overflow
DOC[1]-obox.offsettop-obox.offsetheight <= 0 && (oBox.style.top = doc[1]-obox.offsetheight + "px")
}
};
</script>


On: ↑ under: ↓ Left: ← Right: →
Ctrl + 1: The background turns green
Ctrl + 2: The background turns yellow
Ctrl + 3: The background turns blue
Ctrl +↑: Zoom In
Ctrl +↓: Zoom Out

Moved block "DIV"
<div id= "box" ></div>

JS Keyboard control Div Move