风君子博客本篇文章给大家谈谈400套网站特效源码分享，以及网页特效制作源代码对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。
没有时间陪儿子玩石头剪刀布，就花十分钟做个网页版的，让电脑陪他玩吧[呲牙]
还是贴效果：
朋友们把源码复制到记事本，把文件扩展名.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>
400套网站特效源码分享的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于网页特效制作源代码、400套网站特效源码分享的信息别忘了在本站进行查找哦。