week11.md - mozi5269/wp109b GitHub Wiki

期末作業講解＋應用展示

使用老師gitlab程式碼

  • 期末作業講解

要附上參考來源或標記自己原創
美化會加分，難易度也會影響分數
還要寫一份報告

應用展示

到至頂公告的課程資源gitlab中clone範例到vs code，從dom-calculator開始，這很重要不然無法練習。

應用範例解析

calculator2

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
input { width:300px }      
    </style>
  </head>
  <body>
<script>
  function calculate() {
    var exp = document.getElementById('exp')
    var result = document.getElementById('result')
    result.innerText = eval(exp.value)
  }
</script>    
    <input id="exp" type="text" value="3*5+8"/>
     = <label id="result"></label><br/><br/>
    <button onclick="calculate()">計算</button>
  </body>
</html>

時鐘

<!DOCTYPE html>
<html>
<head>
<script>
function showTime() {
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();
    document.getElementById('time').innerHTML = h+":"+m+":"+s;
    setTimeout(showTime,1000);
}
</script>
</head>

<body onload="showTime()">

<div id="time"></div>

</body>
</html>

menu

<html>
<head>
<meta charset="UTF-8"/>
<title>範例 -- 功能表實作</title>
<style>
.menu   { background-color:black; color:white; padding:10px; 
          vertical-align:top; width:100px; list-style-type:none; }
.menu a { color:white; text-decoration:none; }
</style>
<script type="text/javascript">
function show(id) {
  document.getElementById(id).style.visibility='visible';
}
 
function hide(id) {
  document.getElementById(id).style.visibility='hidden';
}
</script>    
  </head>
  <body onload="hide('popup1');hide('popup2');">
      <ul onmouseover="show('popup1');"  onmouseout="hide('popup1')" 
          style="position:absolute; left:100px; top:20px">
        <li id="menu1" class="menu">menu1</li>
        <ul id="popup1" class="menu">
          <li><a onclick="alert('1.1');">menu 1.1</a></li>
          <li><a onclick="alert('1.2');">menu 1.2</a></li>
        </ul> 
      </ul>
      <ul onmouseover="show('popup2');" onmouseout="hide('popup2')" 
          style="position:absolute; left:220px; top:20px">
        <li id="menu2" class="menu">menu2</li>
        <ul id="popup2" class="menu">
          <li><a onclick="alert('2.1');">menu 2.1</a></li>
          <li><a onclick="alert('2.2');">menu 2.2</a></li>
          <li><a onclick="alert('2.3');">menu 2.3</a></li>
        </ul>
      </ul>
  </body>
</html>

show & hide
翻譯
計數器
手寫板 phaser官網

⚠️ **GitHub.com Fallback** ⚠️