简易猜拳js

Document
<style>
    #left,#right{
        width: 400px;
        height: 200px;
        float: left;
    }
    #right{
        transform: scale(-1,1);
        background: url(./img/a.jpg);
    }
    #left{
        background: url(./img/a.jpg);
    }
    #result{
        font-size: 30px;
        color: red;
        clear: both;
    }
</style>
<button id="bt0">剪刀</button>
<button id="bt1">石头</button>
<button id="bt2">布</button>


<script>
    var bt0=document.getElementById("bt0");
    var bt1=document.getElementById("bt1");
    var bt2=document.getElementById("bt2");
    var left=document.getElementById("left");
    var right=document.getElementById("right");
    var res=document.getElementById("result");
    bt0.onclick=function(){
        var num;
        num=Math.floor(Math.random()*3);
        left.style.backgroundPositionY="0px";
        if(num===0)
        { 
            right.style.backgroundPositionY="0px";
            res.innerHTML="平局";
        }
        else{
            if(num===1)
            {
                right.style.backgroundPositionY="-200px";
                res.innerHTML="你输了";
            }
            else{
                if(num===2)
                {
                    right.style.backgroundPositionY="-400px";
                    res.innerHTML="你赢了";
                }
            }
        }
    }

    bt1.onclick=function(){
        var num;
        num=Math.floor(Math.random()*3);
        left.style.backgroundPositionY="-200px";
        if(num===0)
        { 
            right.style.backgroundPositionY="0px";
            res.innerHTML="你赢了";   
        }
        else{
            if(num===1)
            {
                right.style.backgroundPositionY="-200px";
                res.innerHTML="平局";
            }
            else{
                if(num===2)
                {
                    right.style.backgroundPositionY="-400px";
                    res.innerHTML="你输了";
                }
            }
        }
    }

    bt2.onclick=function(){
        var num;
        num=Math.floor(Math.random()*3);
        left.style.backgroundPositionY="-400px";
        if(num===0)
        { 
            right.style.backgroundPositionY="0px";
            res.innerHTML="你输了";   
        }
        else{
            if(num===1)
            {
                right.style.backgroundPositionY="-200px";
                res.innerHTML="你赢了";
            }
            else{
                if(num===2)
                {
                    right.style.backgroundPositionY="-400px";
                    res.innerHTML="平局";
                }
            }
        }
    }
</script>
发布了4 篇原创文章 · 获赞 0 · 访问量 47
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览