<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <!-- 设置样式 --> <style> .box { width: 800px; background-color: aqua; margin: 0 auto; } #left, #right { height: 200px; width: 400px; float: left; background-image: url(./img/a.jpg); } #right { transform: scale(-1, 1); } #decide { height: 100px; width: 500px; text-align: center; font-size: 40px; color: red; margin: 200px auto; } </style> </head> <body> <!-- 放图片得盒子 --> <div class="box"> <div id="left"></div> <div id="right"></div> </div> <!-- 按钮 --> <button id="con">剪刀</button> <button id="con2">石头</button> <button id="con3">布</button> <!-- 判定 --> <div id="decide"></div> <script> //获取id var con = document.getElementById("con"); var con2 = document.getElementById("con2"); var con3 = document.getElementById("con3"); var left = document.getElementById("left"); var right = document.getElementById("right"); //点击剪刀按钮 con.onclick = function () { //随机取0-3任意小数 不包括3， 0，1，2 var num = Math.random() * 3; //将小数转换为整数 num = parseInt(num); //让左侧图片显示剪刀 left.style.backgroundPositionY = "0px"; //如果随机数是0时 if (num == 0) { //右侧图片显示剪刀 right.style.backgroundPositionY = "0px"; //弹出平局 decide.innerHTML = "平局"; //如果随机数是1时，右侧图片显示石头，弹出输了 } else if (num == 1) { right.style.backgroundPositionY = "-200px"; decide.innerHTML = "输了"; //如果随机数是1时，右侧图片显示布，弹出赢了 } else if (num == 2) { right.style.backgroundPositionY = "-400px"; decide.innerHTML = "赢了"; } }; //点击石头按钮 con2.onclick = function () { var num = Math.random() * 3; num = parseInt(num); console.log(num); //让左侧图片显示石头 left.style.backgroundPositionY = "-200px"; if (num == 0) { right.style.backgroundPositionY = "0px"; decide.innerHTML = "赢了"; } else if (num == 1) { right.style.backgroundPositionY = "-200px"; decide.innerHTML = "平局"; } else if (num == 2) { right.style.backgroundPositionY = "-400px"; decide.innerHTML = "输了"; } }; //点击布按钮 con3.onclick = function () { var num = Math.random() * 3; num = parseInt(num); console.log(num); left.style.backgroundPositionY = "-400px"; if (num == 0) { right.style.backgroundPositionY = "0px"; decide.innerHTML = "输了"; } else if (num == 1) { right.style.backgroundPositionY = "-200px"; decide.innerHTML = "赢了"; } else if (num == 2) { right.style.backgroundPositionY = "-400px"; decide.innerHTML = "平局"; } }; </script> </body> </html>