javascript超时调用和间歇调用案例-坦克

本文链接：https://blog.csdn.net/qq_45486259/article/details/116480892
预览：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tank</title>
    <script>
        window.onload = function(){
            var btns = document.getElementsByTagName("button");
            var imgs = document.images;
            var spans = document.getElementsByTagName("span");

            //手动移动
            btns[0].onclick = function(){
                imgs[0].style.marginLeft = imgs[0].offsetLeft+10+"px";
            }

            //发射
            btns[1].onclick = function(){
                var num = spans[0].innerHTML;
                var id = setInterval(function(){
                    spans[0].innerHTML = --num;
                    if(num==0){
                        clearInterval(id);
                        imgs[0].style.left=imgs[0].offsetLeft+100+"px";
                    }
                },1000);
                
            }
            
            //赛跑
            btns[2].onclick = function(){
                var id1 = setInterval(function(){
                    var r1 = parseInt(Math.random()*10);
                    var r2 = parseInt(Math.random()*10);
                    imgs[0].style.left=imgs[0].offsetLeft+r1+"px";
                    imgs[1].style.left=imgs[1].offsetLeft+r2+"px";
                    console.log(imgs[0].offsetLeft);
                    console.log(imgs[1].offsetLeft);
                    if(imgs[0].offsetLeft>500||imgs[1].offsetLeft>500){
                        console.log("here");
                        clearInterval(id1);
                        if(imgs[0].offsetLeft>500){
                            alert("Tank1获胜");
                        }else{
                            alert("Tank2获胜");
                        }
                    }
                },100);
            }

            //自由移动
            btns[3].onclick = function(){
               var id3 = setInterval(function(){
                imgs[0].style.left=imgs[0].offsetLeft+10+"px";
                if(imgs[0].offsetLeft>500){
                    clearInterval(id3);
                    //这里换成自己的照片。
                    imgs[0].src = "./img/坦克练习 间歇和超时调用/tanke_down.jpg";
                    var id3_down = setInterval(function(){
                        imgs[0].style.top=imgs[0].offsetTop+10+"px";
                        if(imgs[0].offsetTop>300){
                            clearInterval(id3_down);
                            //这里换成自己的照片。
                            imgs[0].src = "./img/坦克练习 间歇和超时调用/tanke_left.jpg";
                            var id3_left = setInterval(function(){
                                imgs[0].style.left=imgs[0].offsetLeft-10+"px";
                                if(imgs[0].offsetLeft<10){
                                    clearInterval(id3_left);
                                    //这里换成自己的照片。
                                    imgs[0].src = "./img/坦克练习 间歇和超时调用/tanke_up.jpg";
                                    var id3_top = setInterval(function(){
                                        imgs[0].style.top=imgs[0].offsetTop-10+"px";
                                        if(imgs[0].offsetTop<0){
                                            clearInterval(id3_top);
                                            //这里换成自己的照片。
                                            imgs[0].src = "./img/坦克练习 间歇和超时调用/tanke_right.jpg";
                                        }
                                    },10);
                                }
                            },10);
                        }
                    },10);
                }
               },10);
            }  
        }
    </script>
</head>
<style>
    div {
        width: 600px;
        margin: 0 auto;
    }
    
    div.content {
        height: 400px;
        border: 1px solid black;
        position: absolute;
    }
    div.content img {
        position: absolute;
    }
    span {
        font-size: 26px;
        color: red;
    }
    
</style>
<body>
    <div class="btns">
        <button>手动移动</button>
        <button>发射</button>
        <button>赛跑</button>
        <button>自由移动</button>
        <span>5</span>
    </div>
    <div class="content">
        <img src="./img/坦克练习 间歇和超时调用/tanke_right.jpg" alt=""><br><br><br><br><br>
        <img src="./img/坦克练习 间歇和超时调用/tanke_right.jpg" alt="">
    </div>
</body>
</html>