这是 第三届 360 前端星计划 的选拔作业题。600多名学生参与了解答,最后通过了60人。这60名同学完成的不错,思路、代码风格、功能完成度颇有可取之处,不过也有一些欠考虑的地方,比如发现很多同学能按照需求实现完整的功能,但是不知道应当如何 设计开放的 API ,或者说,如何分析和预判产品需求和未来的变化,从而决定什么应当开放,什么应当封装。这无关于答案正确与否,还是和经验有关。在这里,我提供一个 参考的版本 ,并不...
功能描述:打开一个网站的网页,过5分钟不动作,就会锁定页面,隐藏内容容器,显示一个容器用于输入密码,输入正确的密码来解锁。锁定后即使用户刷新页面,还是保留原来的状态。如已经锁定的,需要继续锁定,否则显示内容。 示例代码如下,通过document.onmouseover来实现多少分钟没有动作,使用计时器来实现。javascript实现系统屏幕保护效果(锁定网页)内容内容内容内容内容内容 输入密码: if (document.cookie.indexOf('lock=1'...
实现效果:css样式代码略。 html代码: 页面上导入了jquery.mobile 、jquery代码如下: http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"> http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js">代码如下: Slide to confirm I am human!js代码:代码如下: window.onload = function () {var slider1 = new Slider();slider1.Init();///屏幕大小发生改变时触发$(window).resize(function () {slider1.Hand...
移动手机设备上有一个屏幕解锁的应用相信大家都不陌生,在移动设备上,用户可以通过设置锁定图案作为密码对设备用户界面进行锁定,锁定界面如下图所示。 效果图如下所示JavaScript Code$("#gesturepwd").GesturePasswd({ backgroundColor:"#2980B9", //背景色 color:"#FFFFFF", //主要的控件颜色 roundRadii:50, //大圆点的半径 pointRadii:12, //大圆点被选中时显示的圆心的半径 space:60, //大圆点之间的间隙 width:480,...
本文实例讲述了js实现类似iphone的网页滑屏解锁功能。分享给大家供大家参考,具体如下: iphone 的出现,打破了人们的用户体验,这一用户体验也延伸到了网页设计上。最近看到很多blog的评论都用类似iphone滑动解锁的方式实现。只有滑动解锁之后才能评论,或者做其他的事情。这个功能的实现,其实并不麻烦,关键是要有好的美工,做出好的滑动图片,然后javascript配合CSS就可以完成,我在这里也简单实现了一个,基本功能如下 1. 打开页...
HTML5真的是很强大,前端时间看到一个canvas实现九宫格的密码解锁。今天抽出时间模仿了一个,特定分享一下! 效果截图如下:效果看起来还不错吧! 源码如下: <!DOCTYPE html> <html> <head lang="zh-CN"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/><meta charset="UTF-8"><title>html5实现网页解锁功能</title><style type="text/css">html, body {margin: 0;...
本文实例为大家分享了jQuery实现手势解锁密码的具体代码,供大家参考,具体内容如下 效果预览图: 验证成功:(可以进行页面挑战等...)验证失败: HTML: <div id="gesturepwd" style="position: absolute;width:440px;height:440px;left:50%;top:50%; margin-left:-220px;margin-top:-220px"></div>首次渲染: $("#gesturepwd").GesturePasswd({margin:"0px auto",backgroundColor:"#252736", //背景色color:"#FFFFFF", //主要的...
unlock.js插件具有以下特点: 滑动解锁。 尺寸、颜色、字体大小等都可以个性化定制。 完成解锁后会有回调函数,用来触发进一步的数据处理。 如何使用 1. 首先在页面中引入unlock.css和unlock.js文件。 <link href="css/unlock.css" rel="external nofollow" rel="stylesheet"> <script src=js/unlock.js></script>2. 然后布置简单的HTML的结构,使用一个<div>作为滑块的容器。 <!--滑块容器--> <div id = "foo"></div> 3. 最后初始...
效果图:代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><style type="text/css">* {margin: 0;padding: 0;}#slider-box {width: 300px;height: 50px;border-radius: 4px;background: #ccc;margin: 250px auto;position: relative;}#slider {width: 48px;height: 48px;border: 1px solid #eee;text-align: center;line-height: 48px;display: inline-block;background: #fff;border-radius: 4px;cursor...
手势解锁是app上常见的解锁方式,相比输入密码方式操作起来要方便许多。下面展示如何基于微信小程序实现手机解锁。最终实现效果如下图:整个功能基于canvas实现,首先添加画布组件,并设定样式 <!--index.wxml--> <view class="container"><canvas canvas-id="id-gesture-lock" class="gesture-lock" bindtouchstart="onTouchStart"bindtouchmove="onTouchMove" bindtouchend="onTouchEnd"></canvas> </view> .gesture-lock {margin...
代码:https://github.com/jsongo/wx-gesture-lock 这个手势解锁的demo使用了https://github.com/lvming6816077/H5lock 这个项目的算法和主逻辑,整合到微信小程序来,修改了很多地方的语法来适配小程序,去掉了window、document等函数,同时也添加了新的机制来解耦界面的操作和第三方库,这个下面会介绍到。 不过可惜的是,这个demo也只能在开发工具上玩玩,到真机上测试的时候,手指一滑动,页面会跟着滚动,手势没法使用。 下面...
移动手机设备上有一个屏幕解锁的应用相信大家都不陌生,在移动设备上,用户可以通过设置锁定图案作为密码对设备用户界面进行锁定,锁定界面如下图所示。 效果图如下所示JavaScript Code <script> $("#gesturepwd").GesturePasswd({ backgroundColor:"#2980B9", //背景色 color:"#FFFFFF", //主要的控件颜色 roundRadii:50, //大圆点的半径 pointRadii:12, //大圆点被选中时显示的圆心的半径 space:60, //大圆点之间的间隙 ...
功能描述:打开一个网站的网页,过5分钟不动作,就会锁定页面,隐藏内容容器,显示一个容器用于输入密码,输入正确的密码来解锁。锁定后即使用户刷新页面,还是保留原来的状态。如已经锁定的,需要继续锁定,否则显示内容。 示例代码如下,通过document.onmouseover来实现多少分钟没有动作,使用计时器来实现。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi...