js会动的灯

最新推荐文章于 2024-05-12 09:43:35 发布

别俗

最新推荐文章于 2024-05-12 09:43:35 发布

阅读量137

点赞数

本文链接：https://blog.csdn.net/ssscxs/article/details/102595469

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片移动</title>
</head>
<body>
<label id="show"></label>
<img id="picture" src="1.png.png" style="width:250px;height:250px;position: absolute"/>
<div align="center">
    <input type="text" onkeyup="setkey('up')" maxlength="1">上<br>
    <input type="text" onkeyup="setkey('down')" maxlength="1">下<br>
    <input type="text" onkeyup="setkey('left')" maxlength="1">左<br>
    <input type="text" onkeyup="setkey('right')" maxlength="1">右<br>
    <input type="button" value="确定" onclick="change()" />
</div>
    <script type="text/javascript">
    var up,down,left,right;
    var setUp,setDown,setLeft,setRight;
    var obj = document.getElementById("picture");
    obj.left = 0;
    obj.top = 0;
    function change() {
        up = setUp;
        down = setDown;
        left = setLeft;
        right = setRight;
        alert("修改成功");
        move();
    }
    function setkey(str) {
        var Key = window.event.keyCode;
        if (str == "up") {
            up1 = Key;
        }
        if (str == "down") {
            down1 = Key;
        }
        if (str == "left") {
            left1 = Key;
        }
        if (str == "right") {
            right1 = Key;
        }
        move()
    }
    function move() {
        console.log(event.keyCode);
        if (event.keyCode == 37) {
            //左
            obj.left -= 80;
        }
        if (event.keyCode == 38) {
            //上
            obj.top -= 80;
        }
        if (event.keyCode == 39) {
            //右
            obj.left += 80;
        }
        if (event.keyCode == 40) {
            //下
            obj.top += 80;
        }
        obj.style.left = obj.left + 'px', obj.style.top = obj.top + 'px';
    }
    document.onkeydown = move;

</script>

</body>
</html>```
![在这里插入图片描述](https://img-blog.csdnimg.cn/20191016214012615.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzc2N4cw==,size_16,color_FFFFFF,t_70)

别俗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js会动的灯

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>图片移动</title></head><body><label id="show"></label><img id="pictur...
复制链接

扫一扫