{"id":383,"date":"2025-06-03T09:28:03","date_gmt":"2025-06-03T02:28:03","guid":{"rendered":"https:\/\/ck.kh24.vip\/?p=383"},"modified":"2025-06-03T09:29:46","modified_gmt":"2025-06-03T02:29:46","slug":"%e8%8b%b1%e6%89%93%e7%bb%83%e4%b9%a0","status":"publish","type":"post","link":"https:\/\/ck.kh24.vip\/?p=383","title":{"rendered":"\u82f1\u6253\u7ec3\u4e60\u179b\u17c6\u17a0\u17b6\u178f\u17cb\u179c\u17b6\u1799\u17a2\u1780\u17d2\u179f\u179a\u17a2\u1784\u17cb\u1782\u17d2\u179b\u17c1\u179f"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\">\n\n  <script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\n  <style>\n    body {\n      font-family: Arial, sans-serif;\n      text-align: center;\n      background: #f0f0f0;\n    }\n    #controls {\n      margin-top: 20px;\n    }\n    #start-btn {\n      padding: 10px 20px;\n      font-size: 18px;\n    }\n    #timer, #score {\n      font-size: 20px;\n      margin: 10px;\n    }\n    #target-letter {\n      font-size: 60px;\n      font-weight: bold;\n      margin: 20px 0;\n      color: #333;\n    }\n    #result {\n      font-size: 24px;\n      color: green;\n      margin-top: 20px;\n    }\n    .keyboard {\n      display: inline-block;\n      margin-top: 30px;\n      background: #ddd;\n      padding: 20px;\n      border-radius: 10px;\n      box-shadow: 0 0 10px rgba(0,0,0,0.2);\n    }\n    .row {\n      display: flex;\n      justify-content: center;\n      margin-bottom: 10px;\n    }\n    .key {\n      width: 60px;\n      height: 60px;\n      margin: 4px;\n      background-color: #fff;\n      border: 2px solid #999;\n      border-radius: 8px;\n      line-height: 60px;\n      font-size: 24px;\n      font-weight: bold;\n      color: #333;\n      box-shadow: 0 3px #bbb;\n    }\n    .key.special {\n      width: 80px;\n    }\n    .key.space {\n      width: 300px;\n    }\n    .highlight {\n      background-color: yellow;\n      border-color: red;\n      box-shadow: 0 0 10px red;\n    }\n  <\/style>\n<\/head>\n<body>\n\n<h1>\u82f1\u6253\u7ec3\u4e60<\/h1>\n<div id=\"controls\">\n  <button id=\"start-btn\">\u5f00\u59cb<\/button>\n  <span id=\"timer\">60<\/span> \u79d2\n  <span id=\"score\">\u5206\u6570: 0<\/span>\n<\/div>\n\n<div id=\"target-letter\"><\/div>\n\n<div class=\"keyboard\">\n  <div class=\"row\">\n    <div class=\"key\">1<\/div>\n    <div class=\"key\">2<\/div>\n    <div class=\"key\">3<\/div>\n    <div class=\"key\">4<\/div>\n    <div class=\"key\">5<\/div>\n    <div class=\"key\">6<\/div>\n    <div class=\"key\">7<\/div>\n    <div class=\"key\">8<\/div>\n    <div class=\"key\">9<\/div>\n    <div class=\"key\">0<\/div>\n  <\/div>\n  <div class=\"row\">\n    <div class=\"key\">Q<\/div>\n    <div class=\"key\">W<\/div>\n    <div class=\"key\">E<\/div>\n    <div class=\"key\">R<\/div>\n    <div class=\"key\">T<\/div>\n    <div class=\"key\">Y<\/div>\n    <div class=\"key\">U<\/div>\n    <div class=\"key\">I<\/div>\n    <div class=\"key\">O<\/div>\n    <div class=\"key\">P<\/div>\n  <\/div>\n  <div class=\"row\">\n    <div class=\"key special\">Caps<\/div>\n    <div class=\"key\">A<\/div>\n    <div class=\"key\">S<\/div>\n    <div class=\"key\">D<\/div>\n    <div class=\"key\">F<\/div>\n    <div class=\"key\">G<\/div>\n    <div class=\"key\">H<\/div>\n    <div class=\"key\">J<\/div>\n    <div class=\"key\">K<\/div>\n    <div class=\"key\">L<\/div>\n    <div class=\"key special\">Enter<\/div>\n  <\/div>\n  <div class=\"row\">\n    <div class=\"key special\">Shift<\/div>\n    <div class=\"key\">Z<\/div>\n    <div class=\"key\">X<\/div>\n    <div class=\"key\">C<\/div>\n    <div class=\"key\">V<\/div>\n    <div class=\"key\">B<\/div>\n    <div class=\"key\">N<\/div>\n    <div class=\"key\">M<\/div>\n    <div class=\"key special\">Back<\/div>\n  <\/div>\n  <div class=\"row\">\n    <div class=\"key special\">Ctrl<\/div>\n    <div class=\"key special\">Alt<\/div>\n    <div class=\"key space\">Space<\/div>\n    <div class=\"key special\">Alt<\/div>\n    <div class=\"key special\">Ctrl<\/div>\n  <\/div>\n<\/div>\n\n<div id=\"result\"><\/div>\n\n<script>\n  const keys = \"1234567890QWERTYUIOPASDFGHJKLZXCVBNM\";\n  let score = 0;\n  let timeLeft = 60;\n  let currentLetter = '';\n  let timerInterval;\n\n  function getRandomLetter() {\n    const randomIndex = Math.floor(Math.random() * keys.length);\n    return keys[randomIndex];\n  }\n\n  function highlightKey(letter) {\n    $('.key').removeClass('highlight');\n    $('.key').each(function () {\n      if ($(this).text().toUpperCase() === letter) {\n        $(this).addClass('highlight');\n      }\n    });\n  }\n\n  function startGame() {\n    score = 0;\n    timeLeft = 60;\n    $('#score').text('\u5206\u6570: 0');\n    $('#result').text('');\n    $('#start-btn').prop('disabled', true);\n\n    nextLetter();\n\n    timerInterval = setInterval(() => {\n      timeLeft--;\n      $('#timer').text(timeLeft);\n      if (timeLeft <= 0) {\n        clearInterval(timerInterval);\n        $('#start-btn').prop('disabled', false);\n        $('#target-letter').text('');\n        $('.key').removeClass('highlight');\n        $('#result').text('\u65f6\u95f4\u5230\uff01\u4f60\u7684\u5f97\u5206\u662f\uff1a' + score);\n      }\n    }, 1000);\n  }\n\n  function nextLetter() {\n    currentLetter = getRandomLetter();\n    $('#target-letter').text(currentLetter);\n    highlightKey(currentLetter);\n  }\n\n  $(document).ready(function () {\n    $('#start-btn').click(function () {\n      startGame();\n    });\n\n    $(document).keydown(function (e) {\n      if (timeLeft > 0) {\n        const pressed = e.key.toUpperCase();\n        if (pressed === currentLetter) {\n          score++;\n          $('#score').text('\u5206\u6570: ' + score);\n          nextLetter();\n        }\n      }\n    });\n  });\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u82f1\u6253\u7ec3\u4e60 \u5f00\u59cb 60 \u79d2 \u5206\u6570: 0 1 2 3 4 5 6 7 8 9 0 Q W E R T Y U I  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-383","post","type-post","status-publish","format-standard","hentry","category-5"],"_links":{"self":[{"href":"https:\/\/ck.kh24.vip\/index.php?rest_route=\/wp\/v2\/posts\/383","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ck.kh24.vip\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ck.kh24.vip\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ck.kh24.vip\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ck.kh24.vip\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=383"}],"version-history":[{"count":3,"href":"https:\/\/ck.kh24.vip\/index.php?rest_route=\/wp\/v2\/posts\/383\/revisions"}],"predecessor-version":[{"id":386,"href":"https:\/\/ck.kh24.vip\/index.php?rest_route=\/wp\/v2\/posts\/383\/revisions\/386"}],"wp:attachment":[{"href":"https:\/\/ck.kh24.vip\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=383"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ck.kh24.vip\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=383"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ck.kh24.vip\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=383"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}