将英语单词的每个字母单创建容器,然后将这些容器打乱顺序,排列成一排,现在将这些容器拖动到单词验证框,如果框里的容器顺序和单词顺序一致时,显示标签"恭喜答对"
时间: 2024-04-21 10:24:25 浏览: 91
这个问题涉及到单词拆解、容器打乱顺序和验证逻辑。我将为你提供一个基本的实现思路,请参考以下代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>单词验证</title>
<style>
#word-container {
display: flex;
justify-content: center;
}
.letter-container {
width: 30px;
height: 30px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
margin: 5px;
}
#word-validation {
margin-top: 10px;
}
</style>
</head>
<body>
<div id="word-container"></div>
<div id="word-validation"></div>
<script>
// 单词
const word = "english";
// 打乱顺序函数
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
// 创建单词容器
for (let i = 0; i < word.length; i++) {
const letterContainer = document.createElement("div");
letterContainer.className = "letter-container";
letterContainer.innerText = word[i];
document.getElementById("word-container").appendChild(letterContainer);
}
// 打乱容器顺序
const letterContainers = document.getElementsByClassName("letter-container");
const shuffledContainers = Array.from(letterContainers);
shuffle(shuffledContainers);
for (let i = 0; i < shuffledContainers.length; i++) {
document.getElementById("word-container").appendChild(shuffledContainers[i]);
}
// 验证逻辑
const validationButton = document.createElement("button");
validationButton.innerText = "验证";
validationButton.onclick = function () {
const currentContainers = document.getElementsByClassName("letter-container");
let currentWord = "";
for (let i = 0; i < currentContainers.length; i++) {
currentWord += currentContainers[i].innerText;
}
if (currentWord === word) {
document.getElementById("word-validation").innerText = "恭喜答对";
} else {
document.getElementById("word-validation").innerText = "回答错误";
}
};
document.body.appendChild(validationButton);
</script>
</body>
</html>
```
上述代码使用了 HTML、CSS 和 JavaScript 来实现。它首先创建了一个用于显示单词的容器 `word-container`,然后通过循环创建了每个字母的容器 `letter-container`。接着,通过打乱容器顺序的函数 `shuffle` 对容器进行了随机排序,并将打乱后的容器添加到 `word-container` 中。最后,通过点击验证按钮,获取当前容器顺序所组成的单词,与原始单词进行比较,如果一致则显示 "恭喜答对",否则显示 "回答错误"。
你可以将上述代码保存为一个 HTML 文件,并在浏览器中打开,即可看到效果。希望能帮到你!如有任何疑问,请随时提问。