html,js自助打字代码

最新推荐文章于 2024-02-05 17:05:17 发布

蚂蚁小草

最新推荐文章于 2024-02-05 17:05:17 发布

阅读量1.2k

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/yueruitao/article/details/69389042

版权

这是一个HTML和JavaScript结合的打字练习代码示例。页面背景使用了动画效果，用户需在键盘上输入屏幕上显示的随机字母。代码中定义了一个`show()`函数生成随机字母并显示，同时监听窗口的按键事件，比较用户输入与屏幕显示的字母，计算并显示正确率。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字母练字</title>
<style type="text/css">
body{
display: flex;
background-color: #000000;
height: 100%;
justify-content: center;
align-content: center;
text-align: center;
/*align-items: center;*/
/*background: linear-gradient(to right,red,blue,green,blue,red);*/
background: darkcyan no-repeat top left/5px 5px;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {background: blue bottom right/50px 50px;}
}

/* Standard syntax */
@keyframes mymove {
50% {background: blue bottom right/50px 50px;}
}
#letter{
color: lawngreen;
text-