大家好，今天来为大家分享html单页网站源码分享的一些知识点，和html5单页的问题解析，大家要是都明白，那么可以忽略，如果不太清楚的话可以看看本篇文章，相信很大概率可以解决您的问题，接下来我们就一起来看看吧！
没有时间陪儿子玩石头剪刀布，就花十分钟做个网页版的，让电脑陪他玩吧[呲牙]
还是贴效果：
朋友们把源码复制到记事本，把文件扩展名.txt改为.html就可以，三张小图片另存出来，分别以rock.png，pater.png，scissors.png，放在跟html文件同一目录下就可以了！
源码贴出来：
<!DOCTYPEhtml>
<html>
<head>
<metacharset=&34;><!–添加字符编码–>
<title>石头剪刀布游戏</title>
<style>
body{
text-align:center;
font-family:Arial,sans-serif;
}
h1{
margin-top:50px;
}
result{
margin-top:50px;
font-size:24px;
}
</style>
</head>
<body>
<h2>石头剪刀布游戏</h2>
//动画
<divid=&34;>
<imgid=&34;src=&34;width=&34;alt=&34;>
</div>
<divid=&34;>
<divclass=&34;onmouseover=&39;sound1&34;onclick=&39;rock&34;>
<imgsrc=&34;width=&34;alt=&34;>
<p>石头</p>
</div>
<divclass=&34;onmouseover=&39;sound1&34;onclick=&39;scissors&34;>
<imgsrc=&34;width=&34;alt=&34;>
<p>剪刀</p>
</div>
<divclass=&34;onmouseover=&39;sound1&34;onclick=&39;paper&34;>
<imgsrc=&34;width=&34;alt=&34;>
<p>布</p>
</div>
</div>
<h3>你请选择出啥</h3>
<divid=&34;></div>
//显示电脑出啥
<div>
<imgid=&34;src=&34;width=&34;alt=&34;>
</div>
<script>
//图片路径数组，形成动画
varimagePaths=[&39;,&39;,&39;];
varcurrentIndex=0;
//获取img元素
varimgElement=document.getElementById(&39;);
//每500毫秒切换一次图片
setInterval(function(){
//切换到下一个图片
currentIndex=(currentIndex+1)%imagePaths.length;
//更新img元素的src属性
imgElement.src=imagePaths[currentIndex];
},500);
//等待玩家的选择
functionplay(playerChoice){
varchoices=[&39;,&39;,&39;];
varcomputerChoice=choices[Math.floor(Math.random()*choices.length)];
//电脑的选择的img元素
varComputerIlement=document.getElementById(&39;);
ComputerIlement.src=computerChoice+&39;
//显示电脑的选择
varresultElement=document.getElementById(&39;);
varresultText=&39;;
if(playerChoice===computerChoice){
resultText=&34;;
}elseif(
(playerChoice===&39;&&computerChoice===&39;)||
(playerChoice===&39;&&computerChoice===&39;)||
(playerChoice===&39;&&computerChoice===&39;)
){
resultText=&34;;
}else{
resultText=&34;;
}
resultElement.textContent=resultText;
functionplaySound(soundId){
varsound=document.getElementById(soundId);
sound.play();
}
}
</script>
</body>
</html>
关于html单页网站源码分享，html5单页的介绍到此结束，希望对大家有所帮助。