前言：
此时你们对“运用javascript制作网页”大概比较讲究，各位老铁们都需要了解一些“运用javascript制作网页”的相关内容。那么小编也在网摘上汇集了一些对于“运用javascript制作网页””的相关内容，希望各位老铁们能喜欢，各位老铁们一起来学习一下吧！没有时间陪儿子玩石头剪刀布，就花十分钟做个网页版的，让电脑陪他玩吧[呲牙]
还是贴效果：
朋友们把源码复制到记事本，把文件扩展名.txt改为.html就可以，三张小图片另存出来，分别以rock.png，pater.png，scissors.png，放在跟html文件同一目录下就可以了！
源码贴出来：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <!-- 添加字符编码 -->
<title>石头剪刀布游戏</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
h1 {
margin-top: 50px;
}
#choices {
display: flex;
justify-content: center;
margin-top: 50px;
}
.choice {
cursor: pointer;
margin: 0 20px;
}
.choice:hover {
filter: brightness(60%);
}
#result {
margin-top: 50px;
font-size: 24px;
}
</style>
</head>
<body>
<h2>石头剪刀布游戏</h2>
//动画
<div id="computers">
<img id="computer-img" src="rock.png" width="100" alt="电脑">
</div>
<div id="choices">
<div class="choice" onmouseover="playSound('sound1')" onclick="play('rock')">
<img src="rock.png" width="100" alt="石头">
<p>石头</p>
</div>
<div class="choice" onmouseover="playSound('sound1')" onclick="play('scissors')">
<img src="scissors.png" width="100" alt="剪刀">
<p>剪刀</p>
</div>
<div class="choice" onmouseover="playSound('sound1')" onclick="play('paper')">
<img src="paper.png" width="100" alt="布">
<p>布</p>
</div>
</div>
<h3>你请选择出啥</h3>
<div id="result"></div>
//显示电脑出啥
<div>
<img id="computerchoose" src="rock.png" width="100" alt="电脑">
</div>
<script>
// 图片路径数组，形成动画
var imagePaths = ['rock.png', 'paper.png', 'scissors.png'];
var currentIndex = 0;
// 获取img元素
var imgElement = document.getElementById('computer-img');
// 每500毫秒切换一次图片
setInterval(function() {
// 切换到下一个图片
currentIndex = (currentIndex + 1) % imagePaths.length;
// 更新img元素的src属性
imgElement.src = imagePaths[currentIndex];
}, 500);
//等待玩家的选择
function play(playerChoice) {
var choices = ['rock', 'scissors', 'paper'];
var computerChoice = choices[Math.floor(Math.random() * choices.length)];
//电脑的选择的img元素
var ComputerIlement = document.getElementById('computerchoose');
ComputerIlement.src = computerChoice + '.png'
//显示电脑的选择
var resultElement = document.getElementById('result');
var resultText = '';
if (playerChoice === computerChoice) {
resultText = "平局！";
} else if (
(playerChoice === 'rock' && computerChoice === 'scissors') ||
(playerChoice === 'scissors' && computerChoice === 'paper') ||
(playerChoice === 'paper' && computerChoice === 'rock')
) {
resultText = "你赢了！";
} else {
resultText = "你输了！";
}
resultElement.textContent = resultText;
function playSound(soundId) {
var sound = document.getElementById(soundId);
sound.play();
}
}
</script>
</body>
</html>
标签： #运用javascript制作网页 #js图片转换成字节流 #csstxt #html电商页面源码 #css怎么链接html
