submit: 初步完成锁屏
zhizous
parent
d45f9e8781
commit
3fa476b60d
|
|
@ -658,10 +658,10 @@
|
|||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/**锁屏样式*/
|
||||
/**==================锁屏样式 Start==================*/
|
||||
.lock-screen {
|
||||
position: fixed;
|
||||
z-index: 999999999;
|
||||
z-index: 99999999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
|
@ -718,15 +718,40 @@
|
|||
letter-spacing: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.lock-screen .quit{
|
||||
position: absolute;
|
||||
z-index: 19;
|
||||
right: 10%;
|
||||
bottom: 10%;
|
||||
transition: all .5s;
|
||||
}
|
||||
.lock-screen .quit .layui-icon{
|
||||
font-size: 64px;
|
||||
cursor: pointer;
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
color: transparent;
|
||||
background: linear-gradient(to bottom right, red, yellow);
|
||||
-webkit-background-clip: text;
|
||||
font-weight: bolder;
|
||||
text-shadow: 0 0 10px rgba(255, 63, 68, 0.5);
|
||||
}
|
||||
.lock-screen .quit:hover{
|
||||
transform: scale(1.3);
|
||||
-webkit-transform: scale(1.3);
|
||||
}
|
||||
|
||||
.lock-screen .unlock {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 19;
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
color: #f4f4f4;
|
||||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.lock-screen .unlock tr,
|
||||
.lock-screen .unlock td {
|
||||
text-align: center;
|
||||
|
|
@ -743,6 +768,23 @@
|
|||
letter-spacing: 5px;
|
||||
font-family: '微软雅黑', '新宋体', '宋体', arial, tahoma, sans-serif;
|
||||
}
|
||||
.lock-screen .lock-form{
|
||||
position: relative;
|
||||
bottom: 50px;
|
||||
}
|
||||
.lock-screen .lock-form .layui-form-item{
|
||||
width: 80%;
|
||||
max-width: 450px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/**雪花*/
|
||||
.lock-screen .snowflake{
|
||||
position: absolute;
|
||||
z-index: 8;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.lock-screen .lock-content p[lock='lock'] {
|
||||
display: inline-block;
|
||||
|
|
@ -799,6 +841,7 @@
|
|||
color: white;
|
||||
}
|
||||
}
|
||||
/**==================锁屏样式 End==================*/
|
||||
|
||||
/*
|
||||
* 以下都是移动端的处理响应
|
||||
|
|
|
|||
32
index.html
32
index.html
|
|
@ -168,16 +168,45 @@
|
|||
<img class="lock-gradual" src="./images/wallpaper/3fded2e777723f145a4773dfdb68a9e3.jpg" alt="" />
|
||||
</div>
|
||||
<div class="lock-content">
|
||||
<!--雪花-->
|
||||
<div class="snowflake">
|
||||
<canvas id="snowflake"></canvas>
|
||||
</div>
|
||||
<!--雪花 END-->
|
||||
<div class="time">
|
||||
<div>
|
||||
<div class="hhmmss"></div>
|
||||
<div class="yyyymmdd"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="quit" id="lockQuit">
|
||||
<i class="layui-icon layui-icon-logout" title="退出登录"></i>
|
||||
</div>
|
||||
<table class="unlock">
|
||||
<tr>
|
||||
<td>
|
||||
<div class="lock-text">最近头疼还没来得及写完</div>
|
||||
<div class="layui-form lock-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-col-xs8 layui-col-sm8 layui-col-md8">
|
||||
<input type="password"
|
||||
required
|
||||
lay-verify="required"
|
||||
id="lockPassword"
|
||||
name="lock_password"
|
||||
style="border-radius: 0;border:0;height: 44px"
|
||||
placeholder="默认密码123456"
|
||||
autocomplete="off"
|
||||
class="layui-input" />
|
||||
</div>
|
||||
<div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
|
||||
<button style="width: 100%;box-sizing:border-box;border-radius: 0;"
|
||||
type="button"
|
||||
lay-submit
|
||||
lay-filter="lockSubmit"
|
||||
class="layui-btn layui-btn-lg layui-btn-normal">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -185,6 +214,7 @@
|
|||
</div>
|
||||
<!--js逻辑-->
|
||||
<script src="lib/layui/layui.js"></script>
|
||||
<script src="js/snowflake.js?snowflake=雪花"></script>
|
||||
<script src="js/okadmin.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
/^http(s*):\/\//.test(location.href) || alert('请先部署到 localhost 下再访问');
|
||||
|
||||
var objOkTab = "";
|
||||
layui.use(["element", "layer", "okUtils", "okTab", "okLayer", "okContextMenu", "okHoliday", "laydate"], function () {
|
||||
layui.use(["element", "form", "layer", "okUtils", "okTab", "okLayer", "okContextMenu", "okHoliday", "laydate"], function () {
|
||||
var okUtils = layui.okUtils;
|
||||
var $ = layui.jquery;
|
||||
var form = layui.form;
|
||||
var laydate = layui.laydate;
|
||||
var layer = layui.layer;
|
||||
var okLayer = layui.okLayer;
|
||||
|
|
@ -345,33 +346,30 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer", "okContextMenu", "
|
|||
* 锁定账户
|
||||
*/
|
||||
var lock_inter = "";
|
||||
lockShowInit(okUtils);
|
||||
$("#lock").click(function () {
|
||||
okLayer.confirm("确定要锁定账户吗？", function (index) {
|
||||
layer.close(index);
|
||||
$(".lock-screen").show();
|
||||
lockInit(okUtils);
|
||||
/*layer.prompt({
|
||||
btn: ['确定'],
|
||||
title: '输入密码解锁(123456)',
|
||||
closeBtn: 0,
|
||||
formType: 1
|
||||
}, function (value, index, elem) {
|
||||
if (value == "123456") {
|
||||
layer.close(index);
|
||||
$(".yy").hide();
|
||||
} else {
|
||||
layer.msg('密码错误', {anim: 6, time: 1000});
|
||||
}
|
||||
});*/
|
||||
okUtils.local("isLock", '1');//设置锁屏缓存防止刷新失效
|
||||
lockShowInit(okUtils);//锁屏
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
/**锁屏内容*/
|
||||
function lockInit(okUtils) {
|
||||
/**锁屏方法*/
|
||||
function lockShowInit(okUtils) {
|
||||
let localLock = okUtils.local("isLock");
|
||||
$("#lockPassword").val("");
|
||||
if(!localLock){
|
||||
return;
|
||||
}
|
||||
|
||||
$(".lock-screen").show();
|
||||
Snowflake("snowflake"); // 雪花
|
||||
|
||||
var lock_bgs = $(".lock-screen .lock-bg img");
|
||||
$(".lock-content .time .hhmmss").html(okUtils.dateFormat("", "hh <p lock='lock'>:</p> mm"));
|
||||
$(".lock-content .time .yyyymmdd").html(okUtils.dateFormat("", "yyyy 年 M 月 dd 日"));
|
||||
|
||||
var i = 0, k = 0;
|
||||
lock_inter = setInterval(function () {
|
||||
i++;
|
||||
|
|
@ -383,6 +381,35 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer", "okContextMenu", "
|
|||
}
|
||||
$(".lock-content .time .hhmmss").html(okUtils.dateFormat("", "hh <p lock='lock'>:</p> mm"));
|
||||
}, 1000);
|
||||
|
||||
//提交密码
|
||||
form.on('submit(lockSubmit)', function (data) {
|
||||
console.log(data);
|
||||
if (data.field.lock_password !== "123456") {
|
||||
layer.msg("密码不正确", {
|
||||
icon: 5,
|
||||
zIndex: 999999991
|
||||
});
|
||||
} else {
|
||||
layer.msg("密码输入正确", {
|
||||
icon: 6,
|
||||
zIndex: 999999992,
|
||||
end: function () {
|
||||
okUtils.local("isLock", null); //清除锁屏的缓存
|
||||
$("#lockPassword").val(""); //清除输入框的密码
|
||||
$(".lock-screen").hide();
|
||||
clearInterval(lock_inter);
|
||||
}
|
||||
});
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
//退出登录
|
||||
$("#lockQuit").click(function () {
|
||||
// window.location.href = "./pages/login.html";
|
||||
window.location.replace("./pages/login.html"); //替换当前页面
|
||||
});
|
||||
}
|
||||
|
||||
console.log(" __ .___ .__ \n" +
|
||||
|
|
|
|||
|
|
@ -0,0 +1,179 @@
|
|||
/**
|
||||
* 雪花
|
||||
* canvas版 无需依赖jquery
|
||||
*/
|
||||
|
||||
|
||||
var configSnowflake = {};
|
||||
|
||||
/**
|
||||
* 雪球
|
||||
* eg: Snowflake(canvasID);
|
||||
* @param {[type]} elementName [description]
|
||||
*/
|
||||
var Snowflake = function (elementName) {
|
||||
|
||||
configInit();
|
||||
var snowElement = document.getElementById(elementName);
|
||||
var canvasContext = snowElement.getContext("2d");
|
||||
var width = configSnowflake.clientWidth;
|
||||
var height = configSnowflake.clientHeight;
|
||||
|
||||
//canvas尺寸修正
|
||||
snowElement.width = width;
|
||||
snowElement.height = height;
|
||||
|
||||
//构建雪球的数量
|
||||
var snowNumber = 50;
|
||||
|
||||
//构建雪球对象
|
||||
var snowArrObjs = initSnow(snowNumber, width, height);
|
||||
var snowArrNum = snowArrObjs.length;
|
||||
/**
|
||||
* 绘制页面
|
||||
* @return {[type]} [description]
|
||||
*/
|
||||
var render = function () {
|
||||
//清理之前的矩形数据
|
||||
canvasContext.clearRect(0, 0, width, height);
|
||||
for (var i = 0; i < snowArrNum; ++i) {
|
||||
snowArrObjs[i].render(canvasContext);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新雪花
|
||||
* @return {[type]} [description]
|
||||
*/
|
||||
var update = function () {
|
||||
for (var i = 0; i < snowArrNum; ++i) {
|
||||
snowArrObjs[i].update();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 绘制与更新
|
||||
* @return {[type]} [description]
|
||||
*/
|
||||
var renderAndUpdate = function () {
|
||||
render();
|
||||
update();
|
||||
requestAnimationFrame(renderAndUpdate);
|
||||
};
|
||||
|
||||
renderAndUpdate();
|
||||
};
|
||||
|
||||
function initSnow(snowNumber, width, height) {
|
||||
//雪球参数
|
||||
var options = {
|
||||
//雪球的半球距离
|
||||
minRadius: 3,
|
||||
maxRadius: 10,
|
||||
// 运动的范围区域
|
||||
maxX: width,
|
||||
maxY: height,
|
||||
//速率
|
||||
minSpeedY: 0.05,
|
||||
maxSpeedY: 2,
|
||||
speedX: 0.05,
|
||||
//滤镜
|
||||
minAlpha: 0.5,
|
||||
maxAlpha: 1.0,
|
||||
minMoveX: 4,
|
||||
maxMoveX: 18
|
||||
};
|
||||
var snowArr = [];
|
||||
for (var i = 0; i < snowNumber; ++i) {
|
||||
snowArr[i] = new Snow(options);
|
||||
}
|
||||
return snowArr;
|
||||
}
|
||||
|
||||
function configInit() {
|
||||
//rem设置
|
||||
(function(doc, win) {
|
||||
var docEl = doc.documentElement,
|
||||
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
|
||||
recalc = function() {
|
||||
var clientWidth = docEl.clientWidth;
|
||||
var clientHeight = docEl.clientHeight;
|
||||
if (!clientWidth) return;
|
||||
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
|
||||
//宽与高度
|
||||
document.body.style.height = clientWidth * (900 / 1440) + "px";
|
||||
configSnowflake.clientWidth = clientWidth;
|
||||
configSnowflake.clientHeight = clientHeight;//clientWidth * (900 / 1440);
|
||||
};
|
||||
recalc();
|
||||
win.addEventListener(resizeEvt, recalc, false);
|
||||
doc.addEventListener('DOMContentLoaded', recalc, false);
|
||||
})(document, window);
|
||||
}
|
||||
|
||||
/**
|
||||
* 雪球类
|
||||
*/
|
||||
function Snow(snowSettings) {
|
||||
this.snowSettings = snowSettings;
|
||||
this.radius = randomInRange(snowSettings.minRadius, snowSettings.maxRadius);
|
||||
//初始的x位置
|
||||
this.initialX = Math.random() * snowSettings.maxX;
|
||||
this.y = -(Math.random() * 500);
|
||||
//运行的速率
|
||||
this.speedY = randomInRange(snowSettings.minSpeedY, snowSettings.maxSpeedY);
|
||||
this.speedX = snowSettings.speedX;
|
||||
//滤镜
|
||||
this.alpha = randomInRange(snowSettings.minAlpha, snowSettings.maxAlpha);
|
||||
//角度.默认是360
|
||||
this.angle = Math.random(Math.PI * 2);
|
||||
//运行的距离
|
||||
this.x = this.initialX + Math.sin(this.angle);
|
||||
//x移动距离
|
||||
this.moveX = randomInRange(snowSettings.minMoveX, snowSettings.maxMoveX);
|
||||
}
|
||||
|
||||
/**
|
||||
* 绘制雪球
|
||||
* @param {[type]} canvasContext [description]
|
||||
* @return {[type]} [description]
|
||||
*/
|
||||
|
||||
Snow.prototype.render = function (canvasContext) {
|
||||
//清除路径
|
||||
//开始一个画布中的一条新路径（或者子路径的一个集合）
|
||||
canvasContext.beginPath();
|
||||
//用来填充路径的当前的颜色，白色的雪球
|
||||
canvasContext.fillStyle = "rgba(255, 255, 255, " + this.alpha + ")";
|
||||
//一个中心点和半径，为一个画布的当前子路径添加一条弧线
|
||||
//坐标，圆，沿着圆指定弧的开始点和结束点的一个角度
|
||||
//弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历
|
||||
canvasContext.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
|
||||
//关闭子路径
|
||||
canvasContext.closePath();
|
||||
//fill() 方法使用 fillStyle 属性所指定的颜色、渐变和模式来填充当前路径
|
||||
canvasContext.fill();
|
||||
};
|
||||
|
||||
Snow.prototype.update = function () {
|
||||
this.y += this.speedY;
|
||||
if (this.y > this.snowSettings.maxY) {
|
||||
this.y -= this.snowSettings.maxY;
|
||||
}
|
||||
this.angle += this.speedX;
|
||||
if (this.angle > Math.PI * 2) {
|
||||
this.angle -= Math.PI * 2;
|
||||
}
|
||||
//?
|
||||
};
|
||||
|
||||
/**
|
||||
* 随机处理
|
||||
* @param {[type]} min [description]
|
||||
* @param {[type]} max [description]
|
||||
* @return {[type]} [description]
|
||||
*/
|
||||
function randomInRange(min, max) {
|
||||
var random = Math.random() * (max - min) + min;
|
||||
return random;
|
||||
}
|
||||
Loading…
Reference in New Issue