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秒注意力大考验&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0