JavaScript实现小球停止与移动

最新推荐文章于 2024-08-27 13:38:21 发布

认真的小帅

最新推荐文章于 2024-08-27 13:38:21 发布

阅读量537

点赞数 2

分类专栏： # 每日一题文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/m0_74291973/article/details/131930317

版权

每日一题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章介绍了如何使用HTML、CSS和JavaScript实现一个交互功能：页面加载时，小球显示文字‘单击移动’，点击后小球变为‘单击停止’并开始移动。移动通过改变div元素的left属性实现，点击再次触发时，小球停止移动，文字恢复为‘单击移动’，通过设置和清除间隔调用来控制运动状态。

摘要由CSDN通过智能技术生成

今天做练习的时候碰到了一道题，题目是初识打开页面时，小球显示文字为“单击移动”，点击小球后，小球文字变为“单击停止”并停止移动。以下是我用js来实现的代码。

效果图：

写题思路：

CSS样式：设置小球的样式为圆形

HTML代码：设置一个id为one的div元素来充当小球

JavaScript代码：小球移动移动主要是通过js代码来控制小球（div元素）距离左边的距离来实现的。通过点击来触发小球的事件，在事件中使用间隔调用控制小球与左边的距离，从而实现小球的移动。取消间隔移动来实现小球的停止

实现代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #one{
            border: 1px solid red;
            width: 200px;
            height: 200px;
            border-radius: 50%;//边框圆角

            text-align: center;//实现文字水平居中
            line-height: 200px;//实现文字垂直居中
            position: absolute;
        }

    </style>
</head>
<body>
    <div id="one" onclick="f1()">单击移动</div>

    <script>
        var div_ball = document.getElementById("one");
        var i=0;
        var flag = null;

        function f1(){
            if (div_ball.innerHTML == "单击移动") {
                div_ball.innerHTML = "单击停止";
                flag = setInterval(function () {
                    i += 4;//小球每次偏移的距离
                    div_ball.style.left = i + "px";

                }, 80);
            } else {
                div_ball.innerHTML = "单击移动";
                //取消间隔调用
                clearInterval(flag);
            }
        }

    </script>


</body>
</html>