<!DOCTYPE html>
< html> < head> < metacharset = " UTF-8" > < title> </ title> < style> body { font-family : Arial, sans-serif; background-color : #f5f5f5; } form { max-width : 500px; margin : 50px auto; padding : 40px; background-color : #fff; box-shadow : 0 2px 4px rgba ( 0,0,0,0.2) ; border-radius : 6px; } h1 { font-size : 36px; text-align : center; margin-top : 0; color : #2c3e50; text-shadow : 1px 1px 0 #fff; } label { display : block; margin-bottom : 10px; color : #2c3e50; text-shadow : 1px 1px 0 #fff; font-size : 18px; } input { padding : 10px; width : 100%; border : 1px solid #ccc; border-radius : 4px; margin-bottom : 20px; box-sizing : border-box; font-size : 16px; color : #2c3e50; } input:focus { outline : none; border-color : #51a6ff; } input[type="checkbox"] { width : auto; margin-top : 10px; margin-right : 5px; } button[type="submit"] { padding : 12px 24px; background-color : #51a6ff; color : #fff; border : none; border-radius : 4px; cursor : pointer; transition : all 0.3s ease; font-size : 20px; } button[type="submit"]:hover { background-color : #0072c6; } .error { color : #ff4d4d; font-size : 14px; margin-top : 5px; } </ style> </ head> < body> < form> < h1> </ h1> < label> </ label> < inputtype = " text" name = " username" required > < label> </ label> < inputtype = " password" name = " password" required > < label> </ label> < inputtype = " password" name = " confirm_password" required > < center> < label> < inputtype = " checkbox" name = " agree" required > < ahref = " #" > </ a> </ label> </ center> < p style =" text-align : right; " > < buttontype = " submit" > </ button> </ p> </ form> </ body> </ html> <!DOCTYPE html>
< html> < head> < metacharset = " UTF-8" > < title> </ title> < style> body { font-family : Arial, sans-serif; background-color : #f0f0f0; } .container { max-width : 800px; margin : 0 auto; padding : 20px; background-color : #fff; box-shadow : 0 2px 4px rgba ( 0, 0, 0, 0.3) ; } h1 { text-align : center; color : #333; } .word { font-size : 36px; color : #333; text-align : center; margin : 40px 0; } .definition { font-size : 24px; color : #666; text-align : center; margin-bottom : 40px; } .button { display : block; margin : 0 auto; padding : 10px 30px; border-radius : 5px; background-color : #333; color : #fff; font-size : 18px; text-align : center; cursor : pointer; } .button:hover { background-color : #555; } </ style> </ head> < body> < divclass = " container" > < h1> </ h1> < divclass = " word" > </ div> < divclass = " definition" > </ div> < buttonclass = " button" onclick = " showNext()" > </ button> </ div> < script> var words = [ { word: 'apple' , definition: 'n. 蘋果' } , { word: 'banana' , definition: 'n. 香蕉' } , { word: 'orange' , definition: 'n. 橘子' } , { word: 'grape' , definition: 'n. 葡萄' } , { word: 'watermelon' , definition: 'n. 西瓜' } ] ; var currentWordIndex = 0 ; function showNext ( ) { currentWordIndex++ ; if ( currentWordIndex >= words. length) { currentWordIndex = 0 ; } document. querySelector ( '.word' ) . textContent = words[ currentWordIndex] . word; document. querySelector ( '.definition' ) . textContent = words[ currentWordIndex] . definition; } </ script> </ body> </ html> < ! DOCTYPE html>
< html> < head> < meta charset= "UTF-8" > < title> 填詞游戲< / title> < style> body { font- family: Arial, sans- serif; background- color: #f0f0f0; } . container { max- width: 800 px; margin: 0 auto ; padding: 20 px; background- color: #fff; box- shadow: 0 2 px 4 px rgba ( 0 , 0 , 0 , 0.3 ) ; } h1 { text- align: center; color: #333 ; } . word { font- size: 36 px; color: #333 ; text- align: center; margin: 40 px 0 ; } . letter { display: inline - block; width: 30 px; height: 30 px; margin: 0 20 px; font- size: 36 px; line- height: 50 px; text- align: center; border- radius: 5 px; background- color: #fff; border: 2 px solid #666 ; outline: none; cursor: text; } . letter: focus { border- color: #333 ; } . button { display: block; margin: 0 auto ; padding: 10 px 30 px; border- radius: 5 px; background- color: #333 ; color: #fff; font- size: 18 px; text- align: center; cursor: pointer; } . button: hover { background- color: #555 ; } < / style> < / head> < body> < div class = "container" > < h1> 填寫出正確的字母。< / h1> < div class = "word" > app< input type= "text" class = "letter" maxlength= "1" autofocus> < input type= "text" class = "letter" maxlength= "1" > < / div> < button class = "button" onclick= "checkAnswer()" > 提交< / button> < / div> < script> var correctAnswer = 'le' ; function checkAnswer ( ) { var inputLetters = document. querySelectorAll ( '.letter' ) ; var playerAnswer = '' ; for ( var i = 0 ; i < inputLetters. length; i++ ) { playerAnswer + = inputLetters[ i] . value; } if ( playerAnswer == = correctAnswer) { alert ( '答對了！' ) ; } else { alert ( '答錯了，請再試一次。' ) ; } } < / script> < / body>
< / html>
<!DOCTYPE html>
< html> < head> < metacharset = " UTF-8" > < title> </ title> < style> body { font-family : Arial, sans-serif; background-color : #f0f0f0; } .container { max-width : 800px; margin : 0 auto; padding : 20px; background-color : #fff; box-shadow : 0 2px 4px rgba ( 0, 0, 0, 0.3) ; } h1 { text-align : center; color : #333; } .word { font-size : 36px; color : #333; text-align : center; margin : 40px 0; } .options { margin : 40px 0; } .option { display : block; margin : 10px 0; padding : 10px 30px; border-radius : 5px; background-color : #fff; box-shadow : 0 2px 4px rgba ( 0, 0, 0, 0.3) ; color : #333; font-size : 24px; text-align : center; cursor : pointer; } .option:hover { background-color : #f0f0f0; } .button { display : block; margin : 0 auto; padding : 10px 30px; border-radius : 5px; background-color : #333; color : #fff; font-size : 18px; text-align : center; cursor : pointer; } .button:hover { background-color : #555; } </ style> </ head> < body> < divclass = " container" > < h1> </ h1> < divclass = " word" > </ div> < divclass = " options" > < divclass = " option" data-answer = " 1" > </ div> < divclass = " option" data-answer = " 0" > </ div> < divclass = " option" data-answer = " 0" > </ div> < divclass = " option" data-answer = " 0" > </ div> </ div> < buttonclass = " button" onclick = " checkAnswer()" > </ button> </ div> < script> var correctAnswer = 1 ; function checkAnswer ( ) { var options = document. querySelectorAll ( '.option' ) ; var playerAnswer = - 1 ; for ( var i = 0 ; i < options. length; i++ ) { if ( options[ i] . classList. contains ( 'selected' ) ) { playerAnswer = parseInt ( options[ i] . getAttribute ( 'data-answer' ) ) ; } options[ i] . classList. remove ( 'selected' ) ; } if ( playerAnswer === correctAnswer) { alert ( '答對了！' ) ; } else { alert ( '答錯了，請再試一次。' ) ; } } var options = document. querySelectorAll ( '.option' ) ; for ( var i = 0 ; i < options. length; i++ ) { options[ i] . addEventListener ( 'click' , function ( ) { for ( var j = 0 ; j < options. length; j++ ) { options[ j] . classList. remove ( 'selected' ) ; } this . classList. add ( 'selected' ) ; } ) ; } </ script> </ body> </ html> <!DOCTYPE html>
< html> < head> < metacharset = " UTF-8" > < title> </ title> < style> body { font-family : Arial, sans-serif; background-color : #f0f0f0; } .container { max-width : 800px; margin : 0 auto; padding : 20px; background-color : #fff; box-shadow : 0 2px 4px rgba ( 0, 0, 0, 0.3) ; } h1 { text-align : center; color : #333; } .word { font-size : 36px; color : #333; text-align : center; margin : 40px 0; } .options { margin : 40px 0; } .option { display : block; margin : 10px 0; padding : 10px 30px; border-radius : 5px; background-color : #fff; box-shadow : 0 2px 4px rgba ( 0, 0, 0, 0.3) ; color : #333; font-size : 24px; text-align : center; cursor : pointer; } .option:hover { background-color : #f0f0f0; } .button { display : block; margin : 0 auto; padding : 10px 30px; border-radius : 5px; background-color : #333; color : #fff; font-size : 18px; text-align : center; cursor : pointer; } .button:hover { background-color : #555; } </ style> </ head> < body> < divclass = " container" > < h1> </ h1> < divclass = " word" > </ div> < divclass = " options" > < divclass = " option" data-answer = " 0" > </ div> < divclass = " option" data-answer = " 0" > </ div> < divclass = " option" data-answer = " 1" > </ div> < divclass = " option" data-answer = " 0" > </ div> </ div> < buttonclass = " button" onclick = " checkAnswer()" > </ button> </ div> < script> var correctAnswer = 1 ; function checkAnswer ( ) { var options = document. querySelectorAll ( '.option' ) ; var playerAnswer = - 1 ; for ( var i = 0 ; i < options. length; i++ ) { if ( options[ i] . classList. contains ( 'selected' ) ) { playerAnswer = parseInt ( options[ i] . getAttribute ( 'data-answer' ) ) ; } options[ i] . classList. remove ( 'selected' ) ; } if ( playerAnswer === correctAnswer) { alert ( '答對了！' ) ; } else { alert ( '答錯了，請再試一次。' ) ; } } var options = document. querySelectorAll ( '.option' ) ; for ( var i = 0 ; i < options. length; i++ ) { options[ i] . addEventListener ( 'click' , function ( ) { for ( var j = 0 ; j < options. length; j++ ) { options[ j] . classList. remove ( 'selected' ) ; } this . classList. add ( 'selected' ) ; } ) ; } </ script> </ body> </ html> 
