少帅下飞机代码

Gold_Dream

已于 2024-10-01 01:26:41 修改

阅读量420

点赞数 5

文章标签： css javascript 前端

于 2024-10-01 00:39:59 首次发布

本文链接：https://blog.csdn.net/Gold_Dream/article/details/142665891

版权

<%--
  Created by IntelliJ IDEA.
  User: akai
  Date: 2024/9/30
  Time: 19:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<style>
    #person{
        /*display: flex;*/
        /*justify-content: center;*/
        /*align-items: center;*/
        /*height: 100vh;*/
        position: relative;

        border: 1px solid black;
        float: left;
        top: 50px;
        left: 600px;
    }
    #aircrift{
        position: relative;
        float: left;
        top:1px;
        left:1px;
    }
</style>
<body>

<div id="aircrift"><button onclick="fly()">飞机</button></div>
    <div id="person">士兵&nbsp;&nbsp;&nbsp;&nbsp;<b id="a"></b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;士兵</div>
    <script>
        function fly() {
            let plane = document.getElementById("aircrift");
            let person = document.getElementById("person");

            if (plane && person) {
                let planeStyle = window.getComputedStyle(plane);
                let personStyle = window.getComputedStyle(person);

                let planeTop = parseInt(planeStyle.top, 10);
                let planeLeft = parseInt(planeStyle.left, 10);
                let personTop = parseInt(personStyle.top, 10);
                let personLeft = parseInt(personStyle.left, 10);

                function movePlane() {
                    if (planeTop < personTop - 30) {
                        planeTop += 1;
                        plane.style.top = planeTop + 'px';
                    } else {
                        if (planeLeft < personLeft+75) {
                            planeLeft += 1;
                            plane.style.left = planeLeft + 'px';
                        } else {
                            return;
                        }
                    }
                    requestAnimationFrame(movePlane);
                }
                movePlane();
                function movePerson() {
                    if (personTop<780){
                        personTop+=1;
                        person.style.top=personTop+'px'
                    }else {
                        return
                    }
                    requestAnimationFrame(movePerson)
                }
                setTimeout(function (){
                    movePerson()
                },6000)

                setTimeout(function() {
                    document.getElementById("a").innerText = "少帅";
                }, 5000);
            }

        }
    </script>
</body>
</html>