原生js实现简单滑动解锁功能 js实现滑动拼图解锁
本文实例为大家分享了js实现简单滑动解锁功能以及滑动拼图解锁的具体代码，供大家参考，具体内容如下
简单实现滑动解锁，效果图是这样的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滑动解锁</title>
<style>
.div1 {
width: 200px;
height: 30px;
border: 1px solid #cccccc;
user-select: none;
position: relative;
margin: 0 auto;
margin-top: 300px;
}
.div2 {
width: 100%;
height: 30px;
}
.div3 {
position: absolute;
top: 0;
left: 0;
width: 36px;
height: 30px;
line-height: 30px;
text-align: center;
background: #fff;
cursor: pointer;
font-family: "宋体";
z-index: 10;
font-weight: bold;
color: #929292;
/* cursor: move; */
}
.div4 {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
line-height: 30px;
text-align: center;
z-index: -1;
background: #ccc;
}
</style>
</head>
<body>
<!-- 大盒子 -->
<div class="div1" id='div1'>
<div class="div2" id='div2'></div>
<span class="div3" id='div3'>>></span>
<div class="div4" id='div4'>滑动解锁</div>
</div>
<script>
// var a =1,b='1'
// console.log(a+b,a-b,a++,b++)
// const str = 'console.log(1)';
// // replaceAll("\\(.*\\)","");
// const newStr=str.replace[/console\.log/, 'return ']
// console.log(newStr)
var div1 = document.getElementById('div1');
var div3 = document.getElementById('div3');
var div4 = document.getElementById('div4');
var left;
var px = div1.offsetWidth - div3.offsetWidth
div3.onmousedown = function (event) {
var event = window.event || ev;
left = event.clientX - div3.offsetLeft;//鼠标按下时的位置
console.log(event)
console.log(left)
document.onmousemove = function (event) {//鼠标移动
var event = window.event || ev;
lefta = event.clientX - left;//鼠标移动的距离
console.log(px, lefta);
if (lefta < 0) {
lefta = 0;
} else if (px < lefta) {
lefta = px - 2;
}
div3.style.left = lefta + 'px';
}
document.onmouseup = function (event) {//鼠标抬起
var event = window.event || ev;
document.onmousemove = null;
document.onmouseup = null;
lefta = event.clientX - left;
if (lefta < 0) {
lefta = 0;
span.innerHTML = '滑动解锁';
} else if (px < lefta) {
lefta = px - 2;
div4.innerHTML = '解锁成功';
div3.innerHTML = '√';
div3.onmousedown = null;
alert('成功')
} else {
lefta = 0;
}
div3.style.left = lefta + 'px';
}
}
</script>
</body>
</html>
由于拼图解锁我没做过，做了个大概的样子，效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滑动解锁</title>
<style>
* {
margin: 0;
padding: 0;
}
.conter{
width: 202px;
border: 1px solid #ccc;
margin: 0 auto;
margin-top: 300px;
}
.box {
width: 202px;
height: 130px;
background: #ff00ff;
position: relative;
}
.box::before {
content: '';
position: absolute;
bottom: 50px;
right: 30px;
width: 30px;
height: 30px;
background: #fff;
z-index: 99;
}
.div1 {
position: absolute;
bottom: 0;
width: 200px;
height: 30px;
border: 1px solid #cccccc;
user-select: none;
position: relative;
}
.div2 {
width: 100%;
height: 30px;
}
.div3 {
position: absolute;
top: 0;
left: 0;
width: 36px;
height: 30px;
line-height: 30px;
text-align: center;
background: #fff;
cursor: pointer;
font-family: "宋体";
z-index: 10;
font-weight: bold;
color: #929292;
z-index: 1000;
}
.div3::before{
content: '';
position: absolute;
top: -81px;
left: 3px;
width: 30px;
height: 30px;
background: #000;
}
.div4 {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
line-height: 30px;
text-align: center;
z-index: -1;
background: #ccc;
}
</style>
</head>
<body>
<!-- 大盒子 -->
<div class="conter">
<!-- 可以放图片 计算位置 -->
<div class="box"></div>
<div class="div1" id='div1'>
<div class="div2" id='div2'></div>
<!-- 对应缺口位置 拖动到相应位置既符合 -->
<span class="div3" id='div3'>>></span>
<div class="div4" id='div4'>滑动解锁</div>
</div>
</div>
<script>
var div1 = document.getElementById('div1');
var div3 = document.getElementById('div3');
var div4 = document.getElementById('div4');
var left;
var px = div1.offsetWidth - div3.offsetWidth
div3.onmousedown = function (event) {
var event = window.event || ev;
left = event.clientX - div3.offsetLeft;//鼠标按下时的位置
document.onmousemove = function (event) {//鼠标移动
var event = window.event || ev;
lefta = event.clientX - left;//鼠标移动的距离
// console.log(lefta);
if (lefta < 0) {
lefta = 0;
} else if (px < lefta) {
lefta = px;
}
div3.style.left = lefta + 'px';
}
document.onmouseup = function (event) {//鼠标抬起
var event = window.event || ev;
document.onmousemove = null;
document.onmouseup = null;
lefta = event.clientX - left;
console.log(lefta)
if (lefta < 0) {
lefta = 0;
div4.innerHTML = '滑动解锁';
// 是否符合缺口位置
} else if (lefta > '134' && lefta <'142') {
div4.innerHTML = '解锁成功';
div3.innerHTML = '√';
div3.onmousedown = null;
alert('成功')
} else {
alert('错误，请重试')
lefta = 0;
}
div3.style.left = lefta + 'px';
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
javascript结合Flexbox简单实现滑动拼图游戏
滑动拼图就是把一张图片分成几等份,打乱顺序(下图),然后通过滑动拼凑成一张完整的图片. 要实现一个拼图游戏,需要考虑怎样随机的打乱顺序,怎样交换两张图片的位置,等等.但是,使用了Flexbox布局以后,这都不需要你去考虑,浏览器会帮你做,Flexbox就是这么的强大.关于Flexbox的介绍可以点击这里. 这个游戏中要用的是Flexbox布局的order属性,order属性可以用来控制Flex项目的顺序. 这里我用九个canvas元素来把图片分成九等分,也可以用其他方法,比如背景图片定位: <d
-
使用 Node.js 模拟滑动拼图验证码操作的示例代码
近几年,网页上各种新型验证码层出不穷,其中一种比较常见的是滑动验证码,比如下图这种. 本文介绍了一种使用纯前端方法寻找滑动终点并模拟滑动的方法. 我们需要三个依赖库: puppeteer. Resemble.js 以及canvas.其中 puppeteer 用于打开并操作页面, Resemble.js 及 canvas 用于寻找滑动验证码的终点位置.相关依赖如下: "dependencies": { "canvas": "^1.6.7", &qu
-
jQuery使用unlock.js插件实现滑动解锁
unlock.js插件具有以下特点: 滑动解锁. 尺寸.颜色.字体大小等都可以个性化定制. 完成解锁后会有回调函数,用来触发进一步的数据处理. 如何使用 1. 首先在页面中引入unlock.css和unlock.js文件. <link href="css/unlock.css" rel="external nofollow" rel="stylesheet"> <script src='js/unlock.js'><
-
js+canvas实现滑动拼图验证码功能
上图为网易云盾的滑动拼图验证码,其应该有一个专门的图片库,裁剪的位置是固定的.我的想法是,随机生成图片,随机生成位置,再用canvas裁剪出滑块和背景图.下面介绍具体步骤. 首先随便找一张图片渲染到canvas上,这里#canvas作为画布,#block作为裁剪出来的小滑块. <canvas width="310" height="155" id="canvas"></canvas> <canvas width=&q
-
js实现html滑动图片拼图验证
本文实例为大家分享了js实现html滑动图片拼图验证的具体代码,供大家参考,具体内容如下 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
javascript实现滑动解锁功能
实现效果: css样式代码略. html代码: 页面上导入了jquery.mobile .jquery 复制代码 代码如下: <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js&quo
-
JS实现滑动拼图验证功能完整示例
本文实例讲述了JS实现滑动拼图验证功能.分享给大家供大家参考,具体如下: 先看一下效果图: 设置画布滑块属性 const l = 42, // 滑块边长 r = 10, // 滑块半径 w = 310, // canvas宽度 h = 155, // canvas高度 PI = Math.PI const L = l + r * 2 // 滑块实际边长 设置背景图片: 图片链接地址可以自行更换 function getRandomImg() { return 'https://picsum.ph
-
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如登陆页面 <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="http://static.geetes
-
原生JS实现简单的倒计时功能示例
本文实例讲述了原生JS实现简单的倒计时功能.分享给大家供大家参考,具体如下: 1.第一种 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS倒计时</title> </head> <body> <div id="div"></div> <scr
-
使用Angular.js实现简单的购物车功能
先给大家分享实现代码,在代码下面有效果图展示,大家可以两者结合参考下,废话不多说了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://code.angularjs.org/1.2.5/angular.min.js"></script
-
js实现简单锁屏功能实例
本文实例讲述了js实现简单锁屏功能的方法.分享给大家供大家参考.具体实现方法如下: //********* 锁屏DIV *************************** function LockScreen(tag,title,width,height,url) { if (tag) //锁屏 { var lockdiv = document.getElementById("lockscreen"); if (lockdiv!=null) { lockdiv.style.dis
-
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
本文实例总结了JS常见简单正则表达式验证功能.分享给大家供大家参考,具体如下: 下面都是一些比较常用简单的验证,像那些特殊的复杂的情况这里不进行考虑 1.验证电话号码或者手机号码 /** * 验证电话号码(手机号码+电话号码) * @param obj * @returns {Boolean} */ function checkPhoneNum(obj){ if(/^((\d{3}-\d{8}|\d{4}-\d{7,8})|(1[3|5|7|8][0-9]{9}))$/.test(obj)){
-
js实现简单抽奖小功能
本文实例为大家分享了js实现简单抽奖小功能的具体代码,供大家参考,具体内容如下 1.场景: 点击按钮开始随机抽取奖品,当停止那刻停留在大屏幕的是抽中的奖品("谢谢"即为没奖). 2.思路: 众所周知,抽奖主要讲究的就是随机性,并且是在一堆奖项中抽取.那么可以锁定方向:用数组放奖项名,用Math.random()来返回介于 0(包含) ~ 1(不包含) 之间的一个随机数.只要能随机选中数组的下标,便能随机选中奖项. 话不多说,附上代码: <!DOCTYPE html> <
-
原生js实现简单滑动解锁功能 js实现滑动拼图解锁
本文实例为大家分享了js实现简单滑动解锁功能以及滑动拼图解锁的具体代码,供大家参考,具体内容如下 简单实现滑动解锁,效果图是这样的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi
-
node.js实现简单登录注册功能
本文实例为大家分享了node.js实现简单登录注册的具体代码,供大家参考,具体内容如下 1.首先需要一个sever模块用于引入路由,引入连接数据库的模块,监听服务器2.要有model层,里面写数据库连接模块和数据库的各种model(表),并导出model对象3.工具类utils,里面存放一些功能的模块,并且封装后导出 ,例如发送验证码的功能4.写路由,需要对数据库操作就使用导出的model对象,需要功能模块就使用导出的功能对象随后返回这个路由,在sever里引入5.生成api文档 sever模块
-
利用前端HTML+CSS+JS开发简单的TODOLIST功能（记事本）
1.简单介绍 在学习完HTML.CSS和一些JS后,博主也利用一些空余的时间的写了一个关于JS简单应用的Demo,主要实现的是一个Todolist(类似于记事本)的应用,可以实现数据的增.删.改.查,并且使用localStorage实现数据的本地持久化存储,具体就接着往下看吧. 2.运行截图 往输入框里输入内容: 进行添加后默认添加到未完成一栏: 将刚刚添加的事项进行修改: 修改成功: 将修改成功后的事项设置成已完成: 对"干饭"."睡觉"进
-
JS实现简单留言板功能
本文实例为大家分享了JS实现简单留言板的具体代码,供大家参考,具体内容如下 言归正传,之前的案例相信大家都已经完全弄清楚了,还记得我们之前统计字数的那个案例吗?忘记的可以再去翻阅一下,今天就是在这个方法的基础上,把它变成一个留言版,就像我们之前的评论一样,是不是很期待呢?先来看一下效果图 输入昵称,选择头像,输入留言,点击广播就能够在下面显示出来了,是不是很nice呢,具体怎么实现的呢,我们来看代码 <!DOCTYPE html> <html lang="en">
-
js/jQuery简单实现选项卡功能
第一种方法是用原生的js代码如下: 复制代码 代码如下: <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>简单选项卡</title> <style type="text/css"> body,ul,li{margin:0;padding:0;} body{font:12px/1.5 Ta