JavaScript奇淫技巧:按键精灵 | 您所在的位置:网站首页 › 按键精灵实例设置 › JavaScript奇淫技巧:按键精灵 |
JavaScript奇淫技巧:按键精灵 按键精灵之类的自动化工具,可以解放双手,帮我们自动完成许多工作,在很多场景中,可以极大提升生产力。 本文将展示:用JavaScript实现一个“按键精灵”,演示自动完成点击、聚焦、输入等操作。 实现效果如上图动画,在页面中,自动执行了如下操作: 1、间隔一秒依次点击两个按钮; 2、给输入框设置焦点; 3、在输入框输入文字; 4、点击打开链接; 功能原理原理并不复杂,获取元素,并执行点击、设焦点等事件。 难点有两处: 1、没有ID、Name的元素,不能使用getElementById、getElementByName,如何对其定位; 解决方法是:使用querySelectorAll获取页面所有元素,然后用匹配源码的方式,精确定位元素。代码如下: 2、如何设置延时:点击一个位置后,等待几秒,再执行下一个操作。 解决方法是:使用setTimeOut及回调函数。代码如下: 依前面讲述的原理,准备好点击、设焦点、赋值函数,如下: 调用时,传入源码、延时值、回调函数。 即:对指定源码的元素进行操作,然后延时一定时长,再执行回调函数。 其中源码部分可以在页面查看器中获得,如下图所示: 这里再给出以上示例的完整代码,保存为html即可运行。 document.body.addEventListener("click", function(e) { console.log('点击:',e.originalTarget); }); JS版按键精灵 一、按钮: 1 2 二、输入框: 三、链接:jshaman.com 开始自动执行 依次执行以下操作: 1、点击第一、第二按钮;2、给输入框设置焦点;3、给输入框设置值:abc;4、点击链接; //点击事件 //参数: //outer_html:要点击的元素源码 //delay:延时 //call_back:回调函数 function click(outer_html, delay, call_back){ //获取页面所有元素 var all_elements = document.querySelectorAll('*'); //遍历元素 for(i=0; i |
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |