以上就是这个项目的原型图，我们要用HTML+CSS+JS原生方法实现它，不使用任何的框架。

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 = 'images/zb.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 = 'images/zb.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 = 'images/zb.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; };};

以上就是我个人的练习方法以及思路，总之思路千万条，目标就一条，实现功能才是王道，如果你有好的意见，也可以留言，共同探讨。