利用JS最真实的模拟鼠标点击

 

为了破解永乐票务登录验证码问题

http://www.228.com.cn/auth/login?logout

当然,打码的过程自然依赖第三方平台,但问题是,哪怕平台给了你需要点击的(相对)坐标。你又如何进行点击呢?

在 C# 中,我本想利用控件 WebBrowser 来解决这个问题。结果翻了一大圈也没有找到什么有用的API。就连查找元素的方式也只有getElementByTag 和 getElementById。其次是 click() 方法。

但如果仅仅提供如此,我还不如直接往页面中使用 js 更轻快。

1、通过 chrome 控制台的Event Listeners。我们查看该img的绑定click事件,得知实际绑定click事件的元素是 .geetest_item.geetest_big_item

2、我们试着往控制台执行: $(".geetest_item.geetest_big_item").click(); 

发现图片什么变化也没有,然而等我们再次点击图片时,我们看到了变化:

点击的时候,居然是2,为什么不是1呢?

这说明我们的js起了效果,说明我们确确实实触发了图片的click事件。那么为什么执行js的时候,图片一点反应都没有?

click() 和 真实点击的区别到底在哪里?答案就是 event 的不同。我们可以通过一个实验来证明一下,新建一个index.html文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button id="fuck">fuck</button>
</body>
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script>
    $("#fuck").click(function (e) {
        console.log(e);
    })
</script>
</html>

打开这个页面,先是手动点击一下 “fuck” 按钮,然后再到控制台中输入 : $("#fuck").click();  我们来对比两者的区别:

我们发现,通过 click() 而产生的 event 参数较比真实点击的e参数非常匮乏。这可能就是原因,并且我们发现一个关键的参数 clientX , clientY 。

那么,我们结合之前click() 会导致 +1 的现象,猜测对方的代码可能是这样的:

var i =0;
$(".geetest_item.geetest_big_item").click(function (e) {
    i++;
    if (e.clientX && e.clientY) {
        $(".geetest_item.geetest_big_item").append("<div>" + i + "</div>")
    }
})

根据这个,我们只想办法在 click() 的时候,加入参数clientX , clientY 。应该就可以了。当然click是没有参数的。所以我们需要手动创建 Event

var ev = document.createEvent('HTMLEvents'); 
ev.clientX = 625
ev.clientY = 356
ev.initEvent('click', false, true); 
$(".geetest_item.geetest_big_item")[0].dispatchEvent(ev)

结果发现,是可行的

至此、破解了这个验证码点击问题。

 

其他传送门:

# 宝哥教你#查看jquery绑定的事件函数
http://sudodev.cn/detect-jquery-event-function-define/

# 图片还原和滑块位置求解
http://blog.csdn.net/qew110123/article/details/53068098

转载于:https://www.cnblogs.com/CyLee/p/7513342.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 好的,下面是用 HTML5 写一个模拟钢琴的基本步骤: 1. 创建 HTML 文档并设置页面的布局。 2. 使用 HTML5 音频元素 `<audio>` 嵌入钢琴的各个音符的音频文件。 3. 使用 HTML5 的 `<div>` 元素创建钢琴的各个键。 4. 为每个键添加相应的 CSS 样式,使其看起来像真正的钢琴键。 5. 使用 JavaScript 监听用户的键盘事件,当用户按下键盘上的某个键时,播放相应的音频文件。 6. 使用 JavaScript 为钢琴的各个键添加点击事件处理函数,在用户点击键时播放相应的音频文件。 下面是一个简单的 HTML5 钢琴的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 Piano</title> <style> /* 设置钢琴的布局 */ .piano { display: flex; flex-wrap: wrap; width: 800px; height: 200px; background-color: #333; } /* 设置每个键的样式 */ .key { width: calc(100% / 12); height: 100%; box-sizing: border-box; border: 1px solid #fff; background-color: #fff; } /* 设置黑键的样式 */ .black { width: calc(100% / 36); height: 50%; background-color: #000; } </style> </head> <body> <!-- 创建钢琴 --> <div class="piano"> <!-- 创建音符键 --> <div ### 回答2: 使用HTML5来制作一个模拟钢琴是可行的。HTML5提供了一些音频相关的标签和API,使得我们能够通过JavaScript控制音频的播放和停止,从而实现钢琴音效的播放。 首先,我们需要在HTML文件中创建一个包含键盘按键的布局,每个按键对应着钢琴上的一个音符。我们可以使用HTML的div元素来表示这些按键,并为每个按键添加一个唯一的id属性,例如: <div id="c" class="key" onclick="play('c')"></div> <div id="d" class="key" onclick="play('d')"></div> <div id="e" class="key" onclick="play('e')"></div> 然后,我们需要编写JavaScript函数来处理按键的点击事件以及音频的播放和停止。我们可以使用HTML5的Audio对象来加载和播放音频,并使用JavaScript的事件监听器来捕捉键盘按下和松开的事件。例如: function play(key) { var audio = new Audio(key + ".mp3"); audio.play(); } 接下来,我们可以使用CSS样式来美化钢琴的外观。我们可以为每个按键添加适当的CSS类,并定义相应的样式,以使它们看起来像钢琴上的按键。 最后,我们需要将这个HTML文件加载到浏览器中,然后我们就可以通过点击按键或通过键盘按键来模拟弹奏钢琴了。 总结起来,使用HTML5、JavaScript和CSS,我们可以创建一个模拟钢琴的Web应用程序。通过HTML创建按键布局,通过JavaScript处理按键事件和音频播放,通过CSS美化钢琴外观,使得用户可以通过点击按键或键盘来模拟弹奏钢琴。 ### 回答3: HTML5是一种强大的标记语言,可以用来创建交互式和多媒体内容。要实现一个模拟钢琴,可以利用HTML5的音频和事件处理功能。 首先,需要在HTML文档中创建一个钢琴的容器。可以使用div元素来承载钢琴的键盘。然后,使用CSS来美化钢琴的外观,分别为黑键和白键设置不同的样式。 接下来,通过JavaScript代码来实现钢琴键盘的功能。可以使用HTML5的audio标签来嵌入音频文件,分别为每个琴键指定不同的音乐文件。 然后,使用JavaScript监听用户的键盘事件。当用户按下键盘上的特定按键时,触发相应的音频播放。可以使用事件处理函数来实现这个功能。 为了增加交互性,可以添加鼠标事件监听。当用户点击钢琴键盘上的键时,也可以触发相应的音频播放。通过添加鼠标事件处理函数,来处理用户的点击操作。 最后,需要确保钢琴键盘在不同的设备上能够自适应。HTML5提供了响应式设计的特性,可以使用CSS媒体查询来适应不同的屏幕大小和设备类型。 在实现钢琴的同时,还可以添加其他功能,比如用户可以录制自己演奏的音乐,并进行回放。可以使用HTML5的Web Audio API来实现录音和回放功能。 总结起来,使用HTML5可以很容易地实现一个模拟钢琴。通过使用HTML、CSS和JavaScript的功能,可以创建一个交互式的钢琴键盘,让用户可以通过键盘或鼠标演奏出美妙的音乐。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值