JS 按键事件，打字小游戏

最新推荐文章于 2023-09-04 10:46:54 发布

CodeCode!

最新推荐文章于 2023-09-04 10:46:54 发布

阅读量454

点赞数

分类专栏： JS 文章标签： js javascript css html

本文链接：https://blog.csdn.net/qq_42847094/article/details/108298715

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果

页面随机生成26个字母其中一个，按对了，分数加1
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>打字小游戏</title>
		
		<style type="text/css">
			#showCode{
				width: 200px;
				height: 200px;
				color: #fff;
				position: fixed;
				left: calc(50% - 100px);
				top: calc(50% - 100px);
				font-size: 80px;
				text-align: center;
				line-height: 200px;
				background: rgba(0,0,0,0.6);
			}
		</style>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<div id="showCode"></div>
		
		<script type="text/javascript" src="js/alert.js"></script>
		<script type="text/javascript">
			var score = 0; //计数
			
			function randomcode(){
				//随机生成字数，因为Math.random()生成范围[0,1)
		 		var randomNum =97 + parseInt(Math.random() * 26);
				//console.log(randomNum);
				var randomStr = String.fromCharCode(randomNum); //数字转换为字母
				
				//将字符串，小写转成 大写
				var ucStr = randomStr.toUpperCase();
				var showCodeDiv = document.querySelector("#showCode");
				showCodeDiv.innerHTML = ucStr; //把字符串添加到div
			}
			
			randomcode(); //调用随机生成字母函数
			
			var body = document.body; //父元素
			//按键盘事件
			body.onkeypress = function(event){
				//console.log(event);
				var keyCode = event.key.toUpperCase(); //获取按下的键转成大写字母
				var showCodeDiv = document.querySelector("#showCode");
				//判断输入的字母和随机生成的是否一样
				if(keyCode == showCodeDiv.innerHTML){
					console.log("当前得分："+ score);
					score++;
					
					randomcode(); //调用随机生成字母函数
					
				}
			}
		
			var fn5 = function(){
				//alert("您每分钟能敲"+score*6 + "单词");
				llAlert({
					title:"打字速度",
					content:"您每分钟能敲"+score*6 + "单词",
					confirmFn:function(){
						score = 0; //重新计数
						setTimeout(fn5, 5000); 
					}
					
				})
			}
			
			
			//5秒一样，时间函数，5000毫秒为单位（5秒）
			setTimeout(fn5, 5000); 
			
		
		</script>
	</body>
</html>

*{
	margin : 0;
	padding: 0;
	box-sizing: border-box;
}

/* 最外层 */
.zhezhao{
	position: fixed; /* 固定*/
	left: 0;
	top: 0;
	height: 100vh;
	width: 100vw;
	background-color: rgba(0,0,0,0.5);
	display: flex;
	align-items: center; /* 垂直方向居中*/
	justify-content: center; /* 纵轴广告居中*/
}

/* 弹框 */
.alert{
	width: 600px;
	height: 400px;
	background-color: #fff;
	display: flex; 
	flex-direction: column; /* 内容垂直分布*/
}

/* 表头部 */
.alert>.header{
	height: 80px;
	line-height: 80px;
	border-bottom: 1px solid #ccc;
	display: flex;
	justify-content: space-between; /* 每行内容两边排齐*/
	padding:0px 30px;
}

.alert>.header>.title{
	font-size: 30px;
	font-weight: 900;
	color: #ccc;
}

/* 关闭 */
.alert>.header>.close:hover{
	color: red;
}

/* 主要内容:放文字 */
.alert>.main{
	flex: 1;  /* 占一份*/
	padding:30px;
	border-bottom: 1px solid #ccc;
}

/* 设置按钮总位置大小 */
.alert>.btnList{
	height:80px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding:0 30px;
}
/* 按钮 */
.alert>.btnList>.btn{
	height: 60px;
	width:120px;
	text-align: center;
	line-height: 60px; 
	margin: 50px; /* 外边距*/
}

/* 设置按钮颜色 */
.alert>.btnList>.btn:nth-child(1){
	background-color: coral;
}

.alert>.btnList>.btn:nth-child(2){
	background-color: #999;
}

/* 参数 */
/* 
args:
 {
	 title:'温馨提示',
	 content:'内容',
	 confirmFn:function(){
		 var blueDiv = document.createElement('div');
		 blueDiv.style.backgroundColor = "blue";
		 blueDiv.style.width = "300px";
		 blueDiv.style.height = "300px";
		 body.appendChild(blueDiv);
	 }, s
	 cancelFn:function(){
		 
	 }
	 
 }
 
 */

function llAlert(args){
	var zhezhao = document.createElement('div'); /* 创建div*/
	zhezhao.className = "zhezhao"; /* 创建class属性*/
	/* zhezhao 后追加内容 */
	zhezhao.innerHTML = `
	<div class="alert">
		<div class="header"><span class="title">`+args.title+`</span><span class="close">X</span></div>
		<div class="main">
			`+args.content+`
		</div>
		<div class="btnList">
			<div class="btn yes">确定</div>
			<div class="btn no">取消</div>
		</div>
	</div>
	`
	/* 找到父元素 */
	var body = document.querySelector('body');	
	body.appendChild(zhezhao);/* 在父元素上追加内容 */
	
	/* 获取close元素（关闭） */
	var closeDiv = document.querySelector(".close");
	/* 设置关闭 点击事件 */
	closeDiv.onclick = function(){
		body.removeChild(zhezhao); /* 移除*/
	}
	
	/* 点击确定添加蓝色div */
	/* 1/找到确定按钮 */
	var yesDiv = document.querySelector(".btn.yes");
	yesDiv.onclick = function(){
		if(args.confirmFn() == 'function'){
			args.confirmFn(); /* 添加函数*/
		}else{
			console.error("函数没有设置参数");
		}
		
		
		body.removeChild(zhezhao); /* 添加后移除*/		
	}
			
	/* 取消 */
	var noDiv = document.querySelector(".btn.no");
	noDiv.onclick = function(){
		if(typeof args.cancelFn() == 'function'){
			args.cancelFn(); /* 取消函数*/
		}else{
			console.error("函数没有设置参数");
		}
		
		body.removeChild(zhezhao);
	}
			
}

CodeCode!

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS 按键事件，打字小游戏

效果页面随机生成26个字母其中一个，按对了，分数加1<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>打字小游戏</title> <style type="text/css"> #showCode{ width: 200px; height: 200px; color: #fff; posi
复制链接

扫一扫

专栏目录