首页手记一个在浏览器里用箭头移动的div

一个在浏览器里用箭头移动的div

标签：

Html/CSS JavaScript

自己学着写的一个可以键盘控制的div，代码用的可能比较啰嗦。因为本人js方面还是个新手。还在学习中，欢迎各位多加指点。
代码在ie和360浏览器的兼容模式可能有问题。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">

window.onkeydown = function(e){
        var block1 = document.getElementById('block');
        var pingwidth = document.body.clientWidth;//获取屏幕宽度
        var pingheight = document.body.clientHeight;//获取屏幕高度
        var en = e || event;
        if(en.keyCode == 37 && block1.offsetLeft >0){//键盘左键头事件
            block1.style.marginLeft = block1.offsetLeft-10+'px';
            }
        if(en.keyCode == 39 && block1.offsetLeft < pingwidth-60){//键盘右键头事件
            block1.style.marginLeft = block1.offsetLeft+10+'px';
            }
        if(en.keyCode == 38 && block1.offsetTop > 0){//键盘上键头事件
            block1.style.marginTop = block1.offsetTop-10+'px';
            }
        if(en.keyCode == 40 && block1.offsetTop < pingheight-60){//键盘下键头事件
            block1.style.marginTop = block1.offsetTop+10+'px';
            }
        }

<style type="text/css">
*{ margin:0px auto; padding:0px;}
body,html{ height:100%; overflow:hidden;}
#block{ width:50px; height:50px; background:#000; }

</style>
</head>

<body>

    <div id="block">

    </div>

</body>
</html>

点击查看更多内容