用JS写个“石头剪刀布”小程序

没什么事情，刚好有个朋友在学js，准备写一个石头剪刀布的小程序，我也没事，就自己写一个，没什么技术含量，纯属玩：

效果：

废话不说，直接贴代码，因为很简单，就没什么解释的了！

<!DOCTYPE html>
<!-- 
 aim : 例子
 author ： clearlove
 date ： 08-31
 bug ： no
 -->
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="css/layui/lay/dest/layui.all.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/layui/css/layui.css"/>
		<style type="text/css">
			#all{
					width: 20rem;
					height: 20rem;
					border: 2px solid #000000;
					margin-left: 10rem;
					margin-top: 10rem;
			}
			.start{
					width: 20rem;
					height: 6rem;
					text-align: center;
					margin: auto;
			}
			.start input{width: 6rem;height: 3rem;margin-top: 1rem;}
			.center_div{
					width: 20rem;
					height: 7rem;
					text-align: center;
			}
			.left_div{
					width: 9rem;
					height: 6rem;
					float: left;
					margin-top: 0.5rem;
					text-align: center;
			}
			.left_div input{height: 2rem;width: 6rem;margin-top: 1rem;text-align: center;}
			.right_div{
					width: 9rem;
					height: 6rem;
					float: left;
					margin-left: 1.5rem;
					margin-top: 0.5rem;
					text-align: center;
				}
			.right_div input{height: 2rem;width: 6rem;margin-top: 1rem;text-align: center;}
			.buttom_div{
					width: 20rem;
					height: 6rem;
					text-align: center;
			}	
			.buttom_div input{height: 2rem;width: 6rem;margin-top: 1rem;text-align: center;}
		</style>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#_start").click(function(){
					var left_bumber = Math.floor(Math.random()*3+1);
					var right_number =  Math.floor(Math.random()*3+1);
					var _lefthand;
					var _righthand;
					switch(Number(left_bumber)){
						case 1 : 
						$("#left_number").val("石头");
						break;
						case 2 :
						$("#left_number").val("剪刀");
						break;
						case 3 :
						$("#left_number").val("布");
						break;
						default :
						layer.msg("系统BUG！");
					}
					switch(Number(right_number)){
						case 1 : 
						$("#right_number").val("石头");
						break;
						case 2 :
						$("#right_number").val("剪刀");
						break;
						case 3 :
						$("#right_number").val("布");
						break;
						default :
						layer.msg("系统BUG！");
					}
					/* 判断胜方 */
					_lefthand = $("#left_number").val();
					_righthand = $("#right_number").val();
					if(_lefthand == _righthand){
						$("#_result").val("平局");
					}else if((_lefthand == "石头" && _righthand == "剪刀") || (_lefthand == "剪刀" && _righthand == "布") || (_lefthand == "布" && _righthand == "石头")){
						$("#_result").val("左边胜利："+_lefthand);
					}
					else{
						$("#_result").val("右边胜利："+_righthand);
					}
				});
				$("#_reload").click(function(){
					window.location.reload();
				});
			});
		</script>
	</head>
	<body>
		<div id="all">
			<div id="" class="start">
				<b>石头剪刀布</b><br />
				<input type="button" name="" id="_start" value="START" class="layui-btn layui-btn-normal"/>
				<input type="button" name="" id="_reload" value="Reload" class="layui-btn layui-btn-normal"/>
			</div>
			<div id="" class="center_div">
				<div id="" class="left_div">
					<span>左手：</span>
					<input type="text" name="" id="left_number" value="" />
				</div>
				<div id="" class="right_div">
					<span>右手：</span>
					<input type="text" name="" id="right_number" value="" />
				</div>
			</div>
			<div id="" class="buttom_div">
				<span>Result：</span>
				<input type="text" name="" id="_result" value="" />
				
			</div>
			
		</div>
	</body>
</html>

PS：知道很多的地方可以优化，但是只是一个小程序，所以没必要花费很多的时间在上面，可以运行就行了！哈哈

用JS写个“石头剪刀布”小程序

猜你喜欢