实现一个日语假名自测小程序html-css-js版

最新推荐文章于 2025-04-13 21:19:31 发布

豆约翰

最新推荐文章于 2025-04-13 21:19:31 发布

阅读量418

点赞数 5

分类专栏： JavaScript练习文章标签： css 小程序 html

本文链接：https://blog.youkuaiyun.com/douyh/article/details/146415814

版权

JavaScript练习专栏收录该内容

8 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机日语50音</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>随机日语50音</h1>
        <div id="character" class="character">あ</div>
        <button id="startButton">开始</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.container {
  text-align: center;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.character {
  font-size: 72px;
  font-weight: bold;
  margin: 20px 0;
  color: #333;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #0056b3;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

// 平假名和片假名的列表
const hiragana = [
  "あ", "い", "う", "え", "お",
  "か", "き", "く", "け", "こ",
  "さ", "し", "す", "せ", "そ",
  "た", "ち", "つ", "て", "と",
  "な", "に", "ぬ", "ね", "の",
  "は", "ひ", "ふ", "へ", "ほ",
  "ま", "み", "む", "め", "も",
  "や", "ゆ", "よ",
  "ら", "り", "る", "れ", "ろ",
  "わ", "を", "ん"
];

const katakana = [
  "ア", "イ", "ウ", "エ", "オ",
  "カ", "キ", "ク", "ケ", "コ",
  "サ", "シ", "ス", "セ", "ソ",
  "タ", "チ", "ツ", "テ", "ト",
  "ナ", "ニ", "ヌ", "ネ", "ノ",
  "ハ", "ヒ", "フ", "ヘ", "ホ",
  "マ", "ミ", "ム", "メ", "モ",
  "ヤ", "ユ", "ヨ",
  "ラ", "リ", "ル", "レ", "ロ",
  "ワ", "ヲ", "ン"
];

const characterElement = document.getElementById("character");
const startButton = document.getElementById("startButton");
let animationInterval;
let animationDuration = 1000; // 动画持续时间 3 秒

// 随机选择一个字符
function getRandomCharacter() {
  const isHiragana = Math.random() < 0.5;
  const list = isHiragana ? hiragana : katakana;
  return list[Math.floor(Math.random() * list.length)];
}

// 开始动画
function startAnimation() {
  startButton.disabled = true; // 禁用按钮
  const startTime = Date.now();

  // 每 100 毫秒更新一次字符
  animationInterval = setInterval(() => {
      characterElement.textContent = getRandomCharacter();
  }, 100);

  // 3 秒后停止动画
  setTimeout(() => {
      clearInterval(animationInterval);
      startButton.disabled = false; // 启用按钮
  }, animationDuration);
}

// 绑定按钮点击事件
startButton.addEventListener("click", startAnimation);