<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>绍兴市越城区教育满意度调查</title>
<link href="../assets/reset.css" rel="stylesheet"/>
<link href="../assets/style.css" rel="stylesheet"/>
<script src="../assets/jquery-1.8.3.min.js"></script>
<style>
html{ width:100%; overflow-x:hidden;}
.footer{ margin-top:70px; padding:10px 0;}
.footer.absolute-bottom{ margin-top:0;}
</style>
<link href="../assets/select2/select2.min.css" rel="stylesheet" />
<style>
.select2-container{ margin-bottom:15px;}
.select2-results__option{ padding:12px 6px;}
.select2-results__option:hover{ background:#eee;}
.select2-container--default .select2-search--dropdown .select2-search__field{ -webkit-appearance:none; border:1px solid #ddd; border-radius:2px; padding:8px 4px; font-size:14px;}
.select2-container--open .select2-dropdown--above{ border-bottom:1px solid #ccc; box-shadow:0 -2px 3px rgba(0,0,0,.2)}
.select2-container--open .select2-dropdown--below{ border-top:1px solid #ccc; box-shadow:0 2px 3px rgba(0,0,0,.2)}
.select2-container--default .select2-selection--single{ border:0; height:40px;}
.select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:40px;}
.select2-container--default .select2-selection--single .select2-selection__arrow{ height:40px;}
.select2-dropdown{ border:0; background:rgba(255,255,255,.9)}
.header{ position:absolute;}
.tips{ display:none; position:absolute; min-width:50px; max-width:200px; min-height:20px; line-height:20px; padding:8px 10px; background:rgba(255,0,0,.9); color:#fff; border-radius:5px; top:100px; left:50px; z-index:100;}
.tips:before{ content:""; border:6px solid Transparent; border-bottom-color:rgba(255,0,0,.9); position:absolute; top:-12px; left:10px;}
.tips .fa{ margin-right:5px;}
</style>
<script src="../assets/select2/select2.min.js"></script>
<script src="../assets/select2/i18n/zh-CN.js"></script>
<script>
$(function(){
});
</script>
</head>
<body class="bodybg">
<header class="header">
<a class="back" onClick="history.back()"></a>
<div class="mid">越城区学校满意程度调查</div>
</header>
<section class="h-header"></section>
<section class="tips"></section>
<section class="school-wrap">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide slide-0">
<article class="circle">
<div class="form">
<h3 class="form-t"><i class="fa fa-mobile-phone"></i>验证手机号码</h3>
<input class="input-1 input-phone" id="mobile" type="tel" placeholder="手机号码" />
<div class="verbox clearfix">
<input class="input-1" id="ver" placeholder="4位验证码" type="tel" />
<span class="btn-send">获取验证码</span>
</div>
<input class="input-submit" type="button" value="下一步" onClick="return check1()"/>
</div>
</article>
<section class="footer">
<img src="../images/copyright.gif"/> 杭州顺治科技股份有限公司
<br/>客服热线：<a>400-826-2468</a>
</section>
</div>
<div class="swiper-slide slide-1">
<article class="circle">
<div class="form">
<h3 class="form-t"><i class="fa fa-user-plus"></i>选择身份</h3>
<a class="a-student">我是 学生家长</a>
<a class="a-people">我是 热心市民</a>
</div>
</article>
<section class="footer">
<img src="../images/copyright.gif"/> 杭州顺治科技股份有限公司
<br/>客服热线：<a>400-826-2468</a>
</section>
</div>
<div class="swiper-slide slide-2">
<article class="circle">
<div class="form">
<h3 class="form-t"><i class="fa fa-pencil"></i>填写调查学校信息</h3>
<select class="select-grade">
<option value="1">幼儿园</option>
<option value='2'>小学</option>
<option value='3'>初中</option>
</select>
<select class="select-street">
<option>府山街道</option>
<option>北海街道</option>
<option>塔山街道</option>
<option>蕺山街道</option>
<option>迪荡、稽山街道</option>
<option>城南街道</option>
<option>皋埠镇</option>
<option>东湖镇</option>
<option>鉴湖镇</option>
</select>
<select class="select-school">
<option>鲁迅幼托中心</option>
<option>鉴湖新村幼儿园</option>
<option>市机关幼儿园</option>
</select>
<input class="input-1" type="text" id="name" placeholder="姓名（选填）" />
<input class="input-submit" type="button" value="开始答卷" onClick="return check2()"/>
</div>
</article>
<section class="footer">
<img src="../images/copyright.gif"/> 杭州顺治科技股份有限公司
<br/>客服热线：<a>400-826-2468</a>
</section>
</div>
</div>
</div>
</section>
<!--swiper-->
<link href="../assets/swiper/swiper.min.css" rel="stylesheet"/>
<script src="../assets/swiper/swiper.min.js"></script>
<script>
var swiper;
$(function(){
var $swiperContainer=$('.swiper-container');
var $swiperSlide=$('.swiper-container .swiper-slide');
swiper = new Swiper('.swiper-container',{
allowSwipeToPrev:false,
allowSwipeToNext:false,
speed:500
});
})
</script>
<!--swiper End-->
<script>
var winHeight = $(window).height();
var winWidth = $(window).width();
$(function(){
var bodyWidth = $('body').width();
//footer
if (winHeight <= 480||winHeight<=winWidth* 1.5) {
$('.footer').addClass('absolute-bottom');
};
//点击获取验证码
$('.btn-send').on('touchend',function(){
//判断是否填入手机
var mobile = $('#mobile').val();
if (!mobile) {
showTips($('#mobile'), '请填入手机号', 'error');
return false;
} else {
var reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
if (!reg.test(mobile)) {
showTips($('#mobile'), '手机号码填写有误', 'error');
return false;
}
}
//发送验证码
var $this=$(this);
if(!$this.hasClass('hasSend')){
$this.addClass('hasSend').text('60s');
var _tick=60;
var _tickFn=setInterval(function(){
_tick--;
$this.text(_tick+'s');
if(_tick==0){
clearInterval(_tickFn);
setTimeout(function(){
$this.removeClass('hasSend').text('发送验证码');
},1000);
}
},1000);
}
});
//选择身份
//点击学生家长
$('.slide-1 .a-student').on('click',function(){
swiper.slideNext();
});
//点击热心市民
$('.slide-1 .a-people').on('click',function(){
swiper.slideNext();
$('.slide-2 .select-grade').hide();
});
//切换
var $school=$('.select-school');
$('.select-grade').change(function(){
if($(this).val()==1){
$school.html('<option>鲁迅幼托中心</option><option>鉴湖新村幼儿园</option><option>市机关幼儿园</option>');
$school.show();
}
if($(this).val()==2){
$school.html('<option>鲁迅小学人民路校区</option><option>鲁迅小学和畅堂校区</option><option>培新小学</option><option>快阁苑小学</option><option>文理学院附属小学</option>');
$school.show();
}
if($(this).val()==3){
showTips($(this), '该学区无对应初中学校，请选择其他学区', 'error');
$school.hide();
}
})
});
//发送完验证码后，点击下一步
function check1(){
//判断是否填入手机
var mobile = $('#mobile').val();
if (!mobile) {
showTips($('#mobile'), '请填入手机号', 'error');
return false;
}
//判断是否填入验证码
var ver=$('#ver').val();
if (!ver) {
showTips($('#ver'), '请填入验证码', 'error');
return false;
}
/*
*需检查验证码
*/
swiper.slideNext();
}
//点击 开始答题
function check2(){
/*var name=$('#name').val();
if (!name) {
showTips($('#name'), '请填入您的姓名', 'error');
return false;
}*/
location.href="question.html";
}
/*表单提示*/
var $tips=$('.tips');
var tipsLeft,tipsTop;//表单错误提示位置
function showTips(e,text,status,duration){
tipsLeft=e.offset().left;
tipsTop=e.offset().top+46;
var backgroundColor;
if(status=="error"){
$('.checkerror').removeClass('checkerror');
if(e.is('select')){
e.next().find('.select2-selection').addClass('checkerror');
}else{
e.addClass('checkerror');
}
}
backgroundColor="rgba(255,0,0,.9)";
$tips.html('<i class="fa fa-exclamation-circle"></i>'+text).css({'background-color':backgroundColor,'left':tipsLeft,'top':tipsTop}).fadeIn(300);
$('body').animate({'scrollTop':tipsTop-100},500);
hideTips(duration);
//改变后如果有值，则隐藏tips
e.change(function(){
if(e.val()){
if(e.val()==3&&e.hasClass('select-grade')){
}else{
hideTips(0);
}
}
})
}
/*隐藏表单提示--usage：
*一直存在： hideTips();
*马上隐藏: hideTips(0);
*2秒后隐藏: hideTips(2000);
*/
function hideTips(duration){
if(typeof(duration)!="undefined"){
//如果有持续时间，则在duration后隐藏
setTimeout(function(){
$tips.fadeOut(300);
$('.checkerror').removeClass('checkerror');
},duration);
}
}
</script>
</body>
</html>