响应事件的示例

示例 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. }
  8. </script>
  9. <h2 onmouseup="textcolor(this,1)"
  10. onmousedown="textcolor(this,0)">
  11. 按下、松开颜色改变的文本
  12. </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. }
  8. </script>
  9. <img src="images/temp0.jpg" border="0" width="200" height="220"
  10. onmouseOver="changeImage(this,1)"
  11. onmouseOut="changeImage(this,0)">

示例3  计数器(countdown)

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

来自为知笔记(Wiz)

时间: 2024-10-27 12:42:51

响应事件的示例的相关文章

事件和弱事件的示例解说

1 using System; 2 using System.Windows; // 实现弱事件需要引用 WindowsBase 程序集 3 4 namespace 事件和弱事件的示例解说 5 { 6 class Program 7 { 8 static void Main(string[] args) 9 { 10 var dealer = new CarDealer(); // 这个类包含一个事件处理器,以及对其的调用方法 11 12 var michael = new Consumer("

输入坐标和输出坐标——图片框上动态加载按钮及响应事件

在实际的项目中总会遇到一些需要动态加载一些控件,并且加载控件的响应事件的代码.现在写一个简单的例子,主要说一下里面的一些关键点:使用鼠标在窗体上的图片框中动态的添加按钮 .动态的去加载事件,肯定是需要使用对象类动态的生成,动态事件,必须要使用委托去实现.还有一个就是"动态"的实现过程,打算鼠标点下去,在鼠标单击的位置添加上按钮. 环境:Visual Studio 2010, .Net FrameWork 3.5 private void pictureBox1_MouseDown(ob

事件的示例解说

1 using System; 2 3 namespace ConsoleApplication7 4 { 5 class Program 6 { 7 static void Main(string[] args) 8 { 9 var dealer = new CarDealer(); // 这个类包含一个事件处理器,以及对其的调用方法 10 11 var michael = new Consumer("迈克尔"); // 这个类包含人名,以及一个响应事件的方法,事件参数类型是 Car

ExtJS学习笔记2:响应事件、使用AJAX加载数据

响应事件: 1.设置一个html标记 <div id="my-div">Ext JS 4 Cookbook</div> 2.使用get函数获取此标记对象 var el = Ext.get('my-div'); 3.将响应函数和对象的事件绑定 el.on('click', function(e, target, options){ alert('The Element was clicked!'); alert(this.id); }, this); 4.一次也可

关于UITableView选中效果以及自定义cell上的控件响应事件

tableView默认的点击效果是:点击cell:A,出现点击效果,点另一个cell:B的时候,A的点击效果才会消失. 1.对于tableView,比较常用的效果,是点击表格行,出现效果,点击完毕,效果消失 那么就要在代码里做一些设置.代码如下: -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { [tableView deselectRowAtIndexPath

iOS:利用代码UIBarButtonItem如何响应事件?

在storyboard中,可以通过拖拽的方法响应事件. 如果是纯代码构建的UI,UIBarButtonItem 无法调用 addTarget: action: forControlEvents: 这个方法. 如下图所示,用代码创建的left按钮: 我想让导航栏中的『left』响应事件. 网上搜了一大堆方法,都好繁琐. 刚才奇思妙想试了一下,没想到居然可以╰( ̄▽ ̄)╮ 只写了两行代码: 1 left.target = self; 2 left.action = @selector(myMetho

mfc 鼠标、键盘响应事件

一.基本目标 1.有一个基本的MFC程序,点击“关闭”则“关闭”这个程序,这点没什么好讲的,把自带的“取消”按钮,右键->属性的Caption改成“关闭”二字就可以了 2.鼠标在对话框中移动,则显示其位置信息,这个坐标是窗口内部坐标 3.如果按着鼠标右键移动鼠标,则在这个工程的标题栏会显示“按着鼠标右键移动鼠标”,松开鼠标右键回复如初 4.如果按着键盘上的Ctrl键或者Shift键在对话框的窗口中移动鼠标,标题栏同样会有相应的提示,是否同时按下也会有提示 5.左击对话框,会弹出对话框,显示鼠标位

android通知栏Notification点击,取消,清除响应事件

主要是检测android通知栏的三种状态的响应事件 这次在实现推送需求的时候,要用到android通知栏Notification点击后进入消息页面,因为要实现一个保存推送用户名字的功能,我在点击后处理了这个功能,但是测试发现我点击删除或者滑动清除后这个功能并没有执行,所以才意识到要处理删除和滑动清除的事件: 首先实现一个BroadcastReceiver public class NotificationBroadcastReceiver extends BroadcastReceiver {

3D Slicer Modify Mouse Event 修改3D Slicer中的鼠标响应事件

在3D Slicer中,我们如果想在自己写的插件中来修改默认的鼠标响应事件的话,就需要先将原有的响应事件链接删除,然后建立自定义的响应事件链接,然后将自己要实现的功能写在响应事件函数中. 比如Slicer中默认的鼠标左键拖拽,是任意旋转视图中的Camera,默认中的滑轮操作是拉远和拉近视图摄像机,默认的鼠标右键操作也是拉远和拉近视图摄像机的操作.这样滑轮就和鼠标右键的功能重复了,我们可以让鼠标右键实现其他的功能.比如在模型的Pitch, Yaw, Roll三个旋转方向上(其实旋转的只是试图中的摄