HTML

剪刀石头布

快捷写法：table>(tr>td*3)*4

解释： 为css用的id，这里根据自己的喜好可以改成classname都可以；

为js用的id，这里尽量采用的是语义化的id标签，方便使用

其中主要绑定的时间为onchange onclick 两个事件，采用的是js的动态绑定，都在js里面了。

CSS

h1 {

text-align: center;

}
table {

width: 80%;

margin: auto;

border-collapse: collapse;

height: 600px;

text-align: center;

}
table tr td {

border: 2px solid #333;

}
#col1 {

width: 40%;

}
#col2 {

width: 20%;

}
#col2 p {

font-size: 70px;

font-weight: bold;

color: orange;

}
#col3 {

width: 40%;

}
#ready {

font-size: 30px;

color: orange;

font-weight: bold;

}
.choice {

font-size: 40px;

font-weight: bold;

color: orange;

text-transform: uppercase;}
span {

margin-right: 20px;

}
#total {

color: orangered;

}
#win {

color: green;

}
#lose {

color: navy;

}
#draw {

color: hotpink;

}

JS

window.onload = function() {

var win = 0;

var lose = 0;

var draw = 0;

// 获取onchange onclick的even

var sel = document.getElementById('sel');

var punch = document.getElementById('punch');

// 绑定第一个onchange事件

sel.onchange = function() {

// 获取select的value值

var selVal = document.getElementById('sel').value;

// 获取要改变图片样式的标签

var choice = document.getElementById('choice');

//使用switch循环函数进行判断或者使用if判断也可以

switch (selVal) {

case '1':

choice.src = 'images/jd.jpg';

break;

case '2':

choice.src = 'images/st.jpg';

break;

case '3':

choice.src = 'images/bu.jpg';

break;

default:

choice.src = '//img05.71396.com/ba/nw/fe3b858cef05b1ec.jpg';

}
};

punch.onclick = function() {

var selVal = document.getElementById('sel').value;

var you = document.getElementById('you');

var computer = document.getElementById('computer');

//判断你的出拳来确认图片的选择

switch (selVal) {

case '1':

you.src = 'images/jd.jpg';

break;

case '2':

you.src = 'images/st.jpg';

break;

case '3':

you.src = 'images/bu.jpg';

break;

default:

you.src = '//img05.71396.com/ba/nw/fe3b858cef05b1ec.jpg';

alert("请选择再出拳！");

return;//这里一定要有return结束这个结束

}

//随机电脑出拳 利用math的随机函数来实现

var comSel = parseInt(Math.random() * 3 + 1);

//判断电脑随机的出拳来确认图片的选择

switch (comSel) {

case 1:

computer.src = 'images/jd.jpg';

break;

case 2:

computer.src = 'images/st.jpg';

break;

case 3:

computer.src = 'images/bu.jpg';

break;

default:

computer.src = '//img05.71396.com/ba/nw/fe3b858cef05b1ec.jpg';

}

var ready = document.getElementById('ready');

var minus = selVal - comSel;

if (minus == 0) {

ready.innerText = '平局';

ready.style.color = 'pink';

draw++;

} else if (minus == -2 || minus == 1) {

ready.innerText = '胜利';

ready.style.color = 'green';

win++; } else {

ready.innerText = '失败';

ready.style.color = 'red'; lose++;

} /

//判断输赢，然后在ready的p标签中改变问题，输出结果

document.getElementById('win').innerText = win;

document.getElementById('lose').innerText = lose;

document.getElementById('draw').innerText = draw;

document.getElementById('total').innerText = win + lose + draw; };
};