效果图：
移动端
appliedPosition.html 在右键文件名在浏览器中直接打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>应聘信息表</title>
</head>
<link href="https://cdn.bootcss.com/jquery-toast-plugin/1.3.2/jquery.toast.css" rel="stylesheet">
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-toast-plugin/1.3.2/jquery.toast.min.js"></script>
<body>
<div class="recruit">
<div class="nav">
<img src="./images/left_icon.png" alt="" class="left_icon" id="left_icon">
<p class="nav_title">应聘信息表</p>
</div>
<div class="content">
<div class="header">
<div class="man">
<div class="head" id="show_man">
<img src="./images/man_head.png" alt="" class="man_head">
<img src="./images/select_icon.png" alt="" class="select_icon" id="select_man" style="display: block">
</div>
<p class="gender_man">男</p>
</div>
<div class="woman">
<div class="head" id="show_woman">
<img src="./images/woman_head.png" alt="" class="woman_head">
<img src="./images/select_icon.png" alt="" class="select_icon" id="select_woman" style="display: none">
</div>
<p class="gender">女111</p>
</div>
</div>
<div class="main">
<div class="main_con">
<div class="user_form">
<div class="form_title">
<p class="name">本人姓名</p>
<p class="required_icon">*</p>
</div>
<div class="name_input" id="name_input">
<input type="text" maxlength="10" name="" id="user_name" placeholder="建议填写真实姓名" class="input">
</div>
</div>
<div class="user_form">
<div class="form_title">
<p class="name">出生年月</p>
<p class="required_icon">*</p>
</div>
<div class="birth_input" id="birth_input">
<div class="birth_con" id="birth_con">
<input class="birth_text" placeholder="选择你的出生年月" readonly="readonly" id="birth_select"></input>
<img src="./images/down_icon.png" alt="" class="down_icon">
</div>
</div>
</div>
<div class="user_form">
<div class="form_title">
<p class="name">联系电话</p>
<p class="required_icon">*</p>
</div>
<div class="phone_input" id="phone_input">
<input type="number" oninput="if(value.length>11) value=value.slice(0,11)" name="" id="phone"
placeholder="请输入您的手机号" class="phone_val">
</div>
</div>
<div class="verification_code">
<div class="form_title">
<p class="name">验证码验证</p>
<p class="required_icon">*</p>
<p class="error_tips" id="error_tips" style="display: none">(请输入有效的手机号码)</p>
</div>
<div class="phone">
<div class="phone_code" id="phone_code">
<input type="number" name="" placeholder="请输入手机验证码" id="phone_num" class="input"
oninput="if(value.length>11) value=value.slice(0,11)">
</div>
<button class="code" id="code" type="button">
<p class="code_text">获取验证码</p>
</button>
</div>
</div>
<div class="user_introduce">
<p class="name">个人介绍</p>
<div class="text_area">
<textarea type="text" cols="20" rows="5" class="textarea" placeholder="请填写你的个人介绍"
style="resize: none;"></textarea>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="tips">
<span class="line"></span>
<span class="tips_text">使用生活圈APP可查看进度及管理简历</span>
<span class="line"></span>
</div>
<button type="button" class="button" id="submit">
<p class="button_text">立即投递</p>
</button>
<div class="footer_tips">
<p class="tips_left">投递表示已同意
<span class="tips_right">《生活圈使用协议》和《生活圈隐私协议》</span>
</p>
</div>
</div>
</div>
</div>
</body>
<script>
//一进页面请求数据接口
var birthText = ""
var phone = ""
var isPhone = false
var isBirth = false
// $(function () {
// console.log('请求数据')
// $.ajax({
// method: 'post',
// url: '',
// data: phone,
// contentType: false,
// processData: false,
// success: function (res) {
// console.log('res')
birthText = ""
phone = ""
// }
// });
// })
//有生日回填
if (birthText) {
isBirth = true
$(".birth_con").remove();
$(".birth_input").css({
background: '#f6f7f8',
paddingRight: '5px',
color: '#999999',
border: 'none',
textIndent: '20px',
lineHeight: '50px'
})
$(".birth_input").text(birthText)
}
//有联系电话回填
if (phone) {
isPhone = true
$('.verification_code').remove();
$('.phone_val').attr('disabled', true);
$('.phone_val').val(phone);
$('.phone_text').css({
color: '#aaaaaa'
})
$('.phone_val').css({
background: '#f6f7f8',
paddingRight: '5px',
color: '#999999'
})
$(".phone_input").css({
border: 'none'
})
}
var gender = {
value: '男'
}
//点击返回
$("#left_icon").click(function () {
window.history.go(-1)
})
//选择男
$("#show_man").click(function () {
$("#select_man").show();
$("#select_woman").hide();
console.log('男')
gender = {
value: '男'
}
});
//选择女
$("#show_woman").click(function () {
$("#select_man").hide();
$("#select_woman").show();
console.log('女')
gender = {
value: '女'
}
});
//点击姓名
$("#name_input").click(function () {
$('#name_input').removeClass('not_name');
$("#name_input").addClass('name_input');
$('#submit').removeClass('not_button');
$("#submit").addClass('button');
})
//点击出生年月
$("#birth_input").click(function () {
console.log('点击12232')
//birthLength==0表示没有input
var birthLength = $("#birth_con>input").length
if (birthLength == 0) {
$('#birth_input').removeClass('not_birth');
$("#birth_input").addClass('birth_input');
$('#submit').removeClass('not_button');
$("#submit").addClass('button');
}
})
//点击电话框
$("#phone_input").click(function () {
$('#phone_input').removeClass('input_phone');
$("#phone_input").addClass('name_input');
$('#submit').removeClass('not_button');
$('#birth_input').removeClass('not_birth');
$("#birth_input").addClass('birth_input');
$("#submit").addClass('button');
$("#error_tips").hide();
})
//点击填写验证码框
$("#phone_code").click(function () {
$("#phone_code").removeClass("not_code")
$("#phone_code").addClass("phone_code")
$('#submit').removeClass('not_button');
$("#submit").addClass('button');
})
//点击获取验证码
$("#code").click(function () {
var phone = $("#phone").val()
var phoneCode = $("#phone_num").val() //验证码
var phoneStr = /^1\d{10}$/;
if (!phoneStr.test(phone)) {
console.log(phone, '输入的无效手机号')
$("#error_tips").show();
$('#phone_input').removeClass('phone_input');
$("#phone_input").addClass('input_phone');
} else {
console.log(phone, '获取验证码')
$('#phone_input').removeClass('input_phone');
$("#phone_input").addClass('name_input');
$("#error_tips").hide();
timekeeping()
//获取验证码接口
// $.ajax({
// method: 'post',
// url: '',
// data: phone,
// contentType: false,
// processData: false,
// success: function (res) {
// console.log('res')
// }
// });
}
});
//倒计时
function timekeeping() {
$('#code').attr('disabled', false);
let count = 6;
const countDown = setInterval(() => {
if (count === 0) {
console.log('重新发送')
$('#code').attr('disabled', false);
$('#code').text('重新发送').removeAttr('disabled');
$('#code').css({
borderStyle: 'solid',
borderColor: '#1283ff',
borderWidth: '1px',
color: '#1283FF',
background: "#ffffff",
fontSize: '15px'
});
clearInterval(countDown);
} else {
// console.log('重新获取')
$('#code').attr('disabled', true);
$('#code').css({
borderStyle: 'solid',
borderColor: '#e5e5e5',
borderWidth: '1px',
color: '#666666',
background: "#ffffff",
textAlign: 'center',
fontSize: '15px'
});
$('#code').text('重新获取' + `(${count}s)`);
}
count--;
}, 1000);
}
//点击立即投递
$("#submit").click(function () {
var phoneStr = /^1\d{10}$/;
var userName = $("#user_name").val()
var phoneCode = $("#phone_num").val()
var textarea = $(".textarea").val()
var phone = phone ? phone : $("#phone").val()
var birth = birthText ? birthText : $("#birth_con").text()
console.log(birthText, isBirth, 'isBirth')
var birthLength = $("#birth_con>input").length
console.log(birthLength, 'birthLength')
if (!userName || userName == '') {
console.log('请输入名字')
// $.toast({
// text: "请输入名字",
// showHideTransition: 'slide',
// allowToastClose: false,
// hideAfter: 3000,
// stack: 5,
// progressBar: false,
// position:
// 'mid-center'
// })
$('#name_input').removeClass('name_input');
$("#name_input").addClass('not_name');
$('#submit').removeClass('button');
$("#submit").addClass('not_button');
} else if (!birth || birth == '' || birthLength != 0) {
console.log('请输入出生年月')
$('#birth_input').removeClass('birth_input');
$("#birth_input").addClass('not_birth');
$('#submit').removeClass('button');
$("#submit").addClass('not_button')
} else if (!phone || phone == '') {
$('#phone_input').removeClass('phone_input');
$("#phone_input").addClass('input_phone');
$('#submit').removeClass('button');
$("#submit").addClass('not_button');
$("#error_tips").show();
console.log('请输入有效手机号')
} else if (!isPhone && (!phoneCode || phoneCode == '')) {
$("#phone_code").removeClass("phone_code")
$("#phone_code").addClass("not_code")
$('#submit').removeClass('button');
$("#submit").addClass('not_button');
console.log('请输入验证码')
} else {
// $('#submit').removeClass('button');
// $("#submit").addClass('not_button');
console.log(gender.value, birth, userName, phone, textarea, '点击立即投递')
if (gender.value && birth && userName && phone) {
location.href = './successPage.html?role=1'
//判断验证码是否正确提交
// $.ajax({
// method: 'post',
// url: '',
// data: {
// gender: gender.value,
// name: userName,
// phone: phone,
// textarea: textarea,
// birthText: birthText,
// },
// contentType: false,
// processData: false,
// success: function (res) {
// console.log('res')
// }
// });
}
}
});
window.onload = function () {
console.log('点击选择生日')
// 格式
new Jdate({
el: '#birth_con',
format: 'YYYY-MM',
beginYear: 1950,
endYear: 2100
})
$('#birth_input').removeClass('not_birth');
$("#birth_input").addClass('birth_input');
}
</script>
<script type="text/javascript" src="jdate.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.recruit {
width: 100%;
overflow: hidden;
}
input::-webkit-input-placeholder {
font-size: 15px;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 400;
text-align: left;
color: #999999;
}
.nav {
width: 100%;
height: 44px;
position: relative;
border-bottom: solid 1px #E5E5E5;
}
.left_icon {
width: 20px;
height: 20px;
position: absolute;
top: 12px;
left: 0;
margin-left: 13px;
}
.nav_title {
height: 44px;
font-size: 18px;
font-family: PingFangSC, PingFangSC-Medium;
font-weight: 500;
text-align: center;
color: #333333;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
line-height: 44px;
}
.content {
width: 85%;
margin-left: 7.5%;
}
.header {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px
}
.man_head {
width: 66px;
height: 66px;
border-radius: 50%;
}
.woman_head {
width: 66px;
height: 66px;
border-radius: 50%;
}
.gender {
font-size: 16px;
font-family: PingFangSC, PingFangSC-Medium;
font-weight: 500;
color: #333333;
text-align: center;
margin-top: 13px;
}
.gender_man {
font-size: 16px;
font-family: PingFangSC, PingFangSC-Medium;
font-weight: 500;
color: #333333;
text-align: center;
margin-top: 13px;
}
.man {
margin-right: 49px;
}
.head {
width: 66px;
height: 66px;
position: relative;
}
.select_icon {
width: 16px;
height: 16px;
border-radius: 50%;
position: absolute;
bottom: -7px;
left: 38%;
border: solid 0.5px #ffffff;
}
.main {
width: 100%;
margin-top: 20px;
}
.main_con {
width: 100%;
}
.form_title {
display: flex;
justify-content: start;
align-items: center;
}
.name {
font-size: 16px;
font-family: PingFangSC, PingFangSC-Medium;
font-weight: 500;
text-align: left;
color: #333333;
}
.required_icon {
color: red;
}
.error_tips {
font-size: 13px;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 400;
color: #ff1d28;
margin-left: 4px;
}
.name_input {
width: 100%;
height: 49px;
border: 1px solid #e5e5e5;
border-radius: 4px;
margin-top: 10px;
}
.not_name {
width: 100%;
height: 49px;
border: 1px solid #ff1d28;
border-radius: 4px;
margin-top: 10px;
}
.input {
width: 99%;
height: 49px;
border: none;
outline: none;
font-size: 15px;
text-indent: 20px;
border-radius: 4px;
}
.input_phone {
width: 100%;
height: 49px;
border: 1px solid #FF1D28;
border-radius: 4px;
margin-top: 10px;
}
.user_form {
margin-top: 16px;
}
.verification_code {
margin-top: 16px;
}
.birth_input {
width: 100%;
height: 49px;
border: 1px solid #e5e5e5;
border-radius: 4px;
margin-top: 10px;
}
.not_birth {
width: 100%;
height: 49px;
border: 1px solid #FF1D28;
border-radius: 4px;
margin-top: 10px;
}
.down_icon {
width: 10px;
height: 8px;
margin-right: 20px;
}
.birth_con {
width: 100%;
height: 49px;
display: flex;
justify-content: space-between;
align-items: center;
line-height: 49px;
text-indent: 20px;
}
.not_birth {
width: 100%;
height: 49px;
border: 1px solid #FF1D28;
border-radius: 4px;
margin-top: 10px;
}
.birth_text {
flex: 7;
height: 49px;
border: none;
outline: none;
font-size: 15px;
text-indent: 20px;
border-radius: 4px;
}
.phone {
width: 100%;
height: 49px;
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.phone_val {
width: 99%;
height: 49px;
border: none;
outline: none;
font-size: 15px;
text-indent: 20px;
border-radius: 4px;
}
.phone_input {
width: 100%;
height: 49px;
border: 1px solid #e5e5e5;
border-radius: 4px;
margin-top: 10px;
}
.phone_code {
flex: 7;
height: 49px;
border: 1px solid #e5e5e5;
border-radius: 4px;
margin-top: 10px;
margin-right: 8px;
background: #ffffff;
outline: none;
}
.not_code {
flex: 8;
height: 49px;
border: 1px solid #FF1D28;
border-radius: 4px;
margin-top: 10px;
margin-right: 8px;
}
.code {
height: 49px;
flex: 4;
border: 1px solid #1283ff;
border-radius: 4px;
margin-top: 9px;
display: flex;
justify-content: center;
align-items: center;
outline: none;
background: #ffffff;
}
.code_text {
font-size: 15px;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 400;
text-align: center;
color: #1283ff;
border: none;
outline: none;
background: #ffffff;
}
.user_introduce {
margin-top: 16px;
}
.text_area {
width: 100%;
height: 108px;
border: 1px solid #e5e5e5;
border-radius: 4px;
margin-top: 10px;
padding: 16px 0px 0 0;
}
.textarea {
width: 90%;
margin-left: 5%;
border: none;
outline: none;
font-size: 15px;
text-indent: 10px;
border-radius: 4px;
padding: 5px 0;
}
.footer {
margin-top: 30px;
padding-bottom: 80px;
}
.tips {
display: flex;
justify-content: center;
align-items: center;
}
.tips_text {
font-size: 13px;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 400;
text-align: center;
color: #1283ff;
padding: 0 10px;
}
.line {
width: 37px;
height: 1px;
background: #1283ff;
}
.button {
width: 100%;
height: 48px;
background: linear-gradient(90deg, #50a3ff, #1283ff);
border-radius: 4px;
margin-top: 12px;
line-height: 48px;
border: none;
outline: none;
}
.not_button {
width: 100%;
height: 48px;
background: #e2e2e2;
border-radius: 4px;
margin-top: 12px;
line-height: 48px;
border: none;
outline: none;
}
.button_text {
font-size: 16px;
font-family: PingFangSC, PingFangSC-Medium;
font-weight: 500;
text-align: center;
color: #ffffff;
}
.footer_tips {
display: flex;
align-items: center;
margin-top: 12px;
}
.tips_left {
font-size: 13px;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 400;
color: #999999;
line-height: 18px;
text-align: left;
}
.tips_right {
font-size: 13px;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 400;
color: #5D7EB9;
line-height: 18px;
}
</style>
</html>
jdate.min.js
!function (e, t) { "object" == typeof exports && "undefined" != typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define(t) : (e = e || self).Jdate = t() }(this, function () { "use strict"; !function (e, t) { void 0 === t && (t = {}); var a = t.insertAt; if (e && "undefined" != typeof document) { var n = document.head || document.getElementsByTagName("head")[0], i = document.createElement("style"); i.type = "text/css", "top" === a && n.firstChild ? n.insertBefore(i, n.firstChild) : n.appendChild(i), i.styleSheet ? i.styleSheet.cssText = e : i.appendChild(document.createTextNode(e)) } }("ul{margin:0;padding:0}li{list-style-type:none}.jdate-container{font-size:20px;color:#333;text-align:center}.jdate-container header{position:relative;line-height:60px;font-size:18px;border-bottom:1px solid #e0e0e0}.jdate-container .jdate-mask{position:fixed;width:100%;height:100%;top:0;left:0;background:#000;opacity:.4;z-index:999}.jdate-container .jdate-panel{position:fixed;bottom:0;left:0;width:100%;height:273px;z-index:1000;background:#fff;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-iteration-count:1;animation-iteration-count:1}.jdate-container .jdate-btn{position:absolute;left:0;top:0;height:100%;padding:0 15px;color:#666;font-size:16px;cursor:pointer;-webkit-tap-highlight-color:transparent}.jdate-container .jdate-confirm{left:auto;right:0;color:#007bff}.jdate-container .jdate-content{position:relative;top:20px}.jdate-container .jdate-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.jdate-container .jdate-wrapper>div{position:relative;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;height:173px;line-height:36px;overflow:hidden;-webkit-flex-basis:-8e;-ms-flex-preferred-size:-8e;flex-basis:-8e;width:1%}.jdate-container .jdate-wrapper ul{position:absolute;left:0;top:0;width:100%;margin-top:68px}.jdate-container .jdate-wrapper li{height:36px}.jdate-container .jdate-dim{position:absolute;left:0;top:0;width:100%;height:68px;background:-o-linear-gradient(bottom,hsla(0,0%,100%,.4),hsla(0,0%,100%,.8));background:-webkit-gradient(linear, left bottom, left top, from(hsla(0, 0%, 100%, 0.4)), to(hsla(0, 0%, 100%, 0.8)));background:-o-linear-gradient(bottom, hsla(0, 0%, 100%, 0.4), hsla(0, 0%, 100%, 0.8));background:linear-gradient(0deg,hsla(0,0%,100%,.4),hsla(0,0%,100%,.8));pointer-events:none;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:10}.jdate-container .mask-top{border-bottom:1px solid #ebebeb}.jdate-container .mask-bottom{top:auto;bottom:1px;border-top:1px solid #ebebeb}.jdate-container .fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;border-radius:12px 12px 0 0}.jdate-container .fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeIn{0%{bottom:-273px;}to{bottom:0}}@keyframes fadeIn{0%{bottom:-273px}to{bottom:0}}@-webkit-keyframes fadeOut{0%{bottom:0}to{bottom:-273px;display:none}}@keyframes fadeOut{0%{bottom:0}to{bottom:-273px;display:none}}@media screen and (max-width:414px){.jdate-container{font-size:18px}}@media screen and (max-width:320px){.jdate-container{font-size:15px}}"); var D = void 0 !== D ? D : "undefined" != typeof jQuery ? jQuery : null, u = 36; function e (e) { if (D) { if (e && e.el) { var t = this, a = t.$(e.el); if (a && !a.bindJdate && (a.bindJdate = 1, t.extend(e), t.tap(a, function () { t.show() }), e.value)) { "input" == a.nodeName.toLowerCase() ? a.value = e.value : a.innerText = e.value; var n = e.value.replace(/-/g, "/").replace(/[^\d/:\s]/g, ""), i = new Date(n); i && "Invalid Date" != i ? a.bindDate = i : console.error("Invalid Date：" + n) } } } else console.error("jQuery is not defined") } return e.usejQuery = function (e) { D = e }, e.prototype = { constructor: e, baseData: function () { return { domId: { YYYY: "jdate-year", MM: "jdate-month", DD: "jdate-day", hh: "jdate-hour", mm: "jdate-min", ss: "jdate-sec" }, opts: { el: "", format: "YYYY-MM-DD", beginYear: 2e3, endYear: 2100, init: null, moveEnd: null, confirm: null, cancel: null, minStep: 1, trigger: "tap", lang: { title: "请选择出生年月", cancel: "", confirm: "确定", year: "年", month: "月", day: "日", hour: "时", min: "分", sec: "秒" } } } }, extend: function (e) { var t = this.baseData().opts; for (var a in t) if (t[a] && "[object Object]" == Object.prototype.toString.call(t[a])) for (var n in e[a]) t[a][n] = null == e[a][n] ? t[a][n] : e[a][n]; else t[a] = e[a] || t[a]; this.config = t }, createUI: function () { for (var e = this, t = e.baseData(), a = e.config, n = t.domId, i = a.format.split(/-|\/|\s|:/g), o = i.length, r = "", s = e.$(a.el).bindDate || new Date, d = a.lang, l = 0; l < o; l++) { var c = i[l]; if (r += '<div id="' + n[c] + '"><ul>', "YYYY" == c) for (var p = a.beginYear; p <= a.endYear; p++)r += '<li class="' + (p == s.getFullYear() ? "active" : "") + '">' + p + d.year + "</li>"; else if ("MM" == c) for (var f = 1; f <= 12; f++)r += '<li class="' + (f == s.getMonth() + 1 ? "active" : "") + '">' + (f < 10 ? "0" + f : f) + d.month + "</li>"; else if ("DD" == c) for (var u = e.bissextile(s.getFullYear(), s.getMonth() + 1), m = 1; m <= u; m++)r += '<li class="' + (m == s.getDate() ? "active" : "") + '">' + (m < 10 ? "0" + m : m) + d.day + "</li>"; else if ("hh" == c) for (var h = 0; h <= 23; h++)r += '<li class="' + (h == s.getHours() ? "active" : "") + '">' + (h < 10 ? "0" + h : h) + d.hour + "</li>"; else if ("mm" == c) for (var v = 0; v <= 59; v += a.minStep)r += '<li class="' + (v == s.getMinutes() ? "active" : "") + '">' + (v < 10 ? "0" + v : v) + d.min + "</li>"; else if ("ss" == c) for (var g = 0; g <= 59; g++)r += '<li class="' + (g == s.getSeconds() ? "active" : "") + '">' + (g < 10 ? "0" + g : g) + d.sec + "</li>"; r += "</ul></div>" } var b = '<div class="jdate-mask"></div>\n <div class="jdate-panel fadeIn">\n <header>\n <span class="jdate-btn jdate-cancel">' + d.cancel + "</span>\n " + d.title + '\n <span class="jdate-btn jdate-confirm">' + d.confirm + '</span>\n </header>\n <section class="jdate-content">\n <div class="jdate-dim mask-top"></div>\n <div class="jdate-dim mask-bottom"></div>\n <div class="jdate-wrapper">\n ' + r + "\n </div>\n </section>\n </div>", x = document.createElement("div"); x.className = "jdate-container", x.innerHTML = b, document.body.appendChild(x), e.scroll = {}; for (var j = 0; j < o; j++) { var y = n[i[j]]; e.scroll[i[j]] = y, e.slide(D("#" + y + ">ul")) } e.scroll.mm && 1 != a.minStep && D("#" + e.scroll.mm + " li").eq(Math.round(s.getMinutes() / a.minStep)).addClass("active"), D(".jdate-container ul").each(function () { var e = D(this), t = e.find(".active"); if (t.length) { var a = -t.position().top; e.animate({ top: a }, 0) } }) }, eventType: function () { var e = "ontouchend" in document; return { isTouch: e, tstart: e ? "touchstart" : "mousedown", tmove: e ? "touchmove" : "mousemove", tend: e ? "touchend" : "mouseup", tcancel: e ? "touchcancel" : "mouseleave" } }, slide: function (e) { var c = this, p = c.baseData().domId, f = c.config.lang, a = void 0, n = void 0, i = !1, o = c.eventType(); function r (e) { var t = e.position().top; e.css("top", Math.round(t / u) * u + "px"), t = Math.round(Math.abs(D(e).position().top)); var a = e.children("li").get(t / u); if (D(a).addClass("active").siblings().removeClass("active"), -1 != [p.YYYY, p.MM].indexOf(e.parent().attr("id")) && c.scroll.DD) { var n = D("#" + p.YYYY + " .active").text().replace(/\D/g, ""), i = D("#" + p.MM + " .active").text().replace(/\D/g, ""); if (!n || !i) return; var o = c.bissextile(n, i); if (o != D("#" + p.DD + " li").length) { var r = D("#" + p.DD + " .active").text().replace(/\D/g, ""), s = "", d = D("#" + p.DD + " ul"); o < r && (r = o); for (var l = 1; l <= o; l++)s += "<li " + (r == l ? 'class="active"' : "") + ">" + (l < 10 ? "0" + l : l) + f.day + "</li>"; D("#" + p.DD + " ul").html(s), Math.abs(d.position().top) > d.height() - u && d.css("top", "-" + (d.height() - u) + "px") } } c.config.moveEnd && c.config.moveEnd.call(c) } e.bind(o.tstart, function (e) { e.stopPropagation(), e.preventDefault(), e = e.originalEvent, a = e.pageY || e.touches[0].pageY, o.isTouch || (i = !0) }), e.bind(o.tmove, function (e) { var t = D(this); if (e.stopPropagation(), e.preventDefault(), e = e.originalEvent, !o.isTouch && !i) return !1; n = e.pageY || e.touches[0].pageY, t.css("top", t.position().top + (n - a) + "px"), a = n, 0 < t.position().top && t.css("top", "0"), t.position().top < -(t.height() - u) && t.css("top", "-" + (t.height() - u) + "px") }), e.bind(o.tend, function (e) { var t = D(this); e.stopPropagation(), e.preventDefault(), e = e.originalEvent, i = !1, r(t) }), e.bind(o.tcancel, function (e) { var t = D(this); e.stopPropagation(), e.preventDefault(), e = e.originalEvent, i = !1, r(t) }) }, $: function (e, t) { return "string" != typeof e && e.nodeType ? e : t ? document.querySelectorAll(e) : document.querySelector(e) }, tap: function (e, a) { if ("ontouchstart" in window && "tap" == this.config.trigger) { var n = {}; e.addEventListener("touchstart", function (e) { var t = e.touches[0]; n.startX = t.pageX, n.startY = t.pageY, n.sTime = +new Date }), e.addEventListener("touchend", function (e) { var t = e.changedTouches[0]; n.endX = t.pageX, n.endY = t.pageY, +new Date - n.sTime < 300 && Math.abs(n.endX - n.startX) + Math.abs(n.endY - n.startY) < 20 && (e.preventDefault(), a.call(this, e)), n = {} }) } else e.addEventListener("click", function (e) { a.call(this, e) }) }, show: function () { var e = this, t = e.config, a = e.$(t.el); a.bindJdate && ("input" == a.nodeName.toLowerCase() && a.blur(), e.$(".jdate-container") || t.init && !1 === t.init.call(e) || (e.createUI(), e.event())) }, hide: function (e) { var t = this.$(".jdate-panel.fadeIn"); t && (t.className = "jdate-panel fadeOut", this.destroy(e)) }, event: function () { var s = this, e = s.$(".jdate-mask"), t = s.$(".jdate-cancel"), a = s.$(".jdate-confirm"); s.tap(e, function () { s.hide(1) }), s.tap(t, function () { s.hide(1) }), s.tap(a, function () { var e = s.config, t = s.$(e.el), a = e.format, n = new Date; for (var i in s.scroll) { var o = D("#" + s.scroll[i] + " .active").text().replace(/\D/g, ""); a = a.replace(i, o), "YYYY" == i ? n.setFullYear(o) : "MM" == i ? n.setMonth(o - 1) : "DD" == i ? n.setDate(o) : "hh" == i ? n.setHours(o) : "mm" == i ? n.setMinutes(o) : "ss" == i && n.setSeconds(o) } if (e.confirm) { var r = e.confirm.call(s, a); if (!1 === r) return !1; r && (a = r) } "input" == t.nodeName.toLowerCase() ? t.value = a : t.innerText = a, s.hide(), t.bindDate = n }) }, bissextile: function (e, t) { var a = void 0; return 1 == t || 3 == t || 5 == t || 7 == t || 8 == t || 10 == t || 12 == t ? a = 31 : 4 == t || 6 == t || 11 == t || 9 == t ? a = 30 : 2 == t && (a = e % 4 != 0 || e % 100 == 0 && e % 400 != 0 ? 28 : 29), a }, destroy: function (e) { var t = this, a = t.config; e && a.cancel && a.cancel.call(t), setTimeout(function () { var e = t.$(".jdate-container"); document.body.removeChild(e) }, 300) } }, e.version = "2.0.1", e });
1519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
