數字求和程式碼
阿新 • • 發佈:2018-11-06
數字求和程式碼
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body onload="init();">
<select id="sel1" onchange="getResult();">
<option value="1">1</option>
</select>
<h1>1-<span id="x1">xx</span>:<span id="x2">xxx</span></h1>
</body>
<script type="text/javascript">
// 頁面初始化函式
function init() {
// 初始化select中的option元素1-200
// 定義一個變數存放1-200的option HTML 字串
var options = "";
// 迴圈200次,拼接字串到options變數中
for (var i = 1; i <= 200; i++) {
options = options + ('<option value="' +i+'">'+i+'</option>');
}
// 把拼接完成的字串放到ID為sel1的select元素中
document.getElementById("sel1").innerHTML = options;
}
// 定義sel1的change觸發事件
function getResult() {
// 取出需要計算結果的數值
var sSelValue = document.getElementById("sel1").value;
// 把字串型別的變數轉成整數型別的變數
var iSelValue = parseInt(sSelValue) ;
// 呼叫計算和的函式得到結果
var result = sum(iSelValue);
// 將條件值和結果值在頁面輸出
document.getElementById("x1").innerHTML = iSelValue;
document.getElementById("x2").innerHTML = result;
}
// 定義工具函式:求和函式 引數列表:number(求和的數值)
function sum(number) {
var total = 0;
for (var i = 1; i <= number; i++) {
total += i;
}
return total;
}
</script>
</html>
整體思路
- 定義基礎介面
- 建立 初始化select中的option元素
- 定義sel1的change觸發事件
- 建立一個求和函式