简易创作并未布局 可玩
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 800px;
height: 500px;
background: skyblue;
margin: 0 auto;
}
#bLef{
float: left;
width: 400px;
height: 400px;
}
#bRig{
float: left;
width: 400px;
height: 400px;
}
#bBot{
width: 800px;
height: 100px;
float: left;
}
#wol{
width: 800px;
height: 30px;
}
#jfb{
width: 800px;
height: 70px;
}
</style>
</head>
<body>
<div id="box">
<div id="bLef">
玩家 <span id="san"></span><br>请选择你要出的选项:
<button id="stone">石头</button>
<button id="knife">剪刀</button>
<button id="scrw">布</button><br>
<button id="btn">确定</button>
</div>
<div id="bRig">
电脑<br><span id="spn"></span>
</div>
<div id="bBot">
对局结果:
<div id="wol">
</div>
<div id="jfb">
总局数:<span id="all">
</span>
玩家胜利:<span id="useWin"></span>
平局局数:<span id="nwl"></span>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
let cop=document.getElementById("spn")
let san=document.getElementById("san")
let bot=document.getElementById("bBot")
let btn=document.getElementById("btn")
let stone=document.getElementById("stone")
let scrw=document.getElementById("scrw")
let knife=document.getElementById("knife")
let wol=document.getElementById("wol")
let use=document.getElementById("useWin")
let all=document.getElementById("all")
let nwl=document.getElementById("nwl")
let comCou=0;
let useCou=0;
let faiCou=0;
let det=0;
stone.onclick=function(){
san.innerHTML="石头"
}
knife.onclick=function(){
san.innerHTML="剪刀"
}
scrw.onclick=function(){
san.innerHTML="布"
}
let arr=["石头","剪刀","布"]
btn.onclick=function(){
det++;
let m=Math.floor(Math.random()*3)
cop.innerHTML=arr[m]
if(san.innerHTML==cop.innerHTML){
wol.innerHTML="平局"
faiCou++;
}else if(san.innerHTML=="石头"&&cop.innerHTML=="布"){
wol.innerHTML="玩家败"
comCou++;
}else if(san.innerHTML=="石头"&&cop.innerHTML=="剪刀"){
wol.innerHTML="玩家胜"
useCou++;
}else if(san.innerHTML=="剪刀"&&cop.innerHTML=="布"){
wol.innerHTML="玩家胜"
useCou++;
}else if(san.innerHTML=="剪刀"&&cop.innerHTML=="石头"){
wol.innerHTML="玩家败"
comCou++;
}
all.innerHTML=det;
use.innerHTML=useCou;
nwl.innerHTML=faiCou;
}
</script>