JavaScript 案例

最新推荐文章于 2024-10-05 01:22:45 发布

ccL-

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量31

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/2301_77148945/article/details/134631089

版权

一.赛马游戏

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            table{
                width: 1200px;
                height: 400px;
            }
            
            img{
                width: 100px;
            }
            
            .begin{
                width: 100px;
            }
        </style>
    </head>
    <body>
        <div align="center">
            <h3>游戏规则：2分一次。赢了+5分。 中途主持人会随机暂停。选手可以换马。如果换马额外支付1分。</h3>
            
            <table style="border: 1px solid black;"  cellpadding="0" cellspacing="0" border="1px">
                <tr>
                    <td class="begin"><img src="img/1.gif" /> </td>
                    <td>赛道~</td>
                </tr>
                <tr>
                    <td class="begin"><img src="img/1.gif" /> </td>
                    <td>赛道~</td>
                </tr>
                <tr>
                    <td class="begin"><img src="img/1.gif" /> </td>
                    <td>赛道~</td>
                </tr>
                <tr>
                    <td class="begin"><img src="img/1.gif" /> </td>
                    <td>赛道~</td>
                </tr>
            </table>
            
            <button id="btn">开始比赛</button>
            
        </div>
        
        <script>
            var dsq ;
            //让图片由左边往右 开始运动
            var img0 = document.getElementsByTagName("img")[0];
            var img1 = document.getElementsByTagName("img")[1];
            var img2 = document.getElementsByTagName("img")[2];
            var img3 = document.getElementsByTagName("img")[3];
            
            var left_index0 = 0;
            var left_index1 = 0;
            var left_index2 = 0;
            var left_index3 = 0;
            
 
            document.getElementById("btn").onclick = function(){
                if(document.getElementById("btn").innerText =="开始比赛"){
                    document.getElementById("btn").innerText ="暂停比赛";
                    dsq = setInterval(saima,10);
                }else{
                    document.getElementById("btn").innerText ="开始比赛";
                    clearInterval(dsq);
                }
            }
            
            
            function saima(){
                let sjs0 = Math.floor(Math.random()*10);
                let sjs1 = Math.floor(Math.random()*10);
                let sjs2 = Math.floor(Math.random()*10);
                let sjs3 = Math.floor(Math.random()*10);
                left_index0  = left_index0 + sjs0;
                left_index1  = left_index1 + sjs1;
                left_index2  = left_index2 + sjs2;
                left_index3  = left_index3 + sjs3;
                
                img0.style.marginLeft = left_index0 + "px";
                img1.style.marginLeft = left_index1 + "px";
                img2.style.marginLeft = left_index2 + "px";
                img3.style.marginLeft = left_index3 + "px";
                
                if (left_index0>=1000) {
                    alert("第1匹马赢了");
                    clearInterval(dsq);
                    location.reload();
                }
                if (left_index1>=1000) {
                    alert("第2匹马赢了");
                    clearInterval(dsq);
                    location.reload();
                }
                if (left_index2>=1000) {
                    alert("第3匹马赢了");
                    clearInterval(dsq);
                    location.reload();
                }
                if (left_index3>=1000) {
                    alert("第4匹马赢了");
                    clearInterval(dsq);
                    location.reload();
                }
            }
        </script>
    </body>

二.图片的移动

<head>
        <meta charset="utf-8">
        <title></title>
        <style>
            img{
                /* margin-left: 300px; */
            }
        </style>
        
    </head>
    <body>
        <img src="img/1.gif" />
        
        <script>
            var img = document.getElementsByTagName("img")[0];
            var left_index = 0;
            setInterval(function(){
                left_index++;
                img.style.marginLeft = left_index + "px";
            },10);
        </script>  
    </body>

四.广告牌的运动

<head>
        <meta charset="utf-8">
        <title></title>
        <style>
            /* 去除浏览器自带的边距 ，否则影响广告牌移动的距离的误差 */
            *{
                margin: 0;
            }
            
            img{
                border: 1px solid red;
                margin-top: 200px;
                height: 100px;
            }
            
        </style>
        
        
    </head>
    <body>
        <a href="https://baidu.com/"><img src="img/广告.jpg"/></a> 
 
        <script>
           var img = document.getElementsByTagName("img")[0];
           
           var zb = 0 ; //表示当前图片的纵向坐标  最上面是0   最下面是？？
           
           var maxHight = window.innerHeight - 100;//获取浏览器的宽度高度  还要减去图片自身的高度
           
           var fx = 1;//1表示向下   0 表示向上
           
           setInterval(function(){
               
              maxHight = window.innerHeight - 100;
              console.log(maxHight);
              if(fx == 1){
                  zb++;    
              }else{
                  zb--;
              }
              
               img.style.marginTop = zb  + "px";
               
               if(zb>=maxHight){
                   fx = 0;
               }
               if(zb<=0){
                   fx = 1;
               }   
           },1);  
        </script>    
    </body>