JS-案例-div自动右下左上移动（随机变色）

最新推荐文章于 2023-05-21 03:03:13 发布

原创

最新推荐文章于 2023-05-21 03:03:13 发布 · 886 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JS #setinterval #移动 #随机变色

本文介绍了一个使用JavaScript实现的案例，通过setInterval定时器让div元素在页面上自动右下左上移动，并且div颜色能随机变化，增加了交互效果和视觉趣味性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{margin:0;padding:0;}
        div{
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: absolute;
        }
    </style>
</head>
<body>
<div></div>
    <script>
        var dirc="right";
        var bool=true;
        init();//构造初始化函数，添加点击事件
        function init() {
            var div=document.querySelector("div");
            document.addEventListener("click",clickHandler);
            setInterval(animation,41,div)//添加每个41ms（帧频24）执行一次的函数
        }
        function clickHandler(e) {
            bool=!bool;//达到点击鼠标停止，再次点击，继续移动的效果（开关）
        }

        function animation(div) {
            if (!bool) return;
            var str="rgba(";
            for (var i=0;i<3;i++){
                str+=Math.floor(Math