虽然写的不好，但是大部分功能都实现了。
<!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="100px" background="brown"/> <h2>VS</h2> <img id="image2" src="1.png" style="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"; } } }