vue实现注意力测试考验小游戏代码-html代码-BFW代码库

vue实现注意力测试考验小游戏代码

代码语言：html

所属分类：游戏

代码描述：vue实现注意力测试考验小游戏代码，点击开始游戏，从1到25依次点击数字，看你最快能几秒完成

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        @charset "utf-8";
    * { margin: 0; padding: 0; }
    li,ul { list-style: none; }
    .wrap {
    	width: 724px;
    	height: 362px;
    	margin: 50px auto;
    	box-sizing: border-box;
    }
    .wrap h3 { 
    	text-align: center;
    	line-height: 48px;
    	}
    #main {
    	width: 100%;
    	height: 100%;
    	display: flex;
    	flex-flow: row;
    	box-sizing: border-box; 
    	justify-content: center;          
    }
    .main { 
    	flex: 0 0 50%;
    	display: flex;
    	flex-flow: wrap;
    	box-sizing: border-box;
    	}
    .box {
    	background-color: #fff;
    	border: 1px solid #ddd;
    	box-sizing: border-box;
    }
    .box p {
    	width: 70px;
    	line-height: 71px;
    	text-align: center;
    }
    .control {
    	width: 100%;
    	margin-top: 20px;
    	display: flex;
    	flex-flow: row;
    	justify-content: space-between;
    }
    .right {
    	background-color: #066;
    	color: #fff;
    }
    .top {
    	flex: 0 0 50%;
    	padding: 0 15px;
    	overflow: scroll;
    }
    .top li {
    	display: flex;
    	flex-flow: row;
    	justify-content: space-around;
    	border-bottom: 1px solid #ddd;
    	margin-bottom: 8px;            
    }
    .top li span { 
    	display: block;
    	flex: 1;
    	text-align: center;
    }
    </style>

</head>

<body>

    <div class="wrap">
        <h3>15秒注意力大考验&.........完整代码请登录后点击上方下载按钮下载查看