本文共 2325 字，大约阅读时间需要 7 分钟。

效果图：

需求分析：

1. 在char这个div里面显示要输入的字母，大写
2. 在result这个div里面时时显示正确率，比如98%
3. 给文档绑定按键事件
4. 如果输入的内容和char里面一致，显示正确动画：animated zoomIn,并更换输入的字母
5. 如果输入的内容和char里面不一致，显示错误动画：animated shake error
6. 不管是正确还是错误都时时更新result里面的正确率

源代码：

• HTML部分

       
    
     A
    
    
    
     请在按键上按下屏幕上显示的字母
    
   

• css部分

1. 为了实现一些特效，先创建一个animate.css文件，在封装一些动画效果放里面

/*animate.css*/.animated {
     -webkit-animation-duration: 1s;  animation-duration: 1s;  -webkit-animation-fill-mode: both;  animation-fill-mode: both;}.animated.infinite {
     -webkit-animation-iteration-count: infinite;  animation-iteration-count: infinite;}.animated.hinge {
     -webkit-animation-duration: 2s;  animation-duration: 2s;}.animated.flipOutX,.animated.flipOutY,.animated.bounceIn,.animated.bounceOut {
     -webkit-animation-duration: .75s;  animation-duration: .75s;}@-webkit-keyframes zoomIn {
     from {
       opacity: 0;    -webkit-transform: scale3d(.3, .3, .3);    transform: scale3d(.3, .3, .3);  }  50% {
       opacity: 1;  }}@keyframes zoomIn {
     from {
       opacity: 0;    -webkit-transform: scale3d(.3, .3, .3);    transform: scale3d(.3, .3, .3);  }  50% {
       opacity: 1;  }}.zoomIn {
     -webkit-animation-name: zoomIn;  animation-name: zoomIn;}            .animated {
     -webkit-animation-duration: 1s;  animation-duration: 1s;  -webkit-animation-fill-mode: both;  animation-fill-mode: both;}@-webkit-keyframes shake {
     from, to {
       -webkit-transform: translate3d(0, 0, 0);    transform: translate3d(0, 0, 0);  }  10%, 30%, 50%, 70%, 90% {
       -webkit-transform: translate3d(-10px, 0, 0);    transform: translate3d(-10px, 0, 0);  }  20%, 40%, 60%, 80% {
       -webkit-transform: translate3d(10px, 0, 0);    transform: translate3d(10px, 0, 0);  }}@keyframes shake {
     from, to {
       -webkit-transform: translate3d(0, 0, 0);    transform: translate3d(0, 0, 0);  }  10%, 30%, 50%, 70%, 90% {
       -webkit-transform: translate3d(-10px, 0, 0);    transform: translate3d(-10px, 0, 0);  }  20%, 40%, 60%, 80% {
       -webkit-transform: translate3d(10px, 0, 0);    transform: translate3d(10px, 0, 0);  }}.shake {
     -webkit-animation-name: shake;  animation-name: shake;}

2. css主体代码，无动画特效版

• JavaScript部分

1. 为了简化代码，先封装一些常用的自定义构造函数

2. js主体部分，需要用到封装的函数，调用即可

• 总代码

    
           
       
           
           
    
     A
    
        
    
     请在按键上按下屏幕上显示的字母
    
    
   

转载地址：http://yyxh.baihongyu.com/