web前端培训:JQuery实现键盘打字游戏
今天我们来完成一个很好玩的网页键盘打字游戏,效果如图:
先放出html部分代码
jQuery键盘打字练习游戏代码
- 时间:0时0分0秒
- 正确率:--%
- 完成率:--%
- 选择练习模式: 键盘布局 键位课程
- 您的浏览器不支持 video 标签。 您的浏览器不支持 video 标签。
- ~ `
- ! 1
- @ 2
- # 3
- $ 4
- % 5
- ^ 6
- & 7
- * 8
- ( 9
- ) 0
- _ -
- + =
- backspace
- Tab
- Q
- W
- E
- R
- T
- Y
- U
- I
- O
- P
- { [
- } ]
- Caps Lock
- A
- S
- D
- F _
- G
- H
- J _
- K
- L
- : ;
- " '
- |
- Enter
- shift
- Z
- X
- C
- V
- B
- N
- M
- < ,
- > .
- ? /
- shift
然后样式部分: @charset "UTF-8";
- {
padding: 0;
margin: 0;
}
.keyboard {
width: 854px;
margin: 30px auto;
overflow: hidden;
}.keyboard .keyboardArea {
position: relative;
/开机特效区/
}.keyboard .keyboardArea>ul {
position: relative;
margin-bottom: 10px;
}.keyboard .keyboardArea>ul>li {
position: relative;
width: 50px;
height: 50px;
border: 1px solid #a0913d;
background: #000;
color: #a0913d;
border-radius: 3px;
vertical-align: top;
list-style: none;
text-align: center;
display: inline-block;
animation: moveBgShadow 0.5s 2s forwards;
-moz-animation: moveBgShadow 0.5s 2s forwards;
-webkit-animation: moveBgShadow 0.5s 2s forwards;
-o-animation: moveBgShadow 0.5s 2s forwards;
overflow: hidden;
/*:after{
content: “”;
position: absolute;
width: 2px;
height: 83px;
top: -17px;
left: -32px;
transform: rotate(40deg);
background: $lineHeight;
box-shadow: 0px 0px 16px $lineHeightShadow;animation:moveLineHight 2s 1;-moz-animation:moveLineHight 2s 1;-webkit-animation:moveLineHight 2s 1;-o-animation:moveLineHight 2s 1;}*/
}
.keyboard .keyboardArea>ul>li>span {
display: block;
overflow: hidden;
}.keyboard .keyboardArea>ul>li .keySign {
box-shadow: 0px 20px 1px #a0913d;
border: 1px solid #a0913d;
height: 1px;
width: 8px;
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -4px;
}.keyboard .keyboardArea>ul .active {
background: #00ff21;
border-color: #00ff21;
}.keyboard .keyboardArea>ul .errorKey {
background: #ff0021;
border-color: #ff0021;
}.keyboard .keyboardArea .specialEffects0:before {
content: “”;
position: absolute;
width: 400px;
height: 70px;
left: -400px;
top: -10px;
background: #fff;
box-shadow: 0px 0px 16px #d0d0d0;
background-image: -webkit-linear-gradient(right, #a0913d, #f0da5c);
opacity: 1;
animation: moveSpecialEffects0 1s 1;
-moz-animation: moveSpecialEffects0 1s 1;
-webkit-animation: moveSpecialEffects0 1s 1;
-o-animation: moveSpecialEffects0 1s 1;
}.keyboard .keyboardArea .specialEffects1:before {
content: “”;
position: absolute;
width: 400px;
height: 70px;
left: 860px;
top: -10px;
background: #fff;
box-shadow: 0px 0px 16px #d0d0d0;
background-image: -webkit-linear-gradient(left, #a0913d, #f0da5c);
opacity: 1;
animation: moveSpecialEffects1 1s 1;
-moz-animation: moveSpecialEffects1 1s 1;
-webkit-animation: moveSpecialEffects1 1s 1;
-o-animation: moveSpecialEffects1 1s 1;
}.keyboard .keyboardArea:before {
content: “”;
position: absolute;
width: 1px;
height: 1px;
background: #fff;
box-shadow: 0px 0px 16px #a0913d;
background-image: -webkit-radial-gradient(#a0913d, #f0da5c);
top: 50%;
left: 50%;
margin: -0px -0px;
border-radius: 50%;
animation: moveSpecialEffects2 1.2s 1 .7s;
-moz-animation: moveSpecialEffects2 1.2s 1 .7s;
-webkit-animation: moveSpecialEffects2 1.2s 1 .7s;
-o-animation: moveSpecialEffects2 1.2s 1 .7s;
}/@keyframes moveLineHight{
0% {
left: -400px;
}
100% {
left: 160px;
}
}/
@keyframes moveSpecialEffects0 {
0% {
left: -400px;
width: 400px;
}55% {
left: 27px;
width: 400px;
}100% {
left: 427px;
width: 0px;
}
}@keyframes moveSpecialEffects1 {
0% {
left: 860px;
width: 400px;
}55% {
left: 427px;
width: 400px;
}100% {
left: 427px;
width: 0px;
}
}@keyframes moveSpecialEffects2 {
0% {
width: 1px;
height: 1px;
}10% {
width: 100px;
height: 70px;
opacity: 1;
margin: -35px -50px;
}100% {
width: 1200px;
height: 800px;
opacity: 0.5;
margin: -400px -600px;
}
}@keyframes moveBgShadow {
0% {
box-shadow: none;
}100% {
box-shadow: 5px 5px 5px #a0913d;
}
}.width12 {
width: 60px !important;
line-height: 50px;
}.width13 {
width: 65px !important;
line-height: 50px;
}.width14 {
width: 70px !important;
line-height: 50px;
}.width15 {
width: 75px !important;
line-height: 50px;
}.width16 {
width: 80px !important;
line-height: 50px;
}.width17 {
width: 85px !important;
line-height: 50px;
}.width18 {
width: 90px !important;
line-height: 50px;
}.width20 {
width: 100px !important;
line-height: 50px;
}.width275 {
width: 131.25px !important;
line-height: 50px;
}.enterBoard {
border-radius: 3px 3px 0 3px !important;
}.enterDown {
height: 61px !important;
vertical-align: bottom;
position: relative;
top: -11px;
margin-bottom: -11px;
border-top: 1px solid transparent !important;
border-radius: 0 0 3px 3px !important;
}.promptArea {
margin-bottom: 30px;
position: relative;
}.promptArea>ul {
text-align: center;
}.promptArea>ul>li {
position: relative;
width: 50px;
height: 50px;
border: 1px solid #a0913d;
background: #000;
color: #a0913d;
border-radius: 3px;
vertical-align: top;
list-style: none;
text-align: center;
display: inline-block;
animation: moveBgShadow 0.5s 2s forwards;
-moz-animation: moveBgShadow 0.5s 2s forwards;
-webkit-animation: moveBgShadow 0.5s 2s forwards;
-o-animation: moveBgShadow 0.5s 2s forwards;
overflow: hidden;
margin: 0 4px;
}.promptArea>ul .correctKey {
background: #00ff21;
border-color: #00ff21;
}.promptArea>ul .waitPractice {
background: #00c2ff;
border-color: #00c2ff;
}.promptArea>p {
color: red;
height: 60px;
line-height: 60px;
position: absolute;
top: 0;
width: 99%;
text-align: center;
background: rgba(0, 0, 0, 0.5);
}.efficiencyPrompt {
text-align: left;
margin-bottom: 20px;
}.efficiencyPrompt>ul>li {
list-style: none;
display: inline-block;
margin-right: 10px;
}/键盘音效处理区/
.keyboardSound {
display: inline-block;
cursor: pointer;
}.keyboardSound .soundNo {
display: none;
}.keyboardSound .soundVideo {
display: none;
}/*# sourceMappingURL=keyboard.css.map */
最后脚本部分:那么这期就到这里了,我们下期再见吧
web前端培训:JQuery实现键盘打字游戏相关推荐
- 哪些人适合学web前端培训呢
哪些人适合学web前端培训呢?经常会有人问到这个问题,因为互联网对于很多人来说是非常具有诱惑力的,前端便是其中的一种互联网技术,那么针对这个问题,我们来看看下面的详细介绍吧. 哪些人适合学web前端培 ...
- 参加web前端培训要学会哪些技能
想要成为一名合格的web前端程序猿,要学习的东西有很多,那么参加web前端培训要学会哪些技能呢?来看看下面的详细介绍就知道了. 参加web前端培训要学会哪些技能?想从事web前端开发,只会HTML.C ...
- 参加web前端培训要学哪些知识
IT行业,web前端技术是比较吃香的,也是工资待遇非常高的行业之一,如果想要做一名合格的web前端工程师,系统学习是非常重要的,那么参加web前端培训要学哪些知识呢?来看看下面的详细介绍. 参加web ...
- web前端培训分享Electron之Main Process API
本节由千锋web前端培训机构讲师给大家分享Electron使用指南之Main Process API,Electron API (Electron API 有三种) Main Process (主进进 ...
- 如何选择web前端培训机构?
随着web前端需求量的日益增加,企业对前端人员的技能要求也越来越高,我们如何能学到满足企业的web前端技能,向着名企前进!因此,选择一个好的web前端培训机构至关重要,在此给大家几点如何选择好培训机构 ...
- web前端培训学校哪个好?有什么优势
越来越多的web前端培训机构,越来越不知道如何选择哪家机构去学习,想知道web前端培训那个学校好?哪家更值得去选择学习呢? 市面上的web前端培训机构很多,但是并不是随便哪家都是值得我们去学习的,很多 ...
- Web前端培训好找工作吗?
Web前端培训好找工作吗?这个可以在各大招聘平台和一些专业的社区平台就可以找到答案,前端的需求量还是非常大的,只是随着前端行业的不断发展和前端行业的多元化导致企业对于前端开发人员的要求有所提高,Web ...
- 现在参加Web前端培训后好就业吗?
选在参加Web前端培训后好就业吗?在目前互联网时代,只要公司有需要开发互联网产品,包括网站.网页.H5.小程序.APP等等,就需要前端开发工程师岗位,具体的就业方向还可以按公司的技术需求来区分,侧重点 ...
- 天津web前端培训机构哪家好?程序员培训
web前端相对于其他软件开发是比较容易入门的,但是如果深入学习就比较困难了,这门技能需要从业人员掌握一定的设计.代码.交互技能和一些SEO技能,涉及这么多知识和技能,不少人选择参加培训去学习,那么we ...
- web前端培训分享:面向对象中类和对象的定义是什么?
在学习web前端技术的时候,我们接触的最多的便是面向对象这一块,其实很多编程技术都有用到这个现象,下面我们就为大家详细的介绍一下面向对象中类和对象的定义是什么? web前端培训分享:面向对象中类和对象 ...
最新文章
- matlab有限域多项式除法_椭圆曲线密码学简介(二):有限域的椭圆曲线及离散对数问题...
- 2020牛客多校第1场H-Minimum-cost Flow
- ooalv自定义按钮、单击、双击、列编辑切换的事件用法
- OpenCV iOS-图像处理
- php中try catch捕获异常实例详解
- 公式 有效值_纯电阻电路电功率公式
- c++怎么将文件中的数据读出并赋值给字符串_web前端开发过程中如何写JavaScript程序?...
- Java Web 应用概述
- C++一维数组指针详解
- vue导出Excel(三)
- C# GridView 分页显示
- ES6--async函数
- CSS实现DIV悬浮
- arm-linux 看门狗,S3C6410看门狗源码实例
- QEMU,Dynamips,IOL区别
- 光学字符识别引擎 tesseract-ocr 简介
- 文件搜索工具(简单版)
- 基于Syntiant TinyML Board与Edge Impulse的LED语音控制(Arduino/C++)
- vue实现echarts词云图业务【详细配置版】
- 6. ES6 字符串的新增方法
热门文章
- web系统之猜数游戏——项目总结
- 汉诺塔c 语言程序代码,汉诺塔 (C语言代码)
- python和按键精灵哪个做脚本好_[按键精灵教程]学了这个你也能做出稳定的脚本...
- windows远程连接linux中mysql数据库
- 【产品】产品经理PM相关书籍荐读
- KEmulator eclipse 调试
- win7开机动画怎么换
- 天翼校园客户端没有linux版本,Linux下突破校园天翼宽带客户端限制(已移植OpenWRT)...
- 学校网络认证服务器无响应,校园网常见问题
- php 字体设计,时尚前沿:15个创意的3D字体设计艺术作品欣赏