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();}})
