HTML5智力測試源代碼
<!DOCTYPE html>
<html>
<head>
<title>HTML5智力測試</title>
<meta charset="UTF-8">
</head>
<body>
<h1>HTML5智力測試</h1>
<p>請選擇你熟悉的一種編程語言：</p>
<form onsubmit="return false">
<input type="radio" name="language" value="html"> HTML<br>
<input type="radio" name="language" value="css"> CSS<br>
<input type="radio" name="language" value="javascript"> JavaScript<br>
<input type="radio" name="language" value="python"> Python<br>
<input type="radio" name="language" value="java"> Java<br>
<input type="radio" name="language" value="c"> C/C++<br>
<input type="radio" name="language" value="php"> PHP<br>
<input type="submit" onclick="getResult()" value="提交">
</form>
<p id="result"></p>
<script>
function getResult() {
var radios = document.getElementsByName("language");
var result = "你選擇了：";
for (var i=0; i<radios.length; i++) {
if (radios[i].checked) {
result += radios[i].value;
break;
}
}
document.getElementById("result").innerHTML = result;
}
</script>
</body>
</html>解析：
本頁面是一個HTML5的智力測試頁面，主要包括一個單選框選擇器和一個提交按鈕。當用戶提交答案后，頁面會顯示出用戶所選擇的編程語言。 首先，定義一個form表單，當用戶單擊提交按鈕時，觸發onsubmit事件，調用getResult()函數。getResult()函數通過getElementsByName()方法獲取單選框的值，最終顯示出用戶所選擇的答案。
上一篇html5是常用代碼
下一篇html5智能表單 代碼