Skip to content

libai / guodong

Go to a project
Commit e1fa4c30 by libai
Options

测试

parent 93a34000
Inline Side-by-side
Showing with 619 additions and 102 deletions
gzh/css/index.css
......@@ -1149,7 +1149,100 @@
position: fixed;
width: 10rem;
height: 100vh;
background: rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
}
.scale_panel {
color: #999;
position: absolute;
line-height: 18px;
top: 0px;
}
.scale_panel > span:first-child {
position: absolute;
left: -0.5rem;
font-size: 0.2rem;
}
.scale_panel > span:nth-child(2) {
position: absolute;
right: -0.5rem;
font-size: 0.2rem;
}
.scale > span {
background: linear-gradient(to right, #F6E7B3, #F0CC78);
width: 0.8rem;
height: 0.8rem;
position: absolute;
top: -0.05rem;
background: #FFFFFF;
border: 0.05rem #999 solid;
left: -0.05rem;
cursor: pointer;
font-size: 0.2rem;
text-align: center;
line-height: 0.8rem;
color: #000;
font-weight: 700;
font-size: 0.6rem;
}
.scale {
background-repeat: repeat-x;
background-position: 0 100%;
background: #F8F9FB;
border: 0.05rem solid #999;
color: #666;
line-height: 0.8rem;
width: 9rem;
height: 0.8rem;
position: relative;
text-align: center;
}
.scale > div {
background-repeat: repeat-x;
background: linear-gradient(to right, #F6E7B3, #F0CC78);
/*进度条颜色*/
width: 0px;
position: absolute;
height: 0.8rem;
width: 0;
left: 0;
bottom: 0;
}
.lanren {
margin-top: 0.5rem;
}
.lanren > li {
position: relative;
list-style: none;
font-size: 0.3rem;
}
#title {
position: absolute;
top: -0.6rem;
left: 2.3rem;
}
.nimo {
border: 0.05rem solid #fff;
border-radius: 0.1rem;
overflow: hidden;
position: relative;
width: 9rem;
margin: 0 auto;
height: 4.5rem;
}
.nimo .nimo-bg {
width: 9rem;
}
.nimo .nimo-cover {
width: 1.65rem;
position: absolute;
left: 0;
}
.shadow-content {
height: 6.1rem;
position: absolute;
top: 50%;
margin-top: -3.1rem;
left: 0.5rem;
}
gzh/css/index.less
......@@ -1176,7 +1176,114 @@
position: fixed;
width: 10rem;
height: 100vh;
background: rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
}
.scale_panel {
color: #999;
position: absolute;
line-height: 18px;
// left: 0.5rem;
top: -0px;
}
.scale_panel>span:first-child {
position: absolute;
left: -0.5rem;
font-size: 0.2rem;
}
.scale_panel>span:nth-child(2) {
position: absolute;
right: -0.5rem;
font-size: 0.2rem;
}
.scale>span {
background: linear-gradient(to right, #F6E7B3, #F0CC78);
width: 0.8rem;
height: 0.8rem;
position: absolute;
top: -0.05rem;
background: #FFFFFF;
border: 0.05rem #999 solid;
left: -0.05rem;
cursor: pointer;
font-size: 0.2rem;
text-align: center;
line-height: 0.8rem;
color: #000;
font-weight: 700;
font-size: 0.6rem;
}
.scale {
background-repeat: repeat-x;
background-position: 0 100%;
// background-image: linear-gradient(to right, #08D7F2 0%, #2BF06A 50%, #2BF06A 50%, #FC6076 100%);
background:#F8F9FB;
border: 0.05rem solid #999;
// border-left: 1px #83BBD9 solid;
color: #666;
line-height: 0.8rem;
width: 9rem;
height: 0.8rem;
position: relative;
text-align: center;
// border-radius: 0.2rem;
}
.scale>div {
background-repeat: repeat-x;
background: linear-gradient(to right, #F6E7B3, #F0CC78);
/*进度条颜色*/
width: 0px;
position: absolute;
height: 0.8rem;
width: 0;
left: 0;
bottom: 0;
}
.lanren{
margin-top: 0.5rem;
}
.lanren>li {
position: relative;
list-style: none;
font-size: 0.3rem;
}
#title {
position: absolute;
top: -0.6rem;
left: 2.3rem;
}
.nimo{
border: 0.05rem solid #fff;
border-radius: 0.1rem;
overflow: hidden;
position: relative;
width: 9rem;
margin: 0 auto;
height: 4.5rem;
}
.nimo .nimo-bg{
width: 9rem;
}
.nimo .nimo-cover{
width: 1.65rem;
position: absolute;
left: 0;
}
.shadow-content{
height: 6.1rem;
position: absolute;
top: 50%;
margin-top: -3.1rem;
left: 0.5rem;
}
\ No newline at end of file
gzh/demo.html
......@@ -106,22 +106,7 @@
<body>
<!-- 可拖拽进度条 -->
<div class="nimo">
<img class="nimo-bg" src="" alt="">
<img class="nimo-cover" src="" alt="">
</div>
<ul class="lanren">
<li>
<!-- <span id="title">0</span> -->
<div class="scale_panel">
<div class="scale" id="bar">
<div></div>
<span id="btn"></span>
</div>
</div>
</li>
</ul>
<script src="lib/jquery-3.1.1.min.js"></script>
<script>
var myPos
......
gzh/login.html
......@@ -32,12 +32,30 @@
<div class="login-btn">登录</div>
</div>
</div>
<!-- <div class="yanzheng-shadow">
<img src="" alt="">
</div> -->
<div style="display: none;" class="yanzheng-shadow">
<div class="shadow-content">
<div class="nimo">
<img class="nimo-bg" src="" alt="">
<img class="nimo-cover" src="" alt="">
</div>
<ul class="lanren">
<li>
<!-- <span id="title">0</span> -->
<div class="scale_panel">
<div class="scale" id="bar">
向右滑动滑块填充拼图
<div></div>
<span id="btn">→</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
<script src="lib/jquery-3.1.1.min.js"></script>w
<script src="lib/jquery-3.1.1.min.js"></script>
<script src="lib/fingerprint2.js"></script>
<script src="layer-v3.1.0/layer/layer.js"></script>
<script>
......@@ -47,6 +65,78 @@
//$ip = 'https://zhibo.lvdou66.com/87server/'
// $ip = 'https://zhibo.lvdou66.com/';
cdn = 'http://zhibocdn.ishuaji.cn/comm';
var myPos
var myId
// 进度条代码
var scale = function (btn, bar, title) {
this.btn = document.getElementById(btn);
this.bar = document.getElementById(bar);
this.title = document.getElementById(title);
this.step = this.bar.getElementsByTagName("div")[0];
this.init();
};
scale.prototype = {
init: function () {
var f = this, g = document, b = window, m = Math;
f.btn.ontouchstart = function (e) {
var x = (e || b.event).touches[0].clientX;
var l = this.offsetLeft;
var max = f.bar.offsetWidth - this.offsetWidth;
g.ontouchmove = function (e) {
var thisX = (e || b.event).touches[0].clientX;
var to = m.min(max, m.max(-2, l + (thisX - x)));
f.btn.style.left = to + 'px';
f.ondrag(m.round(m.max(0, to / max) * 100), to);
b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
};
g.ontouchend = new Function('this.οnmοusemοve=null');
};
},
ondrag: function (pos, x) {
this.step.style.width = Math.max(0, x) + 'px';
// this.title.innerHTML = pos + '%';
myPos=pos
$(".nimo-cover").css("left",pos+"%")
},
}
new scale('btn', 'bar', 'title');
$("#btn").on("touchend",function(){
$.ajax({
url:'http://openapi.lvdou66.com/captcha/slide/check.html',
data:{
data:myId+myPos*6,
checktype:2,
pkg:'gzh'
},
success:function(msg){
var data=JSON.parse(msg);
if(data.code==1){
$(".yanzheng-shadow").fadeOut(350)
layer.msg("验证码已发送")
try{
$(".code-btn").text('60s后获取').css("background", "#e5e5e5").attr("disabled", true);
eTime = 60
clearInterval(codeTime)
codeTime = setInterval(function () {
eTime--
if (eTime == 0) {
clearInterval(codeTime)
$(".code-btn").css("background", 'linear-gradient(to right, #FAE7AC, #F7CA6A)').attr("disabled", false);
$(".code-btn").text('获取验证码')
return;
}
$(".code-btn").text('' + eTime + 's后获取')
}, 1000)
}catch (e) {
}
}else{
layer.msg("模块验证错误")
}
}
})
})
var codeTime = null
var eTime
var fp = new Fingerprint2();
......@@ -75,37 +165,54 @@
$(".code-btn").on("click", function () {
if ($(".login-phone-ipt").val().length > 10) {
$(".yanzheng-shadow").fadeIn(350)
$.ajax({
url: $ip + 'wx/phonelogincap.html',
type: "post",
data: {
phone: $(".login-phone-ipt").val()
url:'http://openapi.lvdou66.com/captcha/slide/webget.html',
data:{
phone:$(".login-phone-ipt").val()
},
success: function (msg) {
type:"post",
success:function(msg){
var data = JSON.parse(msg)
console.log('获取验证码', data)
if (data.code == 1) {
try{
$(".code-btn").text('60s后获取').css("background", "#e5e5e5").attr("disabled", true);
eTime = 60
clearInterval(codeTime)
codeTime = setInterval(function () {
eTime--
if (eTime == 0) {
clearInterval(codeTime)
$(".code-btn").css("background", 'linear-gradient(to right, #FAE7AC, #F7CA6A)').attr("disabled", false);
$(".code-btn").text('获取验证码')
return;
}
$(".code-btn").text('' + eTime + 's后获取')
}, 1000)
}catch (e) {
}
} else {
layer.msg(data.msg)
}
$(".nimo .nimo-bg").attr("src",""+data.background+"")
$(".nimo .nimo-cover").attr("src",""+data.cover+"")
var myTop=Math.floor((data.y/66.66)*100)/100
$(".nimo-cover").css("top",myTop+"rem")
myId=data.id
}
})
// $.ajax({
// url: $ip + 'wx/phonelogincap.html',
// type: "post",
// data: {
// phone: $(".login-phone-ipt").val()
// },
// success: function (msg) {
// var data = JSON.parse(msg)
// console.log('获取验证码', data)
// if (data.code == 1) {
// try{
// $(".code-btn").text('60s后获取').css("background", "#e5e5e5").attr("disabled", true);
// eTime = 60
// clearInterval(codeTime)
// codeTime = setInterval(function () {
// eTime--
// if (eTime == 0) {
// clearInterval(codeTime)
// $(".code-btn").css("background", 'linear-gradient(to right, #FAE7AC, #F7CA6A)').attr("disabled", false);
// $(".code-btn").text('获取验证码')
// return;
// }
// $(".code-btn").text('' + eTime + 's后获取')
// }, 1000)
// }catch (e) {
// }
// } else {
// layer.msg(data.msg)
// }
// }
// })
} else {
layer.msg("请输入手机号")
}
......
gzh/login2.html
......@@ -32,7 +32,29 @@
<div class="login-btn">登录</div>
</div>
</div>
<div style="display: none;" class="yanzheng-shadow">
<div class="shadow-content">
<div class="nimo">
<img class="nimo-bg" src="" alt="">
<img class="nimo-cover" src="" alt="">
</div>
<ul class="lanren">
<li>
<!-- <span id="title">0</span> -->
<div class="scale_panel">
<div class="scale" id="bar">
向右滑动滑块填充拼图
<div></div>
<span id="btn">→</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
<script src="lib/jquery-3.1.1.min.js"></script>
<script src="lib/fingerprint2.js"></script>
<script src="layer-v3.1.0/layer/layer.js"></script>
......@@ -43,6 +65,78 @@
//$ip = 'https://zhibo.lvdou66.com/87server/'
// $ip = 'https://zhibo.lvdou66.com/';
cdn = 'http://zhibocdn.ishuaji.cn/comm';
var myPos
var myId
// 进度条代码
var scale = function (btn, bar, title) {
this.btn = document.getElementById(btn);
this.bar = document.getElementById(bar);
this.title = document.getElementById(title);
this.step = this.bar.getElementsByTagName("div")[0];
this.init();
};
scale.prototype = {
init: function () {
var f = this, g = document, b = window, m = Math;
f.btn.ontouchstart = function (e) {
var x = (e || b.event).touches[0].clientX;
var l = this.offsetLeft;
var max = f.bar.offsetWidth - this.offsetWidth;
g.ontouchmove = function (e) {
var thisX = (e || b.event).touches[0].clientX;
var to = m.min(max, m.max(-2, l + (thisX - x)));
f.btn.style.left = to + 'px';
f.ondrag(m.round(m.max(0, to / max) * 100), to);
b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
};
g.ontouchend = new Function('this.οnmοusemοve=null');
};
},
ondrag: function (pos, x) {
this.step.style.width = Math.max(0, x) + 'px';
// this.title.innerHTML = pos + '%';
myPos=pos
$(".nimo-cover").css("left",pos+"%")
},
}
new scale('btn', 'bar', 'title');
$("#btn").on("touchend",function(){
$.ajax({
url:'http://openapi.lvdou66.com/captcha/slide/check.html',
data:{
data:myId+myPos*6,
checktype:2,
pkg:'gzh'
},
success:function(msg){
var data=JSON.parse(msg);
if(data.code==1){
$(".yanzheng-shadow").fadeOut(350)
layer.msg("验证码已发送")
try{
$(".code-btn").text('60s后获取').css("background", "#e5e5e5").attr("disabled", true);
eTime = 60
clearInterval(codeTime)
codeTime = setInterval(function () {
eTime--
if (eTime == 0) {
clearInterval(codeTime)
$(".code-btn").css("background", 'linear-gradient(to right, #FAE7AC, #F7CA6A)').attr("disabled", false);
$(".code-btn").text('获取验证码')
return;
}
$(".code-btn").text('' + eTime + 's后获取')
}, 1000)
}catch (e) {
}
}else{
layer.msg("模块验证错误")
}
}
})
})
var codeTime = null
var eTime
var fp = new Fingerprint2();
......@@ -68,39 +162,57 @@
// }
// })
// }
$(".code-btn").on("click", function () {
if ($(".login-phone-ipt").val().length > 10) {
$(".yanzheng-shadow").fadeIn(350)
$.ajax({
url: $ip + 'wx/phonelogincap.html',
type: "post",
data: {
phone: $(".login-phone-ipt").val()
url:'http://openapi.lvdou66.com/captcha/slide/webget.html',
data:{
phone:$(".login-phone-ipt").val()
},
success: function (msg) {
type:"post",
success:function(msg){
var data = JSON.parse(msg)
console.log('获取验证码', data)
if (data.code == 1) {
try{
$(".code-btn").text('60s后获取').css("background", "#e5e5e5").attr("disabled", true);
eTime = 60
clearInterval(codeTime)
codeTime = setInterval(function () {
eTime--
if (eTime == 0) {
clearInterval(codeTime)
$(".code-btn").css("background", 'linear-gradient(to right, #FAE7AC, #F7CA6A)').attr("disabled", false);
$(".code-btn").text('获取验证码')
return;
}
$(".code-btn").text('' + eTime + 's后获取')
}, 1000)
}catch (e) {
}
} else {
layer.msg(data.msg)
}
$(".nimo .nimo-bg").attr("src",""+data.background+"")
$(".nimo .nimo-cover").attr("src",""+data.cover+"")
var myTop=Math.floor((data.y/66.66)*100)/100
$(".nimo-cover").css("top",myTop+"rem")
myId=data.id
}
})
// $.ajax({
// url: $ip + 'wx/phonelogincap.html',
// type: "post",
// data: {
// phone: $(".login-phone-ipt").val()
// },
// success: function (msg) {
// var data = JSON.parse(msg)
// console.log('获取验证码', data)
// if (data.code == 1) {
// try{
// $(".code-btn").text('60s后获取').css("background", "#e5e5e5").attr("disabled", true);
// eTime = 60
// clearInterval(codeTime)
// codeTime = setInterval(function () {
// eTime--
// if (eTime == 0) {
// clearInterval(codeTime)
// $(".code-btn").css("background", 'linear-gradient(to right, #FAE7AC, #F7CA6A)').attr("disabled", false);
// $(".code-btn").text('获取验证码')
// return;
// }
// $(".code-btn").text('' + eTime + 's后获取')
// }, 1000)
// }catch (e) {
// }
// } else {
// layer.msg(data.msg)
// }
// }
// })
} else {
layer.msg("请输入手机号")
}
......@@ -118,8 +230,8 @@
var data=JSON.parse(msg)
console.log(data);
if(data.code==1){
// localStorage.uid=data.uid
// localStorage.token=data.token
localStorage.uid=data.uid
localStorage.token=data.token
window.location.href='https://activity.ishuaji.cn/active2020/subsidy/index.html?uid='+data.uid+'&token='+data.token+'';
// $.cookie("tbb", data.token, {expires: 30, path: "/"});
// $.cookie("ukk", data.uid, {expires: 30, path: "/"});
......
gzh/login3.html
......@@ -32,7 +32,29 @@
<div class="login-btn">登录</div>
</div>
</div>
<div style="display: none;" class="yanzheng-shadow">
<div class="shadow-content">
<div class="nimo">
<img class="nimo-bg" src="" alt="">
<img class="nimo-cover" src="" alt="">
</div>
<ul class="lanren">
<li>
<!-- <span id="title">0</span> -->
<div class="scale_panel">
<div class="scale" id="bar">
向右滑动滑块填充拼图
<div></div>
<span id="btn">→</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
<script src="lib/jquery-3.1.1.min.js"></script>
<script src="lib/fingerprint2.js"></script>
<script src="layer-v3.1.0/layer/layer.js"></script>
......@@ -43,6 +65,78 @@
//$ip = 'https://zhibo.lvdou66.com/87server/'
// $ip = 'https://zhibo.lvdou66.com/';
cdn = 'http://zhibocdn.ishuaji.cn/comm';
var myPos
var myId
// 进度条代码
var scale = function (btn, bar, title) {
this.btn = document.getElementById(btn);
this.bar = document.getElementById(bar);
this.title = document.getElementById(title);
this.step = this.bar.getElementsByTagName("div")[0];
this.init();
};
scale.prototype = {
init: function () {
var f = this, g = document, b = window, m = Math;
f.btn.ontouchstart = function (e) {
var x = (e || b.event).touches[0].clientX;
var l = this.offsetLeft;
var max = f.bar.offsetWidth - this.offsetWidth;
g.ontouchmove = function (e) {
var thisX = (e || b.event).touches[0].clientX;
var to = m.min(max, m.max(-2, l + (thisX - x)));
f.btn.style.left = to + 'px';
f.ondrag(m.round(m.max(0, to / max) * 100), to);
b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
};
g.ontouchend = new Function('this.οnmοusemοve=null');
};
},
ondrag: function (pos, x) {
this.step.style.width = Math.max(0, x) + 'px';
// this.title.innerHTML = pos + '%';
myPos=pos
$(".nimo-cover").css("left",pos+"%")
},
}
new scale('btn', 'bar', 'title');
$("#btn").on("touchend",function(){
$.ajax({
url:'http://openapi.lvdou66.com/captcha/slide/check.html',
data:{
data:myId+myPos*6,
checktype:2,
pkg:'gzh'
},
success:function(msg){
var data=JSON.parse(msg);
if(data.code==1){
$(".yanzheng-shadow").fadeOut(350)
layer.msg("验证码已发送")
try{
$(".code-btn").text('60s后获取').css("background", "#e5e5e5").attr("disabled", true);
eTime = 60
clearInterval(codeTime)
codeTime = setInterval(function () {
eTime--
if (eTime == 0) {
clearInterval(codeTime)
$(".code-btn").css("background", 'linear-gradient(to right, #FAE7AC, #F7CA6A)').attr("disabled", false);
$(".code-btn").text('获取验证码')
return;
}
$(".code-btn").text('' + eTime + 's后获取')
}, 1000)
}catch (e) {
}
}else{
layer.msg("模块验证错误")
}
}
})
})
var codeTime = null
var eTime
var fp = new Fingerprint2();
......@@ -68,39 +162,57 @@
}
})
}
$(".code-btn").on("click", function () {
if ($(".login-phone-ipt").val().length > 10) {
$(".yanzheng-shadow").fadeIn(350)
$.ajax({
url: $ip + 'wx/phonelogincap.html',
type: "post",
data: {
phone: $(".login-phone-ipt").val()
url:'http://openapi.lvdou66.com/captcha/slide/webget.html',
data:{
phone:$(".login-phone-ipt").val()
},
success: function (msg) {
type:"post",
success:function(msg){
var data = JSON.parse(msg)
console.log('获取验证码', data)
if (data.code == 1) {
try{
$(".code-btn").text('60s后获取').css("background", "#e5e5e5").attr("disabled", true);
eTime = 60
clearInterval(codeTime)
codeTime = setInterval(function () {
eTime--
if (eTime == 0) {
clearInterval(codeTime)
$(".code-btn").css("background", 'linear-gradient(to right, #FAE7AC, #F7CA6A)').attr("disabled", false);
$(".code-btn").text('获取验证码')
return;
}
$(".code-btn").text('' + eTime + 's后获取')
}, 1000)
}catch (e) {
}
} else {
layer.msg(data.msg)
}
$(".nimo .nimo-bg").attr("src",""+data.background+"")
$(".nimo .nimo-cover").attr("src",""+data.cover+"")
var myTop=Math.floor((data.y/66.66)*100)/100
$(".nimo-cover").css("top",myTop+"rem")
myId=data.id
}
})
// $.ajax({
// url: $ip + 'wx/phonelogincap.html',
// type: "post",
// data: {
// phone: $(".login-phone-ipt").val()
// },
// success: function (msg) {
// var data = JSON.parse(msg)
// console.log('获取验证码', data)
// if (data.code == 1) {
// try{
// $(".code-btn").text('60s后获取').css("background", "#e5e5e5").attr("disabled", true);
// eTime = 60
// clearInterval(codeTime)
// codeTime = setInterval(function () {
// eTime--
// if (eTime == 0) {
// clearInterval(codeTime)
// $(".code-btn").css("background", 'linear-gradient(to right, #FAE7AC, #F7CA6A)').attr("disabled", false);
// $(".code-btn").text('获取验证码')
// return;
// }
// $(".code-btn").text('' + eTime + 's后获取')
// }, 1000)
// }catch (e) {
// }
// } else {
// layer.msg(data.msg)
// }
// }
// })
} else {
layer.msg("请输入手机号")
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment