网页配牌器源码 - js + html or asp.net

前言

最近写了个网页配牌器。前端用的jquery实现可视化选牌。

另外用asp.net保存成json方便读取

需要的朋友拿走

效果

TIM截图20171124031333

下载地址

Html工程:链接: https://pan.baidu.com/s/1qY5J1fQ 密码: pwsn

ASP.NET工程: 链接: https://pan.baidu.com/s/1jInEKXg 密码: 9wfr

补充

发现两个小bug。需要自行修改

asp.net中:绑定数据BindData时加上 if (!Page.IsPostBack) 判断。否则无法保存到最新数据。

html中:strs = strs.sort(); 时加上判断。牌堆牌不应该排序

代码

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script type="text/javascript" src="js/amazeui.min.js"></script>
		<link rel="stylesheet" href="css/amazeui.min.css" type="text/css" />
		<link rel="stylesheet" href="css/style.css" type="text/css" />
		<script src="js/jquery-1.10.1.min.js"></script>
	</head>
	<body class="bgcolor">
		<header data-am-widget="header" class="am-header am-header-default jz">
		      <div class="am-header-left am-header-nav">
		         <a class="">
					<i class="am-icon-chevron-left"></i>
				</a>
		      </div>
		      <h1 class="am-header-title">
		          <a href="#title-link" class="">配牌器</a>
		      </h1>
        </header>
        <h2 class="pay">选中对应位置,点击牌即添加配置</h2>
		<div>
        	   		<img onclick="onClickCard('101')" src="images/mj/101.png" width="40"/>
        	   		<img onclick="onClickCard('102')" src="images/mj/102.png" width="40"/>
        	   		<img onclick="onClickCard('103')" src="images/mj/103.png" width="40"/>
        	   		<img onclick="onClickCard('104')" src="images/mj/104.png" width="40"/>
        	   		<img onclick="onClickCard('105')" src="images/mj/105.png" width="40"/>
        	   		<img onclick="onClickCard('106')" src="images/mj/106.png" width="40"/>
        	   		<img onclick="onClickCard('107')" src="images/mj/107.png" width="40"/>
        	   		<img onclick="onClickCard('108')" src="images/mj/108.png" width="40"/>
        	   		<img onclick="onClickCard('109')" src="images/mj/109.png" width="40"/>

        	   		<img onclick="onClickCard('201')" src="images/mj/201.png" width="40"/>
        	   		<img onclick="onClickCard('202')" src="images/mj/202.png" width="40"/>
        	   		<img onclick="onClickCard('203')" src="images/mj/203.png" width="40"/>
        	   		<img onclick="onClickCard('204')" src="images/mj/204.png" width="40"/>
        	   		<img onclick="onClickCard('205')" src="images/mj/205.png" width="40"/>
        	   		<img onclick="onClickCard('206')" src="images/mj/206.png" width="40"/>
        	   		<img onclick="onClickCard('207')" src="images/mj/207.png" width="40"/>
        	   		<img onclick="onClickCard('208')" src="images/mj/208.png" width="40"/>
        	   		<img onclick="onClickCard('209')" src="images/mj/209.png" width="40"/>
        	   		
        	   		<img onclick="onClickCard('301')" src="images/mj/301.png" width="40"/>
        	   		<img onclick="onClickCard('302')" src="images/mj/302.png" width="40"/>
        	   		<img onclick="onClickCard('303')" src="images/mj/303.png" width="40"/>
        	   		<img onclick="onClickCard('304')" src="images/mj/304.png" width="40"/>
        	   		<img onclick="onClickCard('305')" src="images/mj/305.png" width="40"/>
        	   		<img onclick="onClickCard('306')" src="images/mj/306.png" width="40"/>
        	   		<img onclick="onClickCard('307')" src="images/mj/307.png" width="40"/>
        	   		<img onclick="onClickCard('308')" src="images/mj/308.png" width="40"/>
        	   		<img onclick="onClickCard('309')" src="images/mj/309.png" width="40"/>
        	   		
        	   		<img onclick="onClickCard('401')" src="images/mj/401.png" width="40"/>
        	   		<img onclick="onClickCard('402')" src="images/mj/402.png" width="40"/>
        	   		<img onclick="onClickCard('403')" src="images/mj/403.png" width="40"/>
        	   		<img onclick="onClickCard('404')" src="images/mj/404.png" width="40"/>
        	   		<img onclick="onClickCard('405')" src="images/mj/405.png" width="40"/>
        	   		<img onclick="onClickCard('406')" src="images/mj/406.png" width="40"/>
        	   		<img onclick="onClickCard('407')" src="images/mj/407.png" width="40"/>
        	   		</div>
        	   		<button class="money-btn2" type="button" onclick="ClearCard()">清空选中位置配置</button>
        <ul class="pay-style">
        	<li>
        		<span>开启配牌的房间</span>
        		<input type="text" name="nickname" id="nickname" placeholder="请输入房间号" class="login-name">
        	</li>
        	<li>
        		<label class="am-radio-inline">
				    <input type="radio" checked="checked" name="radio10" value="1" data-am-ucheck="" class="am-ucheck-radio"><span class="am-ucheck-icons"><i class="am-icon-unchecked"></i><i class="am-icon-checked"></i></span>
				</label>
				<span>东</span><span id="nums1"></span>
	
				<input type="text" id="p1" style="display:none">
				<br />
				<div id="card1">
					
				</div>
					
        	</li>
        	
        	<li>
        		<label class="am-radio-inline">
				    <input type="radio" checked="checked" name="radio10" value="2" data-am-ucheck="" class="am-ucheck-radio"><span class="am-ucheck-icons"><i class="am-icon-unchecked"></i><i class="am-icon-checked"></i></span>
				</label>
				<span>南</span><span id="nums2"></span>

				<input type="text" id="p2" style="display:none">
				<br />
				<div id="card2">
					
				</div>
					
        	</li>
        	
        	
        	<li>
        		<label class="am-radio-inline">
				    <input type="radio" checked="checked" name="radio10" value="3" data-am-ucheck="" class="am-ucheck-radio"><span class="am-ucheck-icons"><i class="am-icon-unchecked"></i><i class="am-icon-checked"></i></span>
				</label>
				<span>西</span><span id="nums3"></span>

				<input type="text" id="p3">
				<br />
				<div id="card3">
					
				</div>
					
        	</li>
        	
        	<li>
        		<label class="am-radio-inline">
				    <input type="radio" checked="checked" name="radio10" value="4" data-am-ucheck="" class="am-ucheck-radio"><span class="am-ucheck-icons"><i class="am-icon-unchecked"></i><i class="am-icon-checked"></i></span>
				</label>
				<span>北</span><span id="nums4"></span>
				<input type="text" id="p4" style="display:none">
	
				
				<br />
				<div id="card4">
					
				</div>
					
        	</li>
        	
        	<li>
        		<label class="am-radio-inline">
				    <input type="radio" checked="checked" name="radio10" value="5" data-am-ucheck="" class="am-ucheck-radio"><span class="am-ucheck-icons"><i class="am-icon-unchecked"></i><i class="am-icon-checked"></i></span>
				</label>
				<span>牌堆</span><span id="nums5"></span>
				<input type="text" id="p5" style="display:none">
				<br />
				<div id="card5">
					
				</div>
					
        	</li>
        </ul>
        <button class="money-btn" type="button">保存配置</button>
        <script>
        	function ClearCard()
        	{
        		var checkValue = $("input[name='radio10']:checked").val();
        		var checkName = "#p"+checkValue;
        		$(checkName).val("");
        		$("#card"+checkValue).html("");
        		$("#nums"+checkValue).html("");
        	}
        	function onClickCard(i)
        	{
        		var checkValue = $("input[name='radio10']:checked").val();
        		var checkName = "#p"+checkValue;
        		var oldValue = $(checkName).val();
        		var newValue = oldValue+","+i;
        		if(oldValue == "")
        		{
        			newValue = i;
        		}
        		else
        		{
        			newValue = oldValue+","+i;
        		}
        		$(checkName).val(newValue);
        		RefreshCard(checkValue);
        	}
        	function RefreshCard(index)
        	{
        		var name = "#card"+index;
        		var cardsConName = "#p"+index;
        		var cardsNumsName = "#nums"+index;
        		$(name).html(" ");
        		
        		var strs=$(cardsConName).val().split(",");
        		var nums = 0;
        		strs = strs.sort();
				for (i=0;i<strs.length ;i++ ) 
				{ 
					var con = "<img  src='images/mj/id.png' width='30'/>";
					if(strs[i] != "")
					{
						con = con.replace("id",strs[i]);
						var oldCon = $(name).html();
						//alert(oldCon+con)
						$(name).html(oldCon+con);
						nums++;
					}
					
				}
				if(nums > 0)
				{
					$(cardsNumsName).html(nums+"张");
				}
				else
				{
					$(cardsNumsName).html("");
				}
				
        	}
        	function RefreshAllCard()
        	{
        		for (var i=1;i<6;i++)
				{
					RefreshCard(i)
				}
        	}
        </script>
	</body>
</html>

 

本文链接:

https://www.bobsong.net/1161.html
1 + 2 =
快来做第一个评论的人吧~