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

2025/3/22 9:22:55 来源：https://blog.csdn.net/douyh/article/details/146415814 浏览: 次关键词：实现一个日语假名自测小程序html-css-js版

<!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);

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

相关资讯

热文排行

最新新闻

推荐新闻

热搜词