HTML JavaScript剪刀石头布简单实现

最新推荐文章于 2023-06-03 11:58:55 发布

天下皆白_唯我独黑

最新推荐文章于 2023-06-03 11:58:55 发布

阅读量3.3k

点赞数 1

分类专栏： JavaScript 文章标签： js剪刀石头布

JavaScript 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin:0;padding:0;}
			.But{width:100%;margin:20px auto;text-align: center;}
			.cont{width:50%;height:5rem;margin:0 auto; border:1px #CCC solid;}
		</style>
	</head>
	<body>
		<div class="wrapper">
			 <div class="But">
				 <button class="scissors" type="button">剪刀</button>
				 <button class="stone" type="button">石头</button>
				 <button class="cloth" type="button">布</button>
			 </div>
			 <div class="cont">
			 	  <div class="own">你出：<span></span></div>
			 	  <div class="PC">电脑出：<span></span></div>
			 	  <div class="judge">结果：<span></span></div>
			 </div>
		</div>
		<!--/wrapper-->
	<script type="text/javascript" src="jquery.js" ></script>
	<script>
		$(function(){
			$(".scissors").click(function(){
				$(".own span").html("剪刀");
				enter();
			});
			$(".stone").click(function(){
				$(".own span").html("石头");
				enter();
			});
			$(".cloth").click(function(){
				$(".own span").html("布");
				enter();
			});
		});
		
				
		function enter(){
			var user=['剪刀','石头','布'];
			var PCsys = Math.floor(Math.random() * user.length + 1)-1;

            var n=user[PCsys];
			$(".PC span").html(n);	
			
			var P=$(".own span").html();
			var S=$(".PC span").html();

			if(P==S){
				$(".judge span").html("平局");
			}else if(P==user[0] && S==user[2] || P==user[1] && S==user[0] || P==user[2] && S==user[1]){
				$(".judge span").html("胜");
			}else{
				$(".judge span").html("输");
			}
		}
	</script>
	</body>
</html>

效果：

来源：http://www.jq22.com/webqd5426

天下皆白_唯我独黑

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML JavaScript剪刀石头布简单实现

1.&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; *{margin:0;padding:0;} .But{width:100%;margin:20px au
复制链接

扫一扫

专栏目录