模拟小球移动 jsp

最新推荐文章于 2024-05-19 18:51:10 发布

小肥酱牛肉

最新推荐文章于 2024-05-19 18:51:10 发布

阅读量207

点赞数

文章标签： java servlet html

本文链接：https://blog.csdn.net/weixin_69411453/article/details/127010341

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 1px solid black;
            border-radius: 50%;
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;

        }
    </style>
</head>
<body>

<div id="qiudiv" οnclick="moo()" click="" style="position: absolute;">
 <p id="mo">点我移动</p>
</div>

</body>
<script>
  //接收
    var borName = document.getElementById("mo");
    //定义初始div位置
    qiuX=0;
    var i = 0;//可以清除的 类似于时间的变动的变量
    var count = 0;//判断点击的次数
    function moo(){
        count++;
        if(count % 2 != 0){//单数为移动
            borName.innerHTML ="停止移动";//改文本
            i = setInterval(function(){
                qiuX+=1;
                //修改div的left top
                qiudiv.style.left=qiuX+"px";

            }, 10);
        }else{//否则为停止
            clearInterval(i);
            borName.innerHTML = "点我移动";
        }

    }


</script>



</html>