2015年7月20日 星期一

Web前端程式設計：上課練習(3)_額外功能

身體質量指數運算 (bmi)

  • slider bar (滑動條)
  • rollover
*******************************************************************
實作：滑動條


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>
<head>
<Meta Charset="utf-8">
<title>BMI</title>

<script>
function calc_bmi()
{
  var h = parseFloat( document.getElementById('height').value );
  var w = parseFloat( document.getElementById('weight').value );

  var bmi = w / ( (h/100)*(h/100) );

  // 取兩位小數  
  bmi = Math.floor(bmi*100) / 100;  // 方法一
  bmi = bmi.toFixed(2); // 方法二

  console.log('bmi=' + bmi);

  document.getElementById('message').innerHTML = bmi;//在按鈕下方直接顯示計算結果
  // location.href=page;
}

function update_height()
{
  document.getElementById('height').value = document.getElementById('height_slider').value;
 }

function update_weight()
{
  document.getElementById('weight').value = document.getElementById('weight_slider').value;
}
</script>

</head>

<body>
<h1>BMI 身體質量指數</h1>
<form id="form1" name="form1" method="post" action="">
  <p>身高：
   <!--加入滑動條，並設定最小/最大數值，value為預設位置，step每次移動刻度-->
    <input type="range" id="height_slider" min="100" max="200" value="150" step="1" oninput="update_height();">
    <input name="height" type="text" id="height" size="4" /> 公分
  </p>
  <p>體重：
    <input type="range" id="weight_slider" min="20" max="120" value="60" step="1" oninput="update_weight();">
    <input name="weight" type="text" id="weight" size="4" /> 公斤
  </p>
  <p>
    <input type="button" name="button" id="button" value="計算BMI" onclick=" calc_bmi(); " />
  </p>
</form>
<span id="message"></span>
<p>&nbsp;</p>
</body>
</html>
*******************************************************************
實作：rollover



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<head>
<Meta Charset="utf-8">
<title>BMI</title>
<script>
function show_xy()
{
  var obj = document.getElementById('board');
  
  // 取得滑鼠的座標位置
  var x = event.clientX - obj.offsetLeft;
  var y = event.clientY - obj.offsetTop;
  
  
  // 定義身高體重的範圍
  var hmin = 100;
  var hmax = 200;
  var wmin = 30;
  var wmax = 120;
  
  // 定義座標XY的範圍，對應img id="person"的大小
  var xmin = 0;
  var xmax = 286;
  var ymin = 0;
  var ymax = 286;

   // 對應的公式推導
   //  wmin.....w.....wmax (體重最小<--體重-->體重最大)
   //  xmin.....x.....xmax (X座標最小<--X-->X座標最大)
   // (w-wmin)/(wmax-wmin) = (x-xmin)/(xmax-xmin)
   //  w = wmin + (wmax-wmin) * ((x-xmin)/(xmax-xmin))

  var h = hmin + (hmax-hmin) * ((y-ymax)/(ymin-ymax));
  var w = wmin + (wmax-wmin) * ((x-xmin)/(xmax-xmin));
  
  var bmi = w / ((h/100)*(h/100));
    bmi = bmi.toFixed(2);

  document.getElementById('height').value = h.toFixed(0);//欄位內對應顯示的身高值
  document.getElementById('weight').value = w.toFixed(0);
  
  document.getElementById('message').innerHTML = bmi; //即時計算
  
  document.getElementById('person').height = h;//將img id="person"的height替換成計算出來的高度
  document.getElementById('person').width = w;
}
</script>
</head>

<body>
<h1>BMI 身體質量指數</h1>
<form id="form1" name="form1" method="post" action="">
  <p>身高：
    <input name="height" type="text" id="height" size="4" />公分</p>
  <p>體重：
    <input name="weight" type="text" id="weight" size="4" />公斤</p>
  <p>
    BMI = <span id="message">?</span>
  </p>
</form>
<p>
<img id="board" src="images/board.jpg" width="286" height="286" onmousemove="show_xy();" />
<img id="person" src="images/person.png" width="256" height="256" /></p>
</body>
</html>

slider
rollover
張貼者： 於
標籤： , , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)