首页 > 代码库 > 响应事件的示例

响应事件的示例

2024-08-17 08:57:06   218人阅读

示例 1 onm ousedown， onm ouseup

  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 onm ouseup="textcolor(this,1)"
  12. onm ousedown="textcolor(this,0)">
  13. 按下、松开颜色改变的文本
  14. </h2>
 
 
示例 2 onm ouseover，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. onm ouseOver="changeImage(this,1)"
  13. onm ouseOut="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)



响应事件的示例


联系
我们