剪裁圖片

qq_1913284695發表於2018-07-03
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=no" />
<title>測一測你的單身故事</title>
<link href="css/style1.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-2.1.1.min.js"></script>
</head>
<body>
        <img id="bg" src="img/02.jpg">
        <div id="input_box">
            <input type="text" id="uname">
        </div>
        <div id="radio_box">
            <label><input type="radio" name="usex" value="1" checked><div class="radio"><div class="selected"></div></div>我是男生</label>
            <label><input type="radio" name="usex" value="0"><div class="radio"></div>我是女生</label>
        </div>   
        <div id="btn">生成單身故事</div>  
    </body>
    <script src="js/layer.js"></script>
    <script>
        $("#bg").css('height',$(document).height())
        $("#input_box").css('top',$(document).height()/2+10)
        $("#radio_box").css('top',$(document).height()/2+80)
        $("#btn").css('top',$(document).height()/2+130)
        
        $("label").click(function(){
            $("input[type=radio]").removeAttr("checked")
            $(".radio").empty();
            $(this).find('input[type=radio]').attr("checked","checked")
            $(this).find('.radio').append('<div class="selected">')
            //alert($("input[type=radio][checked]").val())
        })  
        
        
        $("#btn").click(function(){
var text=$("#uname").val();
if(text.length==0||text==''||text==null){bottomTip('請輸入姓名',2);return;}
else if(text.length>=5){bottomTip('姓名不能超過5個字',2);return;}
ajax();
});


function bottomTip(cont,t){
layer.open({
   content: cont
   ,skin: 'msg'
   ,time: t //2秒後自動關閉
 });
}

function ajax(){
var index=layer.open({
shadeClose: false,
   type: 2,
   content: '請求中。。。'
});
var ajaxTimeoutTest = $.ajax({  
       type : "POST",   
       url : "p_all.php", 
       async:true,
       dataType:"json",
       timeout : 18000, 
       data :{
        uname:$("#uname").val(),
        usex:$("input[type=radio][checked]").val(),
        type:"seximg"
       }, 
       success : function(data) { 
        if(data.res==1){
        layer.close(index);
window.location="show1.php?uname="+$("#uname").val()+"&uimg="+data.ret;
} else{layer.close(index);bottomTip('請求失敗，再生成一次吧',2);return;}
       },complete : function(XMLHttpRequest,status){ //請求完成後最終執行引數
　　　if(status=='timeout'){//超時,status還有success,error等值的情況
　　　　　 ajaxTimeoutTest.abort();
layer.close(index);
　　　　　 bottomTip('您的網路不是很好哦，再試一次吧',2);return;
　　　}
　　}  
   }); //ajax_end
}//upload_face      
    </script>
</html>

相關文章