纯JavaScript代码实现移动设备绘图解锁

2024-10-16 12:02:52

移动手机设备上有一个屏幕解锁的应用相信大家都不陌生，在移动设备上，用户可以通过设置锁定图案作为密码对设备用户界面进行锁定，锁定界面如下图所示。

效果图如下所示

JavaScript Code

<script>
 $("#gesturepwd").GesturePasswd({
backgroundColor:"#2980B9", //背景色
color:"#FFFFFF",  //主要的控件颜色
roundRadii:50,  //大圆点的半径
pointRadii:12, //大圆点被选中时显示的圆心的半径
space:60, //大圆点之间的间隙
width:480,  //整个组件的宽度
height:480, //整个组件的高度
lineColor:"#ECF0F1",  //用户划出线条的颜色
zindex :100 //整个组件的css z-index属性
});
 $("#gesturepwd").on("hasPasswd",function(e,passwd){
  var result;
 if(passwd == "1235789"){
  result=true;
 }
  else {
   result=false;
  }
  if(result == true){
   $("#gesturepwd").trigger("passwdRight");
   setTimeout(function(){
    //密码验证正确后的其他操作，打开新的页面等。。。
    alert("Pattern is correct")
   },500); //延迟半秒以照顾视觉效果
  }
  else{
   $("#gesturepwd").trigger("passwdWrong");
   //密码验证错误后的其他操作。。。
  }
 });
</script>

以上代码也很简单吧，纯js代码实现移动设备绘图解锁，当然这是核心代码，其他的还需要小伙伴们根据自己的需求自行发挥。希望本文分享能给大家帮助。

javascript实现锁定网页、密码解锁效果（类似系统屏幕保护效果）

功能描述:打开一个网站的网页,过5分钟不动作,就会锁定页面,隐藏内容容器,显示一个容器用于输入密码,输入正确的密码来解锁.锁定后即使用户刷新页面,还是保留原来的状态.如已经锁定的,需要继续锁定,否则显示内容. 示例代码如下,通过document.onmouseover来实现多少分钟没有动作,使用计时器来实现. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o
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
纯JavaScript代码实现移动设备绘图解锁

移动手机设备上有一个屏幕解锁的应用相信大家都不陌生,在移动设备上,用户可以通过设置锁定图案作为密码对设备用户界面进行锁定,锁定界面如下图所示. 效果图如下所示 JavaScript Code <script> $("#gesturepwd").GesturePasswd({ backgroundColor:"#2980B9", //背景色 color:"#FFFFFF", //主要的控件颜色 roundRadii:50, //大圆点的
纯JavaScript代码实现文本比较工具

之前项目需求需要写一个纯js文本比较工具,在此小编把代码分享在我们平台供大家参考,算法有待优化,本文写的不好还请见谅. 先上效果图: 代码如下所示: 把源码保存为html格式的文件就可以直接运行了 <!doctype html> <html> <head> <title>文本比较工具</title> <style type="text/css"> *{padding:px;margin:px;} html,body
纯javascript代码实现计算器功能(三种方法)

今天来分享一下用纯javascript代码编写的一个计算器程序,很多行业都能用到这个程序,例如做装修预算.贷款利率等等. 首先来看一下完成后的效果: 方法一: 具体编写代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&q
纯JavaScript手写图片轮播代码

废话不多说了,直接给大家贴js代码实现手写图片轮播的代码了,代码非常简单,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js图片轮播切换</title> <style type="text/css"> .imgCon{width: 400px;height: 400px;border: 2p
ECHO.js 纯javascript轻量级延迟加载的实例代码

ECHO.js 纯javascript轻量级延迟加载的实例代码演示 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>简单的JavaScript图像延迟加载库Echo.js</title> <style> .demo img { width: 736px; height: 490px;
纯JavaScript 实现flappy bird小游戏实例代码

前言: <flappy bird>是一款由来自越南的独立游戏开发者Dong Nguyen所开发的作品,游戏于2013年5月24日上线,并在2014年2月突然暴红.2014年2月,<Flappy Bird>被开发者本人从苹果及谷歌应用商店撤下.2014年8月份正式回归APP STORE,正式加入Flappy迷们期待已久的多人对战模式.游戏中玩家必须控制一只小鸟,跨越由各种不同长度水管所组成的障碍. 正文: 接下来就是一步一步来实现它步骤1:页面布局,这儿就不多说了,页面内容如下:
javascript实现支持移动设备画廊

这是一款不依赖任何js框架.纯javascript实现的画廊效果.它支持移动设备手势操作,如手势触摸滑动.放大和关闭图片,它还支持PC上的键盘操作,总之它是WEB开发者不可或缺的图片画廊插件,它叫photoswipe. 展示效果图如下: 查看演示下载源码 HTML 首先加载所需的CSS和js文件. <link rel="stylesheet" href="css/photoswipe.css"> <link rel="styleshee
纯JavaScript实现实时反馈系统时间

用javascript反馈系统时间运用知识 JavaScript HTML DOM HTML DOM 中的setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数. 语法setInterval(code,milliseconds) code--代码(可以为函数) milliseconds--在此调用的时间(毫秒) 因此,我们想让反馈的系统时间动起
极力推荐10个短小实用的JavaScript代码段

JavaScript正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaScript语言的NodeJS,我们也可以开发出高性能的后端服务,甚至我还看到在硬件编程领域也出现了JavaScript的身影.JavaScript正在逐渐进化为一门全能的开发语言. 但用好JavaScript并不容易,你除了需要掌握它的语法并知道如何写出高质量的代码之外,还需要了解如何解决那些几乎在每个项目中都会遇到的需求场景,比如:判断日期,高亮文本,限制字符数等等,有很多第三方库可以解决这些问题,但这些
【经验总结】编写JavaScript代码时应遵循的14条规律

本文讲述了编写JavaScript代码时应遵循的14条规律.分享给大家供大家参考,具体如下: 1. 总是使用 'var' 在javascript中,变量不是全局范围的就是函数范围的,使用"var"关键词将是保持变量简洁明了的关键.当声明一个或者是全局或者是函数级(function-level)的变量,需总是前置"var"关键词,下面的例子将强调不这样做潜在的问题. 不使用 Var 造成的问题 var i=0; // This is good - creates a

纯JavaScript代码实现移动设备绘图解锁

相关推荐

随机推荐