纯JavaScript代码实现移动设备绘图解锁
移动手机设备上有一个屏幕解锁的应用相信大家都不陌生,在移动设备上,用户可以通过设置锁定图案作为密码对设备用户界面进行锁定,锁定界面如下图所示。
效果图如下所示
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
随机推荐
- ASP.NET Mvc开发之删除修改数据
- 收藏的几个超级巡警注册码 超级巡警序列号
- Java中的代理模式详解及实例代码
- ASP.NET MVC5网站开发之网站设置(九)
- 深入理解C语言中编译相关的常见错误
- 深入解析nodejs HTTP服务
- 网页设计中色彩搭配的内涵
- 关于图片存储格式的整理(BMP格式介绍)
- js实现兼容IE、Firefox的图片缩放代码
- php实现cc攻击防御和防止快速刷新页面示例
- sqlserver四舍五入使用round函数及cast和convert函数
- MySQL数据库MyISAM存储引擎转为Innodb的方法
- C#(4.0)不常见的语法
- jquery ajax执行后台方法
- jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
- BootStrap与validator 使用笔记(JAVA SpringMVC实现)
- Linux安装配置Tomcat教程
- Android中的popupwindow进入和退出的动画效果
- php中字符集转换iconv函数使用总结
- C#实现在服务器端裁剪图片的方法