当先锋百科网

首页 1 2 3 4 5 6 7

汉字游戏html代码

汉字游戏是一种非常有趣的游戏，它要求玩家尽可能地拼出更多的汉字或者词语，以此来测试玩家的汉字水平以及对汉字的熟悉度。


<!DOCTYPE html>
<html>
 <head>
  <title>汉字游戏</title>
  <style>
   body{
    text-align: center;
   }
   #container{
    width: 500px;
    margin: 0 auto;
    background-color: #eee;
    padding: 20px;
    border-radius: 10px;
   }
   input[type="text"]{
    width: 80%;
    padding: 10px;
    margin: 10px;
    font-size: 20px;
   }
   input[type="button"]{
    padding: 10px 20px;
    font-size: 20px;
    border-radius: 10px;
    background-color: #4CAF50;
    color: #fff;
    border: none;
   }
   #result{
    font-size: 30px;
    margin-top: 50px;
   }
  </style>
 </head>
 <body>
  <div id="container">
   <h1>汉字游戏</h1>
   <p>请在下面输入框中输入你认为正确的汉字或者词语</p>
   <input type="text" id="input_word" placeholder="请输入汉字或者词语">
   <br>
   <input type="button" value="提交" onclick="checkInput()">
   <div id="result"></div>
  </div>
  <script>
   var correctWords = ["风云变幻", "人山人海", "甘之如饴", "目不暇接", "踏破铁鞋无觅处，得来全不费工夫"];
   function checkInput(){
    var input_word = document.getElementById("input_word").value;
    if(correctWords.indexOf(input_word) !== -1){
     document.getElementById("result").innerHTML = "恭喜你，你猜对了！";
    }else{
     document.getElementById("result").innerHTML = "很遗憾，你猜错了！";
    }
   }
  </script>
 </body>
</html>

汉字游戏html代码

以上是一段简单的汉字游戏的HTML代码，其中包括了页面布局及样式和相应的JavaScript代码，等待玩家输入相应的汉字或者词语，然后通过JavaScript来判断玩家输入的内容是否符合正确答案。