Example of a response event

Example 1 onmousedown, onmouseup

2. <script>
4. function textcolor(cursor, i){
6. if(i ==0)
8. cursor.style.color ="#0000FF";
10. else
12. cursor.style.color ="#E7D745";
14. }
18. </script>
22. <h2 onmouseup="textcolor(this,1)"
24. onmousedown="textcolor(this,0)">
26. 按下、松开颜色改变的文本
28. </h2>

Example 2 onmouseover,onmouseout

2. <script>
4. function changeImage(img, i){
6. if(i ==0)
8. img.src ="images/temp0.jpg";
10. else
12. img.src ="images/temp1.jpg";
14. }
18. </script>
22. <img src="images/temp0.jpg" border="0" width="200" height="220"
24. onmouseOver="changeImage(this,1)"
26. onmouseOut="changeImage(this,0)">

Example 3 counter (countdown)

2. <div id="container">
4. <div id="inputArea">
6. </div>
10. <h1 id="time">0:00</h1>
14. </div>
16. <script>
18. // two global variables
20. var secondsRemaining;
22. var intervalHandle;
26. function resetPage(){
28. document.getElementById("inputArea").style.display ="block";
30. }
34. function tick(){
36. // grab the h1
38. var timeDisplay = document.getElementById("time");
42. // turn seconds into mm:ss
44. var min =Math.floor(secondsRemaining /60);// floor功能: 返回比参数小的最大整数
46. var sec = secondsRemaining -(min *60);
50. // add a leading zero (as a string value) if seconds less than 10
52. if(sec <10){
54. sec ="0"+ sec;
56. }
58. // concatenate with colon
60. var message = min +":"+ sec;
62. // now change the display
64. timeDisplay.innerHTML = message;
68. // stop if down to zero
70. if(secondsRemaining ===0){
72. alert("Done!");
74. clearInterval(intervalHandle);
76. resetPage();
78. }
80. // subtract from seconds remaining
82. secondsRemaining--;
84. }
88. function startCountdown(){
90. // get contents of the "minutes" text box
92. var minutes = document.getElementById("minutes").value;
94. // check if not a number
96. if(isNaN(minutes)){
98. alert("Please enter a number!");
100. return;
102. }
104. // how many seconds?
106. secondsRemaining = minutes *60;
108. // every second, call the "tick" function
110. intervalHandle = setInterval(tick,1000);
112. // hide the form
114. document.getElementById("inputArea").style.display ="none";
116. }
120. // as soon as the page is loaded...
122. window.onload =function(){
124. // create input text box and give it an id of "minutes"
126. var inputMinutes = document.createElement("input");
128. inputMinutes.setAttribute("id","minutes");
130. inputMinutes.setAttribute("type","text");
132. // create a button
134. var startButton = document.createElement("input");
136. startButton.setAttribute("type","button");
138. startButton.setAttribute("value","Start Countdown");
140. startButton.onclick =function(){
142. startCountdown();
144. };
146. // add to the DOM, to the div called "inputArea"
148. document.getElementById("inputArea").appendChild(inputMinutes);
150. document.getElementById("inputArea").appendChild(startButton);
152. };
154. </script>

From for notes (Wiz)

Example of a response event