js小功能-滑块移动和俄罗斯方块式键盘操作移动

最新推荐文章于 2022-12-14 12:13:12 发布

嫌疑-人

最新推荐文章于 2022-12-14 12:13:12 发布

阅读量685

点赞数

CC 4.0 BY-SA版权

分类专栏： javaScript 文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_39396275/article/details/81782071

javaScript 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了使用JavaScript实现页面元素的自动滑动效果及通过键盘方向键控制元素移动的方法。通过对速度变量的调整，实现了元素在页面上的动态移动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

滑块移动

<script type="text/javascript">
    var div = document.createElement('div');

    document.body.appendChild(div);
    div.style.width = "50px";
    div.style.height = "50px";
    div.style.backgroundColor = "red";
    div.style.position = "absolute";
    div.style.left = "0";
    div.style.top = "0";
    var speed = 1;
    setInterval(function(){
        speed += speed/20;
        div.style.left = parseInt(div.style.left) + speed + "px";
        div.style.top = parseInt(div.style.top) + speed + "px";
    },30);
</script>

这里写图片描述

俄罗斯方块式键盘操作移动

<script type="text/javascript">
    var div = document.createElement('div');

    document.body.appendChild(div);
    div.style.width = "50px";
    div.style.height = "50px";
    div.style.backgroundColor = "red";
    div.style.position = "absolute";
    div.style.left = "0";
    div.style.top = "0";
    var speed = 1;
    document.onkeydown = function(e){//键盘敲击事件
        //console.log(e);//点击键盘上的上下左右来控制移动
        //顺时针：left：37；top:38;right:39;bottom:40;
        switch (e.which){
            case 37://left
                div.style.left=parseInt(div.style.left) - speed + "px";
                break;
            case 38://top
                div.style.top=parseInt(div.style.top) - speed + "px";
                break;
            case 39://right
                div.style.left=parseInt(div.style.left) + speed + "px";
                break;
            case 40://bottom
                div.style.top=parseInt(div.style.top) + speed + "px";
                break;
        }
    }
</script>