效果
页面随机生成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);
}
}