脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js打字小游戏

js实现打字小游戏

 更新时间：2019年12月17日 09:13:22   作者：weixin_45789779  
这篇文章主要为大家详细介绍了js实现打字小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

今日闲来无事，想试一试模拟打字游戏，下面是效果图，会记录判断打字，如果在外围添加setInterval函数，可以实现测试打字速度的功能。

html

<div class="wrapper">
  <div id="text">A</div>
  <input type="text" id="ipt">
</div>

css

body,
html {
  width: 100%;
  height: 100%;
 }

 .wrapper {
  width: 400px;
  margin: 20px auto;
 }

 div {
  font-size: 100px;
  font-weight: 900;
  text-align: center;

 }
 input{
  width: 400px;
  margin: 20px auto;
 }

js

var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
var text = document.getElementById('text') 
var ipt = document.getElementById('ipt')
var res;
var newRes;
var random = Math.round(Math.random() * 25);
var count = 0
 window.onkeyup = function (e) {
  var random = Math.round(Math.random() * 25);
  newRes = str[random]
  res = text.innerHTML
  text.innerHTML = newRes
  if(e.keyCode == res.charCodeAt(0)){
   count++;
   ipt.value = '';
  }else{
   alert('game over' + '   ' +'您的得分是'+ ':' + count)
   count = 0;
   ipt.value = '';
  }

 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 如何用JavaScript实现动态修改CSS样式表

    如何用JavaScript实现动态修改CSS样式表

    如何用JavaScript实现动态修改CSS样式表？下面小编就为大家带来一篇JavaScript实现动态修改CSS样式表的方法。希望对大家有所帮助。一起跟随小编过来看看吧
    2016-05-05
  • JavaScript中的new操作符的具体使用

    JavaScript中的new操作符的具体使用

    本文主要介绍了JavaScript中的new操作符的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • js图片放大镜效果实现方法详解

    js图片放大镜效果实现方法详解

    这篇文章主要为大家详细介绍了js图片放大镜效果的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 利用javascript如何随机生成一定位数的密码

    利用javascript如何随机生成一定位数的密码

    这篇文章主要给大家介绍了关于利用javascript如何随机生成一定位数的密码的相关资料，文中给出了详细的示例代码，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2017-09-09
  • JS简单实现查看文档创建日期、修改日期和文档大小的方法示例

    JS简单实现查看文档创建日期、修改日期和文档大小的方法示例

    这篇文章主要介绍了JS简单实现查看文档创建日期、修改日期和文档大小的方法,结合实例形式分析了JavaScript使用fileCreatedDate属性、fileModifiedDate属性、lastModified属性和fileSize属性相关操作技巧,需要的朋友可以参考下
    2018-04-04
  • JavaScript实现旋转木马轮播图

    JavaScript实现旋转木马轮播图

    这篇文章主要为大家详细介绍了JavaScript实现旋转木马轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • javascript匿名函数中的''return function()''作用

    javascript匿名函数中的''return function()''作用

    这篇文章主要介绍了javascript匿名函数中的'return function()'作用介绍,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-10-10
  • js多级树形弹出一个小窗口层(非常好用)实例代码

    js多级树形弹出一个小窗口层(非常好用)实例代码

    js多级树形弹出一个小窗口层(非常好用)实例代码，需要的朋友可以参考一下
    2013-03-03
  • 使用Fuse.js实现高效的模糊搜索功能

    使用Fuse.js实现高效的模糊搜索功能

    在现代 Web 应用程序中,实现高效的搜索功能是至关重要的,Fuse.js 是一个强大的 JavaScript 库,它提供了灵活的模糊搜索和文本匹配功能,使您能够轻松实现出色的搜索体验,文中代码示例讲解的非常详细,需要的朋友可以参考下
    2024-01-01
  • Bootstrap面板（Panels）的简单实现代码

    Bootstrap面板（Panels）的简单实现代码

    这篇文章主要为大家详细介绍了Bootstrap面板（Panels）的简单实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03

最新评论