仿12306登录

页面


<html>
  <head>
    <title>车票预定 | 客运服务 | 铁路客户服务中心title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js">script>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/font-awesome.min.css">
    <style>
        ul, ol, li {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        a:focus,input{
            outline:none;
        }

        area, a, a img,input{
            blr:expression_r(this.onFocus=this.blur());
        }

        a:link,a:visited {
            /* color:#999; */
            color:#333;
            text-decoration:none;
        }

        a:hover,a:focus {
            color:#45B6F7;
        }





        .input-line {
            margin-bottom: 20px;overflow: hidden;
        }

        input[type='text'],
        input[type='password'] {
            width:100%;height: 36px;
            line-height: 36px;padding: 2px 4px;border: 1px solid #DAE5E6;
            background: #F2FEFF none repeat scroll 0% 0%;
        }

        .verify-code-img {
            width:293px;height:190px;float:left;position: relative;
            background: #F2FEFF none repeat scroll 0% 0%;
        }

        .verify-code-img img {
            width:100%;height:100%;position: absolute;left:0;top:0;
        }

        .verify-code-img .refresh {
            width:100%;height:30px;line-height:30px;text-align:right;position:relative;z-index:999;
        }

        .verify-code-img ul {
            width:100%;height:160px;padding:6.75px 0;
        }

        .verify-code-img li {
            float:left;
            width:25%;
            height:50%;
            position:relative;
            z-index:-999;
            background: #51d968 none repeat scroll 0% 0%;
            filter:alpha(opacity=0.5);-moz-opacity:0.5;opacity: 0.5;
        }

        .verify-code-img li span {
            display:none;
        }

        .verify-code-text {
            width:257px;height:190px;float:right;
            padding: 0 10px;border: 1px solid #FECCCD;
            background: #FFF2F2 none repeat scroll 0% 0%;
            color: #999;
        }

        .verify-code-text .title {
            width:100%;height:30px;line-height:30px;border-bottom:1px solid #FECCCD;
        }

        .verify-code-text .content {
            width:100%;height:160px;padding:5px 0;overflow:auto;
        }

        button {
            width: 160px;height: 40px;border: medium none;border-radius: 2px;
            background: #00A3D9 none repeat scroll 0% 0%;color: #FFF;cursor: pointer;
        }





        .check-line {
            height: 21px;margin-bottom: 20px;font-size: 14px;
        }

        .check-line-left {
            float: left;display: inline;
        }

        .check-line-right {
            float:right;display:inline;color:#09c;text-decoration: none;vertical-align: baseline;
        }
    style>
  head>

  <body style="background: #f6f6f6;">
    <div style="width:670px;height:442px;margin:100px auto;padding: 40px;background: #fff;">
        <div class="input-line">
            <input id="zmail" name="zmail" type="text" placeholder="用户名">
        div>
        <div class="input-line">
            <input id="zpass" name="zpass" type="password" placeholder="密码">
        div>
        <div class="input-line">
            <div class="verify-code-img">
                <img>
                <div class="refresh">
                    <a href="javascript:void(0);"><i class="fa fa-refresh">i> <span>刷新span>a>
                div>
                <ul>
                    <li><span>span>li>
                    <li><span>span>li>
                    <li><span>span>li>
                    <li><span>span>li>
                    <li><span>span>li>
                    <li><span>span>li>
                    <li><span>span>li>
                    <li><span>span>li>
                ul>
            div>
            <div class="verify-code-text">
                <div class="title">控制台div>
                <div class="content">div>
            div>
        div>
        <button><i class="fa fa-long-arrow-right">i> 继续button>
    div>

    <script type="text/javascript">
        function refresh() {
            $('a > span').html('刷新中...');
            var r = Math.floor(Math.random()*9999999999999999+1)/10000000000000000;
            $("img").attr('src','https://kyfw.12306.cn/passport/captcha/captcha-image?login_site=E&module=login&rand=sjrand&'+r).load(function(){
                $('a > span').html('刷新');

                $('li').css("z-index","-999");
                $('li > span').html('');
                $(".verify-code-text .content").html('');
            });
        }

        refresh();

        $("a").click(function() {
            refresh();
        });

        $("img").click(function(event) {
            var srcObj = event.target || event.srcElement;
            var x = event.offsetX || (event.clientX - srcObj.getBoundingClientRect().left);
            var y = event.offsetY || (event.clientY - srcObj.getBoundingClientRect().top);
            y = y-14;

            x = x + 3;
            y = y - 16;

            if (y < 0) y = 0;

            var nx = Math.floor(x/73.25);
            var ny = Math.floor(y/80);

            var n = ny*4+nx+1;

            $('li').eq(n-1).css("z-index","999");

            x = x.toFixed(2);
            y = y.toFixed(2);

            $('li > span').eq(n-1).html(x + ',' + y);

            var result = $(".verify-code-text .content");
            result.html('选中第'+n+'个图像,坐标为'+x+','+y+'
从左到右第'
+(nx+1)+'个,从上到下第'+(ny+1)+'个

'
+result.html()); }); $('li').click(function() { $(this).css("z-index","-999"); }); $("button").click(function() { var username = $.trim($("#zmail").val()); var password = $.trim($("#zpass").val()); if (username == "" || password == "") { return; } $(this).html("正在登录..").attr("disabled", true).css("cursor", "wait"); var randCode = ''; $('li > span').each(function(i) { if ($(this).html()!='') { randCode+=$(this).html()+','; } }); if (randCode!='') { randCode=randCode.substr(0,randCode.length-1); } $.ajax({ url: "https://kyfw.12306.cn/otn/passcodeNew/checkRandCodeAnsyn", type:"GET", cache: false, contentType: "application/x-www-form-urlencoded; charset=UTF-8", data: {"rand":"sjrand","randCode":randCode}, dataType:"jsonp", jsonp:"callback", jsonpCallback: "jsonpcallback" }); }); function jsonpcallback(data) { alert(JSON.stringify(data)); }
script> body> html>

显示效果

仿12306登录_第1张图片

你可能感兴趣的:(前端)