github找的项目模仿着做的
HTML代码
<body>
<div class="setting">
<form action="">
<label for="">Difficulty</label>
<select name="" class="difficulty">
<option value="easy">easy</option>
<option value="medium">medium</option>
<option value="hard">hard</option>
</select>
</form>
</div>
<button class="setting-btn"><i class="iconfont icon-shezhi"></i></button>
<div class="container">
<h2 class="head">👩?💻 Speed Typer 👩?💻</h2>
<p class="timer-container">Time left: <span class="time">0s</span></p>
<p class="score-container">Score: <span class="score">0</span></p>
<!-- <p>Type the following</p> -->
<small>Type the following</small>
<h1 class="word">drag</h1>
<input type="text" placeholder="Type the word here... " class="text">
<div class="end-container">
</div>
</div>
<script src="script.js"></script>
</body>
CSS代码
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@font-face {
font-family: "iconfont";
src: url('iconfont.woff2?t=1649571652476') format('woff2'), url('iconfont.woff?t=1649571652476') format('woff'), url('iconfont.ttf?t=1649571652476') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 24px!important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: #2c3e50;
min-height: 100vh;
}
.setting {
position: absolute;
display: flex;
left: 0;
top: 0;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.3);
height: 70px;
width: 100%;
transition: all .3s linear;
}
.hide {
transform: translateY(-100%);
}
.setting label {
color: #fff;
}
.difficulty {
width: 200px;
padding: 5px;
background-color: #a7c5e3;
-webkit-appearance: none;
outline: none;
}
button {
cursor: pointer;
border-radius: 4px;
padding: 5px 15px;
}
.setting-btn {
position: absolute;
bottom: 30px;
left: 30px;
}
.container {
background-color: #34495e;
padding: 20px;
border-radius: 4px;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
color: #fff;
position: relative;
text-align: center;
width: 500px;
}
.head {
background-color: rgba(0, 0, 0, 0.3);
border-radius: 4px;
padding: 8px;
margin-bottom: 40px;
}
p {
margin: 16px 0;
}
.timer-container {
position: absolute;
top: 60px;
left: 20px;
}
.score-container {
position: absolute;
top: 60px;
right: 20px;
}
.text {
width: 300px;
font-size: 14px;
border-radius: 4px;
padding: 12px 20px;
margin-top: 10px;
}
.word {
display: block;
}
.end-container {
background-color: inherit;
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
JavaScript代码
var settingbtn = document.querySelector('.setting-btn');
var setting = document.querySelector('.setting');
var word = document.querySelector('.word');
var score = document.querySelector('.score');
var time = document.querySelector('.time');
var endgame = document.querySelector('.end-container');
var text = document.querySelector('.text');
var difficultySelect = document.querySelector('.difficulty');
var score_now = 0;
var words = [
'sigh',
'tense',
'airplane',
'ball',
'pies',
'juice',
'warlike',
'bad',
'north',
'dependent',
'steer',
'silver',
'highfalutin',
'superficial',
'quince',
'eight',
'feeble',
'admit',
'drag',
'loving'
];
var randomWord;
var time_now = 10;
var timer = setInterval(changeTime, 1000);
var difficulty = difficultySelect.value;
difficultySelect.addEventListener('change', function() {
difficulty = difficultySelect.value;
})
function addWord() {
randomWord = words[Math.floor(Math.random() * words.length)];
word.innerHTML = randomWord;
}
function changeScore() {
score_now++;
score.innerHTML = score_now;
}
function changeTime() {
time_now--;
time.innerHTML = time_now + 's';
if (time_now === 0) {
clearInterval(timer);
gameOver();
}
}
addWord();
function gameOver() {
endgame.innerHTML = `
<h1>Time ran out</h1>
<p>Your final score is ${score_now}</p>
<button οnclick="location.reload()">Reload</button>
`;
endgame.style.display = 'flex';
}
settingbtn.addEventListener('click', () => setting.classList.toggle('hide'));
text.addEventListener('input', function() {
var insertText = text.value;
if (insertText === randomWord) {
addWord();
changeScore();
if (difficulty === 'easy') {
time_now += 5;
} else if (difficulty === 'medium') {
time_now += 3;
} else if (difficulty === 'hard') {
time_now += 2;
}
text.value = '';
changeTime();
}
})
