2015年7月16日 星期四

Web前端程式設計：上課練習(1)

Javascript初步、圖片顯示切換程式

Javascript 初步 (javascript)
  • 按下按鈕，改變背景顏色
  • 按下按鈕，改變標題文字
  • 按下按鈕，彈出一個訊息視窗
  • 按下按鈕，開啟新網頁 (Google)
  • 按下按鈕，改變畫面上的一段文字
  • 按下按鈕，改變圖檔的內容 (檔名、寬、高)
  • 滑鼠移過，改變圖檔 (滑鼠移出後，還原)


 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
<!DOCTYPE html>
<html>
<head>
<Meta Charset="utf-8">
<title> 測試 </title>

</head>
<body>

<h1>JavaScript 練習</h1>
<p>更換背景顏色</p>
<input type="button" value="紅色" onclick="document.bgColor='red';">
<br/><!--換行-->
<input type="button" value="黃色" onclick="document.bgColor='#FFFF00';">
<input type="button" value="綠色" onclick="document.bgColor='#00FF00';">
<input type="button" value="藍色" onmouseover="document.bgColor='#0000FF';">
<input type="button" value="白色" onmouseover="document.bgColor='#FFFFFF';">

<p>更換標題文字</p><!-- 網頁名稱上的標題更換-->
<input type="button" value="更換標題" onclick="document.title='你好';">

<p>彈出一個視窗</p>
<input type="button" value="彈出視窗" onclick="window.alert('Hello World');">

<p>開啟新網頁</p>
<input type="button" value="開新網頁" onclick="window.open('http://google.com.tw');">

<hr/><!--水平線<hr></hr>-->
<!--改變畫面上的一段文字-->
<p>羊死掉了(猜一個成語)</p>
<p>答案：<span id="msg">XXXX</span></p>
<!--div是一個大區塊更換，span可以小範圍更換，將XXX換成正確答案-->
<input type="button" value="看答案" onclick="document.getElementById('msg').innerHTML='揚眉吐氣';">

<hr/>
<!--插入圖片，滑鼠滑過更換圖片，滑鼠滑開還原-->
<img src="images/01.jpg" onmouseover="this.src='images/02.jpg';" onmouseout="this.src='images/01.jpg';">

<hr/><!--插入圖片，滑鼠滑過更換圖片並縮小圖片，滑鼠滑開還原-->
<img src="images/01.jpg" onmouseover="this.src='images/02.jpg'; this.width=300;hight=150;" onmouseout="this.src='images/01.jpg';this.width=500;hight=300;">

</body>
</html>

張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)