听写功能js

最新推荐文章于 2024-06-03 10:05:11 发布

初晨未凉

最新推荐文章于 2024-06-03 10:05:11 发布

阅读量163

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_45638909/article/details/109121720

版权

笔记专栏收录该内容

59 篇文章 1 订阅

订阅专栏

前言：和朋友一起写的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 100%;
				height: 100vh;
				background-color: #303952;
				color: #FFFFFF;
			}
			.content{
				display: flex;
				justify-content: center;
				height: 100vh;
				align-items: center;
			}
			.text{
				font-size: 34px;
				color: #FFFFFF;
			}
			.text span{
				display: block;
				padding: 50px;
				text-align: center;
			}
			.btn{
				border: none;
				background-color: transparent;
				border-bottom: 3px solid #FFFFFF;
				padding:5px 15px 5px 15px;
				outline: none;
				font-size: 28px;
				color:#dff9fb;
				text-align: center;
				
			}
			.rae{
				position: absolute;
				right: 0;
				font-size: 24px;
				padding: 8px 30px 0 0 ;
			}
			.te{
				display: inline;
			}
			
			.animation {
				animation: ch 0.2s;
			}
			
			@keyframes ch{
				12.5% {
					transform: translateX(1.5px) rotate(1deg);
				}
				25% {
					transform: translateY(-1.5px) rotate(-1deg);
				}
				50% {
					transform: translateX(3px) rotate(2deg);
				}
				75% {
					transform: translateY(-1.5px) rotate(-1deg);
				}
				87.5% {
					transform: translateX(1.5px) rotate(1deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="rae">
				<div class="te">
					<span>正确</span>
					<span class="right">0</span>
				</div>
				<div class="te">
					<span>错误</span>
					<span class="error">0</span>
				</div>
			</div>
			
			<div class="content">
				<div class="text">
					<span class="english">pig</span>
					<input type="text" class="btn">
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var obj = {
				cat:'猫',
				dog:'狗',
				pig:'猪',
				hello:'您好',
				bench:'长凳',
				pen:'钢笔'
			}
			var text = document.getElementsByClassName('english')[0];
			var btn = document.getElementsByClassName('btn')[0];
			var right = document.getElementsByClassName('right')[0];
			var error = document.getElementsByClassName('error')[0];
			var key = Object.keys(obj).length;
			var num = Math.floor(Math.random()*key);
			var a = Object.keys(obj)[num];
			text.innerHTML = obj[a];
			btn.onkeydown = function(event){
				if(event.keyCode == 13){
					var value = btn.value;
					console.log(Object.keys(obj));
					if(a == value){
						delete obj[a];
						right.innerHTML = parseInt(right.innerHTML) + 1;
						key = Object.keys(obj).length;
						num = Math.floor(Math.random()*key);
						a = Object.keys(obj)[num];
						text.innerHTML =obj[a];
					}else{
						error.innerHTML = parseInt(error.innerHTML) + 1;
						text.classList.add('animation');
					}
					btn.value = "";
				}
				if(key == 0){
					text.innerHTML ='今日份已完成';
				}
				
			}
			
			
		</script>
	</body>
</html>