console 命令行工具 X clear

console

var ary=['1','2','3','4','5','6','7','8'];
ary.push(...['1-1','2-2','3-3','4-4','5-5','6-6','7-7','8-8'])
var num=ary.length;
var time=ary.length;
var DomAry=[]
var dobleAry_index=[];
var dobleAry_Num=[];

(function(){
    for(var j=0;j<time;j++){
	  var random=Math.floor(Math.random()*num);
	  for(var i=0;i<ary.length;i++){
		if(random==i){
		 	DomAry.push(ary[i]);
		 	$(".card_border").append("<div class='card'><div class='card_IndexNum'>"+ary[i].substr(0,1)+"</div><img src='https://sandbox.runjs.cn/uploads/rs/3/ztkugu17/"+ary[i]+".jpg' class='card_img'><img src='https://sandbox.runjs.cn/uploads/rs/3/ztkugu17/back1.jpg' class='card_backImg'></div>")
		 	ary.splice(i,1);
			num--
		}
	  }
    }
})()

var el=document.getElementsByClassName("card_backImg");
for(var i=0;i<el.length;i++){
	var a=el[i];
	a.index=i;
	a.onclick=function() {
		$(this).removeClass('card_backImg_Unactive');
	    $(this).addClass('card_backImg_active');
	    dobleAry_Num.push($(this).siblings(".card_IndexNum").html())
	    dobleAry_index.push($(this).parent().index())
	    if(dobleAry_index.length==2){
	       if(dobleAry_Num[0]==dobleAry_Num[1]){
		         dobleAry_Num.length=0
			     dobleAry_index.length=0
	       }else{
	       	  $(".page_mengceng").show();
	          setTimeout(function(){
	              $(".page_mengceng").hide();
	              $(".card").eq(dobleAry_index[0]).children(".card_backImg").addClass('card_backImg_Unactive')
	              $(".card").eq(dobleAry_index[1]).children(".card_backImg").addClass('card_backImg_Unactive')
			      dobleAry_Num.length=0
				  dobleAry_index.length=0
			  },500)
	       }
	    }
	};
}

<!DOCTYPE html>
<html>
	<head>
		
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>RunJS</title>

	
	</head>
	<body>
		
		<div class="page_mengceng"></div>
		<div class="card_border"></div>
		<div class="shuoming">
			游戏说明：翻看卡片，找出对应的物流商图标和名称<br> <br>看看谁的记忆更好吧！
			
		</div>
			
		</div>
		</div>
	</body>
	</body>
</html>

html,body{
	padding: 0;
	background: #8f95b9;
	margin: 0;
}
.page_mengceng{
	position: fixed;
	top: 0;
	display: none;
	z-index: 1000;
	left: 0;
    height: 100%;
    width: 100%;
}
.card_border{
	width: 340px;
	height: 340px;
	margin: 0 auto;
	margin-top: 100px;
	font-size: 0;
}
.card{
	height: 73px;
    width: 73px;
    cursor: pointer;
	display: inline-block;
	box-shadow: 5px 5px rgba(0,0,0,0.5);
	overflow: hidden;
	border-radius: 10px;
	margin-left: 10px;
	margin-top: 10px;
}
.card_backImg{
	position: relative;
	z-index: 1;
	height: 73px;
    width: 73px;
}
.card_img{
	position: absolute;
	border-radius: 10px;
	height: 73px;
    width: 73px;
}
.card_IndexNum{
	opacity: 0;
	z-index: -1;
	position: relative;
}
.card_backImg_active{
	margin-top: -73px;
	margin-left: -73px;
	opacity: 0;
	-webkit-animation: active 0.3s;
}
@-webkit-keyframes active {
	0% {
		margin-top: 0px;
		margin-left: 0px;
		opacity: 1;
	}
	100% {
        margin-top: -73px;
        margin-left: -73px;
        opacity: 0;
	}
}
.card_backImg_Unactive{
	margin-top: 0px;
	margin-left: 0px;
	opacity: 1;
	-webkit-animation: unactive 0.3s;
}
@-webkit-keyframes unactive {
	0% {
		margin-top: -73px;
        margin-left: -73px;
        opacity: 0;
	}
	100% {
        margin-top: 0px;
		margin-left: 0px;
		opacity: 1;
	}
}
.shuoming{
	text-align:center;
		font-size:30px;
	font-weight:bold;
	margin-top:70px;
	
	color:#08264f;
	
}

本项目引用的自定义外部资源

jquery.js