<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>没啥实力的课外练习5</title>
<style>
.czjm{
width: 560px;
height: 240px;
border: 2px solid white;
border-radius: 10px;
margin: auto;
margin-top: 100px;
background: linear-gradient(to bottom right, #88E2D6, #7A64F3);
}
.liwei{
margin: auto;
margin-top: 10px;
}
.selectk{
margin: auto;
margin-top: 10px;
}
.selectkk{
margin: auto;
margin-top: 25px;
}
.anniu{
margin: auto;
}
.tishiyu{
font-size: 10px;
margin: auto;
}
.title{
color: #8d675d;
font-size: larger;
}
.submit{
background-color: #007DFA;
color: white;
border:2px #007DFA;
border-radius: 10%;
}
.k2{
background-color: #F7AB00;
color: white;
border:1px solid black;
}
#sk{
width: 30px;
}
#k{
border-radius: 15%;
width: 30px;
height: 32px;
}
#kk{
border-radius: 15%;
width: 25px;
height: 25px;
color:#8d675d;
}
#kk:hover{
background-color: #cccbc6;
}
.rest{
margin: auto;
height: 2px;
margin-bottom: 0px;
}
.res{
background-color: #88E2D6;
}
</style>
</head>
<body>
<table class="czjm">
<th>
<table class="liwei">
<td class="title">成语拼接游戏</td>
</table>
<table class="selectk">
<tr></tr>
<tr>
<td id="sk">
<input type="button" value="" class="k1" id="k">
</td>
<td id="sk">
<input type="button" value="" class="k1" id="k">
</td>
<td id="sk">
<input type="button" value="" class="k1" id="k">
</td>
<td id="sk">
<input type="button" value="" class="k1" id="k">
</td>
<td id="sk">
<input type="button" value="" class="k1" id="k">
</td>
<td id="sk">
<input type="button" value="" class="k1" id="k">
</td>
<td id="sk">
<input type="button" value="" class="k1" id="k">
</td>
<td id="sk">
<input type="button" value="" class="k1" id="k">
</td>
<td id="sk">
<input type="button" value="" class="k1" id="k">
</td>
<td id="sk">
<input type="button" value="" class="k1" id="k">
</td>
<td id="sk">
<input type="button" value="" class="k1" id="k">
</td>
<td id="sk">
<input type="button" value="" class="k1" id="k">
</td>
</tr>
</table>
<table class="tishiyu">
<tr>
<td><span>请点击下方文字组织正确的成语(点击框内文字可清除)</span></td>
</tr>
</table>
<table class="selectkk">
<tr></tr>
<tr>
<td>
<input type="button" value="" class="k2" id="kk">
</td>
<td>
<input type="button" value="" class="k2" id="kk">
</td>
<td>
<input type="button" value="" class="k2" id="kk">
</td>
<td>
<input type="button" value="" class="k2" id="kk">
</td>
<td>
<input type="button" value="" class="k2" id="kk">
</td>
<td>
<input type="button" value="" class="k2" id="kk">
</td>
<td>
<input type="button" value="" class="k2" id="kk">
</td>
<td>
<input type="button" value="" class="k2" id="kk">
</td>
<td>
<input type="button" value="" class="k2" id="kk">
</td>
<td>
<input type="button" value="" class="k2" id="kk">
</td>
<td>
<input type="button" value="" class="k2" id="kk">
</td>
<td>
<input type="button" value="" class="k2" id="kk">
</td>
</tr>
</table>
<table class="anniu">
<tr></tr>
<tr>
<td class="queren"><input type="submit" value="确认" class="submit"></td>
</tr>
<table class="rest">
<tr class="restr">
<td class="ress">
<span class="res"></span>
</td>
</tr>
</table>
</table>
<tr></tr>
<tr></tr>
<tr></tr>
</th>
</table>
<script>
function randomarr(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
}
function cshGame() {
var phrases = ['百里挑一', '亡羊补牢', '狐假虎威'];
var allChar = [];
for (var i = 0; i < phrases.length; i++) {
for (var k = 0; k < phrases[i].length; k++) {
allChar.push(phrases[i][k]);
}
}
randomarr(allChar);
var buttons = document.querySelectorAll('.k2');
for (var i = 0; i < buttons.length; i++) {
buttons[i].value = allChar[i];
}
}
function move(event) {
document.querySelector('.res').textContent = '';
selectedChar = event.target.value;
upperButtons = document.querySelectorAll('.k1');
for (var i = 0; i < upperButtons.length; i++) {
if (!upperButtons[i].value) {
upperButtons[i].value = selectedChar;
break;
}
}
}
function devarec(event) {
event.target.value = '';
}
function check() {
upperButtons = document.querySelectorAll('.k1');
phrases = ['百里挑一', '亡羊补牢', '狐假虎威'];
var successCount = 0;
indx=[0,0,0];
for (var i = 0; i < upperButtons.length; i += 4) {
var phrase = '';
for (var k = 0; k < 4; k++) {
phrase += upperButtons[i + k].value;
}
for (var j = 0; j < phrases.length; j++) {
if (phrase == phrases[j] && indx[j]==0) {
indx[j]=1;
successCount+=1;
break;
}
}
}
document.querySelector('.res').textContent = successCount == phrases.length ? '恭喜你,答对了!' : '挑战失败,请重新挑战。';
}
cshGame();
var k2Buttons = document.querySelectorAll('.k2');
var k1Buttons = document.querySelectorAll('.k1');
var submitButton = document.querySelector('.submit');
for (var i = 0; i < k2Buttons.length; i++) {
k2Buttons[i].addEventListener('click', function(event) {
move(event);
});
}
for (var i = 0; i < k1Buttons.length; i++) {
k1Buttons[i].addEventListener('click', function(event) {
devarec(event);
});
}
submitButton.addEventListener('click', function() {
check();
});
</script>
</body>
</html>
可能使用盒子好一点