核心提示：效果预览： html部分：p class=box1h1使用方向键控制图形的移动；br使用ctrl + +/-控制图形的大小；brctrl +1/2/3/4/5/6/7改变p的颜色（共七种颜色）；br/...
效果预览：
html部分：
<p class="box1">
<h1>
使用方向键控制图形的移动；<br>
使用ctrl + “+/-”控制图形的大小；<br>
ctrl +1/2/3/4/5/6/7改变p的颜色（共七种颜色）；<br>
</h1>
<p id="btn">
重置
</p>
</p>
<p id="box2">
<p id="p1"></p>
</p>
css部分：
<style>
.box1{
height: 200px;
text-align: center;
}
h1{
font: 500 15px/20px 宋体;
color: #971b2b;
}
#btn {
height: 30px;
width: 70px;
line-height: 30px;
text-align: center;
background: #e4b43e;
color: #ffffff;
cursor: pointer;
display: inline-block;
}
#btn:hover{
background: #daa20f;
}
#box2{
height: 700px;
width: 100%;
position: relative;
border: 1px solid #888888;
}
#p1{
height: 50px;
width: 50px;
position: absolute;
background: #29b3ee;
}
</style>
javascript部分：
<script>
window.onload = function () {
var oDiv = document.getElementById('p1');
var oBox2 = document.getElementById('box2');
var oBtn = document.getElementById('btn');
var oWidth = parseInt(getStyle(oBox2, 'width'));
var aColor = ['red','orange','yellow','green','cyan','blue','purple'];
// 方向键控制图形的移动方向
//// 第一种方法：图形正在移动时会有间隔 不流畅
//
// document.onkeydown = function (ev) {
// var ev = ev||event;
//
// switch (ev.keyCode){
// case 37:
// oDiv.style.left = oDiv.offsetLeft - 10 + 'px';
// break;
// case 38:
// oDiv.style.top = oDiv.offsetTop - 10 + 'px';
// break;
// case 39:
// oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
// break;
// case 40:
// oDiv.style.top = oDiv.offsetTop + 10 + 'px';
// break;
// }
// rangeFn();
//
// }
//第二种方法 采用定时器解决图形移动不流畅的问题
var key = {l: null, r: null, t: null, b: null};
setInterval(function () {
if (key.l) {
oDiv.style.left = oDiv.offsetLeft - 5 + 'px';
}
if (key.r) {
oDiv.style.left = oDiv.offsetLeft + 5 + 'px';
}
if (key.b) {
oDiv.style.top = oDiv.offsetTop + 5 + 'px';
}
if (key.t) {
oDiv.style.top = oDiv.offsetTop - 5 + 'px';
}
rangeFn();
}, 13)
document.onkeydown = function (ev) {
var ev = ev || event;
var oDivHeight = parseInt( getStyle(oDiv,'height') );
var oDivWidth =parseInt( getStyle(oDiv,'width') );
switch (ev.keyCode) {
case 37 :
key.l = true;
break;
case 38 :
key.t = true;
break;
case 39 :
key.r = true;
break;
case 40 :
key.b = true;
break;
// ctrl +1/2/3/4/5/6/7改变p的颜色
case 49:
ev.ctrlKey && ( oDiv.style.background = aColor[0] );
break;
case 50:
ev.ctrlKey && ( oDiv.style.background = aColor[1] );
break;
case 51:
ev.ctrlKey && ( oDiv.style.background = aColor[2] );
break;
case 52:
ev.ctrlKey && ( oDiv.style.background = aColor[3] );
break;
case 53:
ev.ctrlKey && ( oDiv.style.background = aColor[4] );
break;
case 54:
ev.ctrlKey && ( oDiv.style.background = aColor[5] );
break;
case 55:
ev.ctrlKey && ( oDiv.style.background = aColor[6] );
break;
//ctrl + +/-改变p的大小
case 187:
if (ev.ctrlKey) {
oDiv.style.width = oDivWidth + 10 + "px";
oDiv.style.height = oDivHeight + 10 + "px";
}
break;
case 189:
if (ev.ctrlKey) {
oDiv.style.width = oDivWidth - 10 + "px";
oDiv.style.height = oDivHeight - 10 + "px";
}
break;
}
//阻止浏览器的默认行为
return false
};
document.onkeyup = function (ev) {
var ev = ev || event;
switch (ev.keyCode) {
case 37 :
key.l = false;
break;
case 38 :
key.t = false;
break;
case 39 :
key.r = false;
break;
case 40 :
key.b = false;
break;
}
};
//重置
oBtn.onclick = function () {
oDiv.style.background = '#29b3ee';
oDiv.style.width = '50px';
oDiv.style.height = '50px';
oDiv.style.left = '0';
oDiv.style.top = '0';
};
//控制图形移动的范围的函数
function rangeFn() {
if (parseInt(oDiv.style.left) < 0){
oDiv.style.left = '0px';
}
if (parseInt(oDiv.style.top) < 0){
oDiv.style.top = '0px';
}
if (parseInt(oDiv.style.top) > 650){
oDiv.style.top = '650px';
}
if ( parseInt(oDiv.style.left) > oWidth-50 ){
oDiv.style.left = oWidth - 50 + 'px';
}
}
function getStyle(obj, attr) {
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
}
}
</script>
总结：
想了好久还是解决不了控制元素大小的范围的问题。
