1. 程式人生 > >數字求和程式碼

數字求和程式碼

數字求和程式碼

<!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>

整體思路

  1. 定義基礎介面
  2. 建立 初始化select中的option元素
  3. 定義sel1的change觸發事件
  4. 建立一個求和函式