js简单实现剪⼑⽯头布
剪⼑⽯头布⼩游戏的规则很简单，接下来就简单实现⼀下啊
div + css 随便写写
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="../css/mystyle.css"/>
<script src="../js/panduan.js" type="text/javascript"></script>
<title>⽯头剪⼦布</title>
</head>
<body>
<div class="loWrapper">
先在两边点击想要出的⽯头、剪⼦、布，再点击中间⽐较按钮<br/>谁⼤谁的背景颜⾊会变为天蓝⾊，⼩的⽩⾊，相同则都为红⾊        <div id="loLeftBox">
<div id="loLeftImg">
<img src="../images/0.jpg" onclick="show(0,'loBox')"/>
<img src="../images/1.jpg" onclick="show(1,'loBox')"/>
<img src="../images/2.jpg" onclick="show(2,'loBox')"/>
</div>
<div id="loLeftShow">
<div id="loBox"></div>
</div>
</div>
<div class="loMainBox">
<div id="loButton" onclick="bijiao()">点击⽐较</div>
</div>
<div id="loRightBox">
<div id="loRightShow">
<div id="loBox2"></div>
</div>
<div id="loRightImg">
<img src="../images/0.jpg" onclick="show(0,'loBox2')"/>
<img src="../images/1.jpg" onclick="show(1,'loBox2')"/>
<img src="../images/2.jpg" onclick="show(2,'loBox2')"/>
</div>borderbox
</div>
</div>
</body>
</html>
css
.loWrapper{
width: 710px;
height: 500px;
position: relative;
top: 50px;
margin: 0 auto;
border: 1px solid #000;
text-align: center;
font-weight: bold;
}
#loLeftBox,#loRightBox{
width: 300px;
height: 450px;
position: absolute;
background-color: white;
}
#loRightBox{
#loRightBox{
left: 410px;
}
#loLeftBox #loLeftImg{
width: 150px;
height: 450px;
position: absolute;
border-right: 1px solid #333;
}
#loLeftBox #loLeftImg img{
margin: 15px;
cursor: pointer;
}
#loLeftBox #loLeftShow{
width: 150px;
height: 450px;
position: absolute;
left: 150px;
}
#loLeftBox #loLeftShow #loBox{
width: 120px;
height: 120px;
margin: 165px 15px;
border: 1px solid green;
border-radius: 60px;
}
.loMainBox{
width: 80px;
height: 450px;
position: absolute;
left: 315px;
}
.loMainBox #loButton{
width: 80px;
height: 40px;
line-height: 40px;
background-color: orange;
text-align: center;
position: relative;
margin: 210px 0;
cursor: pointer;
border-radius: 10px;
font-weight: normal;
}
#loRightBox #loRightShow{
width: 150px;
height: 450px;
position: absolute;
}
#loRightBox #loRightShow #loBox2{    width: 120px;
height: 120px;
margin: 165px 15px;
border: 1px solid green;
border-radius: 60px;
}
#loRightBox #loRightImg{
width: 150px;
height: 450px;
position: absolute;
left: 150px;
border-left: 1px solid #333;
}
#loRightBox #loRightImg img{
margin: 15px;
cursor: pointer;
cursor: pointer;
}
.setBgColor{
background-color: skyblue;
}
js部分
/**
* 选择图⽚
* **/
function show(num,idName){
var ElementById(idName);
loBox.style.backgroundImage = 'url(../images/' + num + '.jpg';
}
/**
* ⽐较⼤⼩规则
* * */
function bijiao() {
var loBox = ElementById('loBox');
var loBox2 = ElementById('loBox2');
var loBoxUrl = parseInt((loBox.style.backgroundImage).match(/\d/));// '\d'查数字
var loBoxUrl2 = parseInt((loBox2.style.backgroundImage).match(/\d/));
if ((loBoxUrl == 0 && loBoxUrl2 == 0) ||(loBoxUrl == 1 && loBoxUrl2 == 1) ||(loBoxUrl == 2 && loBoxUrl2 == 2)) {
changeBackgroundColer('red','red');
} else if ((loBoxUrl == 1 && loBoxUrl2 == 0)||(loBoxUrl == 2 && loBoxUrl2 == 1)||(loBoxUrl == 0 && loBoxUrl2 == 2)) {        changeBackgroundColer('white','skyblue');
} else {
changeBackgroundColer('skyblue','white');
}
}
/**
* 颜⾊变化
*/
function changeBackgroundColer(color1,color2){
}
效果如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。