响应事件的示例

Posted 2020-08-15 Jener_Yan

示例 1 onmousedown， onmouseup

1. <script>
2. function textcolor(cursor, i){
3. if(i ==0)
4. cursor.style.color ="#0000FF";
5. else
6. cursor.style.color ="#E7D745";
7. }
9. </script>
11. <h2 onmouseup="textcolor(this,1)"
12. onmousedown="textcolor(this,0)">
13. 按下、松开颜色改变的文本
14. </h2>

 

 

示例 2 onmouseover，onmouseout

1. <script>
2. function changeImage(img, i){
3. if(i ==0)
4. img.src ="images/temp0.jpg";
5. else
6. img.src ="images/temp1.jpg";
7. }
9. </script>
11. <img src="images/temp0.jpg" border="0" width="200" height="220"
12. onmouseOver="changeImage(this,1)"
13. onmouseOut="changeImage(this,0)">

 

示例3  计数器（countdown）

1. <div id="container">
2. <div id="inputArea">
3. </div>
5. <h1 id="time">0:00</h1>
7. </div>
8. <script>
9. // two global variables
10. var secondsRemaining;
11. var intervalHandle;
13. function resetPage(){
14. document.getElementById("inputArea").style.display ="block";
15. }
17. function tick(){
18. // grab the h1
19. var timeDisplay = document.getElementById("time");
21. // turn seconds into mm:ss
22. var min =Math.floor(secondsRemaining /60);// floor功能: 返回比参数小的最大整数
23. var sec = secondsRemaining -(min *60);
25. // add a leading zero (as a string value) if seconds less than 10
26. if(sec <10){
27. sec ="0"+ sec;
28. }
29. // concatenate with colon
30. var message = min +":"+ sec;
31. // now change the display
32. timeDisplay.innerhtml = message;
34. // stop if down to zero
35. if(secondsRemaining ===0){
36. alert("Done!");
37. clearInterval(intervalHandle);
38. resetPage();
39. }
40. // subtract from seconds remaining
41. secondsRemaining--;
42. }
44. function startCountdown(){
45. // get contents of the "minutes" text box
46. var minutes = document.getElementById("minutes").value;
47. // check if not a number
48. if(isNaN(minutes)){
49. alert("Please enter a number!");
50. return;
51. }
52. // how many seconds?
53. secondsRemaining = minutes *60;
54. // every second, call the "tick" function
55. intervalHandle = setInterval(tick,1000);
56. // hide the form
57. document.getElementById("inputArea").style.display ="none";
58. }
60. // as soon as the page is loaded...
61. window.onload =function(){
62. // create input text box and give it an id of "minutes"
63. var inputMinutes = document.createElement("input");
64. inputMinutes.setAttribute("id","minutes");
65. inputMinutes.setAttribute("type","text");
66. // create a button
67. var startButton = document.createElement("input");
68. startButton.setAttribute("type","button");
69. startButton.setAttribute("value","Start Countdown");
70. startButton.onclick =function(){
71. startCountdown();
72. };
73. // add to the DOM, to the div called "inputArea"
74. document.getElementById("inputArea").appendChild(inputMinutes);
75. document.getElementById("inputArea").appendChild(startButton);
76. };
77. </script>

 

 

来自为知笔记(Wiz)