dom div移动解决停顿问题

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{
    height:100px;
    100px;
    background:red;
    position:absolute;
    }
</style>
<script>
window.onload = function ()
{
    var odiv = document.getElementById('div1');
    var key = { l:null,t:null,r:null,b:null};
    
    setInterval(function ()
    {
        if(key.l)
        odiv.style.left = odiv.offsetLeft +  - 10 + 'px';
        if(key.t)
        odiv.style.top = odiv.offsetTop - 10 + 'px';
        if(key.r)
        odiv.style.left = odiv.offsetLeft + 10 + 'px';
        if(key.b)
        odiv.style.top = odiv.offsetTop + 10 + 'px';
    },50)
    
    
    document.onkeydown = function (ev)
    {
        
        var ev = ev || event;    
        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;
        }
    }
    
    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;
        }
    }
    
}
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

相关阅读:
第九周作业
第八周作业
第七周作业
第六周作业
JAVA面向对象详细总结
父愁者联盟--需求规格说明书
案例分析
软件工程编程作业1
构建之法观后提问
第一次随笔——准备工作

原文地址：https://www.cnblogs.com/mayufo/p/4224383.html