猜拳游戏

虽然写的不好，但是大部分功能都实现了。

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <link href="1.css" type="text/css" rel="stylesheet">
    <script language="javascript" type="text/javascript">
        function test1(){
            var i=parseInt(Math.random()*10);
        //window.alert(i);
        var i2=i%3;
        var ima1=document.getElementById("image1");
        //var im=image1.value;
        //window.alert(ima1);
        ima1.src=(i%3)+".png";

        //window.alert(sel);
        }

        function test2(){
        var ima2=document.getElementById("image2");
        var sel=document.getElementById("se");
        for(var i=0;i<sel.options.length;i++){

            if(sel.options[i].selected==true){
                //window.alert(sel.options[i].selected);
                //window.alert(sel.options[i].value);
                var v=sel.options[i].value;
                if(v=="shitou"){
                    ima2.src="2.png";
                }
                if(v=="jiandao"){
                    ima2.src="1.png";
                }
                if(v=="bu"){
                    ima2.src="0.png";
                }
            }
        }
        }

        function test3(){
            var im1=document.getElementById("image1").src;
            var im2=document.getElementById("image2").src;
            window.alert(im1+" "+im2);
            //if(im)
            document.getElementById("myspan").innerText="";
            if(im1==im2){
                //document.writeln("平手");
                document.getElementById("myspan").innerText="平手";
            }
        }
        
    </script>
</head>
<body>
        <img id="image1" src="0.png" style="width:100px" background="brown"/>
        <h2>VS</h2>
        <img id="image2" src="1.png" style="width:100px" background="brown"/>
        <select id="se" onchange="test2()">
            <option id="s" value="shitou">石头</option>
            <option id="j" value="jiandao">剪刀</option>
            <option id="b" value="bu">布</option>
        </select>
        <input type="button" value="开始" onclick="test1();test3()"/>
        <!-- <input type="button" value="比赛" onclick="test3()"/> -->
        <br/>结果是：<span id="myspan"></span>
        
</body>
</html>

 这里比较关键的地方在于获取下拉列表选中的值。

var sel=document.getElementById("se");
        for(var i=0;i<sel.options.length;i++){
            if(sel.options[i].selected==true){
                //window.alert(sel.options[i].selected);
                //window.alert(sel.options[i].value);
                var v=sel.options[i].value;
                if(v=="shitou"){
                    ima2.src="2.png";
                }
                if(v=="jiandao"){
                    ima2.src="1.png";
                }
                if(v=="bu"){
                    ima2.src="0.png";
                }
            }
        }

 

posted @ 2018-10-17 13:25  寒潭渡鹤影  阅读(128)  评论(0)  编辑  收藏  举报