<> effect
<> code
.t1.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</
title> <link rel="stylesheet" href="../css/t1.css"> </head> <body> <div> <div id
="top"> <div id="you"> <div class="desc"> you </div> <div class="choose"> <img
src="../img/shitou.jpg"> </div> <div class="win"> <img src="../img/win.jpg"
style="display: none"> </div> </div> <div id="me"> <div class="desc"> me </div>
<div class="choose"> <img src="../img/shitou.jpg"> </div> <div class="win"> <img
src="../img/win.jpg" style="display: none"> </div> </div> </div> <div id="bar">
<button> One more game </button> </div> </div> </body> </html> <script src="./js/t1.js"></
script>
.t1.css
#top { display: flex; flex-direction: row; justify-content: space-around; width
: 100%; /*background-color: skyblue;*/ } .desc{ /*background-color: palegreen;*/
width: 380px; height: 38px; text-align: center; font-size: 28px; } .choose{
/*background-color: palevioletred;*/ text-align: center; margin-top:20px; }
.choose img{ width: 85%; } .win{ text-align: center; } .win img{ margin-top:
20px; height: 120px; } #you, #me { /*background-color: yellow;*/ height: 500px;
width: 380px; } #bar{ display: flex; justify-content: space-around; } #bar
button{ margin-top: 20px; width: 300px; height: 80px; background-color: yellow;
font-size: 30px; font-weight: bold; color: rgba(55, 104, 119, 1); border-radius:
8%; }
.t1.js
window.onload = function () { guess(); document.getElementById("bar").
getElementsByTagName("button")[0].onclick = function () { guess(); }; /** *
A scissors stone cloth game */ function guess() { let chooses = ['shitou', 'jiandao', 'bu']; // punches
let you = parseInt(Math.random() * 3); let me = parseInt(Math.random() * 3); let
chooseElements= document.getElementsByClassName("choose"); chooseElements[0].
getElementsByTagName("img")[0].src = "../img/" + chooses[you] + ".jpg";
chooseElements[1].getElementsByTagName("img")[0].src = "../img/" + chooses[me] +
".jpg"; // Judge who won let winner; if (chooses[you] == 'shitou') { if (chooses[me] ==
'shitou') { winner = 'both'; } else if (chooses[me] == 'jiandao') { winner =
'you'; } else { winner = 'me'; } } else if (chooses[you] == 'jiandao') { if (
chooses[me] == 'shitou') { winner = 'me'; } else if (chooses[me] == 'jiandao') {
winner= 'both'; } else { winner = 'you'; } } else {//you put cloth if (chooses[me]
== 'shitou') { winner = 'you'; } else if (chooses[me] == 'jiandao') { winner =
'me'; } else { winner = 'both'; } } let winElements = document.
getElementsByClassName("win"); if (winner == 'you') { winElements[0].
getElementsByTagName("img")[0].style.display = "inline"; winElements[1].
getElementsByTagName("img")[0].style.display = "none"; } else if (winner == 'me'
) { winElements[1].getElementsByTagName("img")[0].style.display = "inline";
winElements[0].getElementsByTagName("img")[0].style.display = "none"; } else {
// If it's the same, start again guess(); } //log console.log('you:' + chooses[you] + ", me:" +
chooses[me] + ", winner:" + winner); } }
<> picture
.jiandao.jpg
.shitou.jpg
.bu.jpg
.win.jpg
<>html Structure diagram of
Technology