这是 第三届 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插件具有以下特点： 滑动解锁。 尺寸、颜色、字体大小等都可以个性化定制。 完成解锁后会有回调函数，用来触发进一步的数据处理。 如何使用 １. 首先在页面中引入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...