html滑动验证,html5移动端按住滑块拖动验证代码

这篇博客介绍了如何在HTML5移动端实现按住滑块拖动的验证效果。通过引入CSS和JS文件,创建并初始化FtSlider对象,实现了滑动验证功能,并提供了还原验证结果的按钮操作。代码适用于手机端,PC端无法展示拖拽效果。
摘要由CSDN通过智能技术生成

特效描述:html5移动端 按住滑块拖动 拖动验证代码。js html5适用于移动端的按住滑块拖动验证成功效果代码。请用手机打开查看演示

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

请在移动端查看效果pc端无法拖拽

还原
验证结果:
还原
验证结果:

var btn1 = document.getElementById("btn1");

var btn2 = document.getElementById("btn2");

var result1 = document.getElementById("result1");

var result2 = document.getElementById("result2");

var slider1 = new FtSlider({

id: "slider1",

callback: function(res) {

result1.innerHTML = res;

}

});

var slider2 = new FtSlider({

id: "slider2",

width: 320,

height: 36,

textMsg: "拖动滑块到右边",

successMsg: "验证成功了哦",

callback: function(res) {

result2.innerHTML = res;

}

});

btn1.onclick = function() {

slider1.restore();

result1.innerHTML = "false";

}

btn2.onclick = function() {

slider2.restore();

result2.innerHTML = "false";

}

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,请稍等片刻,我马上为您查找并提供该代码。以下是使用Selenium自动化测试框架编写的登录12306官网验证滑动滑块登录成功的代码: ```python # 导入selenium相关的模块 from selenium import webdriver from selenium.webdriver.common.action_chains import ActionChains from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC from selenium.webdriver.common.by import By # 开启chrome浏览器,进入12306登录页面 driver = webdriver.Chrome() driver.get('https://kyfw.12306.cn/otn/login/init') # 显示等待直到页面完全加载 element = WebDriverWait(driver, 5).until( EC.presence_of_element_located((By.ID, 'J-loginImg')) ) # 定位到滑块元素 slider = driver.find_element_by_id('J-slider') # 使用ActionChains模拟鼠标操作,按住滑块拖动到最右边 ActionChains(driver).click_and_hold(slider).perform() ActionChains(driver).move_by_offset(300, 0).perform() # 释放鼠标 ActionChains(driver).release().perform() # 等待滑块验证通过 WebDriverWait(driver, 5).until_not( EC.text_to_be_present_in_element((By.ID, 'J-loginImg'), '拖动完成验证') ) # 定位到登录按钮并点击 driver.find_element_by_id('J-login').click() # 验证是否登录成功 WebDriverWait(driver, 10).until( EC.presence_of_element_located((By.CLASS_NAME, 'my_order')) ) # 打印登录成功信息 print('登录成功!') # 关闭浏览器 driver.quit() ``` 以上是关于使用Selenium编写登录12306官网验证滑动滑块登录成功的代码,希望对您有所帮助。如果您有更多的问题,请随时问我。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值