JavaScript案例之按钮控制div移动

却没能成为自己

于 2022-10-09 22:11:18 发布

阅读量319

点赞数

分类专栏：学习 Java JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_15971099/article/details/127235216

版权

这篇博客详细介绍了如何利用JavaScript编写一个案例，通过点击按钮来实现div元素的动态移动，包括源代码展示和实际运行效果的截图。

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

JavaScript案例之按钮控制div移动

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        #div{
            width: 100px;
            height:100px;
            background-color: #f00;
            position: absolute;
            /* left:100px; */
        }
        button{
            position: relative;
            top:120px;
        }
    </style>
</head>
<body>
    <div id="div"></div>
    <button>点击开始</button>
    <button>点击停止</button>
    <script>
        // 逻辑：1.一个元素动起来，其实就是位置的移动
        // 2.连续动起来，需要一个定时器的 （有一个开关才行，为了防止多个定时器累积）
        // 3.需要对移动做条件 (当移动距离大于body宽度或小于0)
        // 当满足两个条件 做相反移动
        let bu