Fatal编程技术网
  • javascript/
  • Can'；不要使物体移动。Javascript

Can'；不要使物体移动。Javascript

javascript html css

Can'；不要使物体移动。Javascript,javascript,html,css,Javascript,Html,Css,我用了YouTube的教程。我不明白为什么它不起作用。由于某种原因，当我按下A或D时，什么也没有发生 <!DOCTYPE html> <html> <head> <style type="text/css"> #container{ position: relative; height: 600px; width: 400px; outline: 2px solid black; } #cha

我用了YouTube的教程。我不明白为什么它不起作用。由于某种原因，当我按下
A
或
D
时，什么也没有发生

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    #container{
    position: relative;
    height: 600px;
    width: 400px;
    outline: 2px solid black;
    }
    #character{
    position: absolute;
    height: 50px;   
    width: 50px;
    outline: 2px solid black;
    background-color: #FF6600;
    left: 0;
    }
</style>
<body onkeydown="anim">
<div id="container">
    <div id="character"></div>
</div>  
<script>
    var container = document.getElemnetById('container');
    var character = document.getElemnetById('character');
    var characterLeft = 0;
    function anim(e){
        if (e.keyCode == 97){
            characterLeft += 2;
            character.style.left = characterLeft + 'px';
        }
        if (e.keyCode == 100){
            characterLeft -= 2;
            character.style.left = characterLeft + 'px';
        }
    }
</script>
</body> 
</head>
</html> 


#容器{
位置：相对位置；
高度：600px；
宽度：400px；
外形：2倍纯黑；
}
#性格{
位置：绝对位置；
高度：50px；
宽度：50px；
外形：2倍纯黑；
背景色：#FF6600；
左：0；
}
var container=document.getElemnetById（'container'）；
var character=document.getElemnetById（'character'）；
var characterLeft=0；
功能动画（e）{
如果（e.keyCode==97）{
characterLeft+=2；
character.style.left=characterLeft+'px'；
}
如果（e.keyCode==100）{
characterLeft-=2；
character.style.left=characterLeft+'px'；
}
}
`

使用这个

<div id="pop" onclick="anim();">
<span>click me</span>
<div id="container">
    <div id="character">
    </div>
</div>
<script>
    var container = document.getElemnetById('container');
    var character = document.getElemnetById('character');
    var characterLeft = 0;
    function anim()
    {
        alert('yes it work!!');

        if (e.keyCode == 97){
            characterLeft += 2;
            character.style.left = characterLeft + 'px';
        }
        if (e.keyCode == 100){
            characterLeft -= 2;
            character.style.left = characterLeft + 'px';
        }
    }

</script>
</div>


点击我
var container=document.getElemnetById（'container'）；
var character=document.getElemnetById（'character'）；
var characterLeft=0；
函数anim（）
{
警惕（“是的，它工作！！”）；
如果（e.keyCode==97）{
characterLeft+=2；
character.style.left=characterLeft+'px'；
}
如果（e.keyCode==100）{
characterLeft-=2；
character.style.left=characterLeft+'px'；
}
}
这很有效。我还交换了按键效果-按“a”将框向左移动，按“d”将框向右移动。希望这有帮助。Gav

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <style>
        #container
        {
            position: relative;
            height: 600px;
            width: 400px;
            outline: 2px solid black;
        }

        #character
        {
            position: absolute;
            height: 50px;   
            width: 50px;
            outline: 2px solid black;
            background-color: #FF6600;
            left: 0;
        }
    </style>
    <body>
        <div id="container">
            <div id="character"></div>
        </div>  

    <script>
        var container = document.getElementById('container');
        var character = document.getElementById('character');
        var characterLeft = 0;

        document.onkeypress = function (e) { 
        e = e || window.event; 
        var charCode = e.charCode || e.keyCode;
            if (charCode == 97){
                characterLeft -= 2;
                character.style.left = characterLeft + 'px';
            };
            if (charCode == 100){
                characterLeft += 2;
                character.style.left = characterLeft + 'px';
            }
        }
    </script>
    </body> 
    </head>
    </html>


#容器
{
位置：相对位置；
高度：600px；
宽度：400px；
外形：2倍纯黑；
}
#性格
{
位置：绝对位置；
高度：50px；
宽度：50px；
外形：2倍纯黑；
背景色：#FF6600；
左：0；
}
var container=document.getElementById（'container'）；
var character=document.getElementById（'character'）；
var characterLeft=0；
document.onkeypress=函数（e）{
e=e | | window.event；
var charCode=e.charCode | | e.keyCode；
if（charCode==97）{
characterLeft-=2；
character.style.left=characterLeft+'px'；
};
if（charCode==100）{
characterLeft+=2；
character.style.left=characterLeft+'px'；
}
}
document.getElementById（“”）应该是
document.getElementById（“”
而不是
document.getElementById（“”）哦，谢谢。但仍然不起作用：（为什么？这和OP的代码一样有效。此外，需要点击一个键，而不是点击。不用担心。只是想一想-您可以选择其他键及其值，然后上下移动框，以及左右移动框。