shop
/
index.example

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
</head>
<body>
	<div id="loadding">
	    <div class="loader">
	      <div class="horizontal">
	        <div class="circlesup">
	          <div class="circle"></div>
	          <div class="circle"></div>
	          <div class="circle"></div>
	          <div class="circle"></div>
	          <div class="circle"></div>
	        </div>
	      </div>
	    </div>
	  </div>
</body>
<style type="text/css">
	/* Start the loader code, first, let's align it the center of screen */
  .loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    /* disable selection and cursor changes */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    z-index: 2000;
  }

  /* Text align it the center of screen and connect the looped animation for 2 seconds */
  .text {
    position: fixed;
    left: -2.1rem;
    top: -1.7rem;
    -webkit-animation: text 2s infinite;
    -moz-animation: text 2s infinite;
    -moz-animation: text 2s infinite;
    -ms-animation: text 2s infinite;
    -o-animation: text 2s infinite;
    animation: text 2s infinite;
  }

  /* Set for the second layer horizontal position */
  .horizontal {
    position: fixed;
    top: -2.5rem;
    left: -2rem;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* The next two classes do mirror for animation */
  .circlesup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* Create a container for our circles, rotate it 45 degrees and set animation*/
  .circle {
    position: fixed;
    width: 3rem;
    height: 3rem;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-animation: orbit 2s infinite;
    -moz-animation: orbit 2s infinite;
    -moz-animation: orbit 2s infinite;
    -ms-animation: orbit 2s infinite;
    -o-animation: orbit 2s infinite;
    animation: orbit 2s infinite;
    z-index: 5;
  }

  /* Style's of our circles */
  .circle:after {
    content: "";
    position: fixed;
    width: 15px;
    height: 15px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    background: #d33047; /* Pick a color 1*/
  }

  .circle:nth-child(2) {
    -webkit-animation-delay: 100ms;
    -moz-animation-delay: 100ms;
    -ms-animation-delay: 100ms;
    -o-animation-delay: 100ms;
    animation-delay: 100ms;
    z-index: 4;
  }

  .circle:nth-child(2):after {
    background: #ff3d38; /* Pick a color 2*/
    -webkit-transform: scale(0.8, 0.8);
    -moz-transform: scale(0.8, 0.8);
    -ms-transform: scale(0.8, 0.8);
    -o-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8);
  }

  .circle:nth-child(3) {
    -webkit-animation-delay: 225ms;
    -moz-animation-delay: 225ms;
    -ms-animation-delay: 225ms;
    -o-animation-delay: 225ms;
    animation-delay: 225ms;
    z-index: 3;
  }

  .circle:nth-child(3):after {
    background: #ffa489; /* Pick a color 3*/
    -webkit-transform: scale(0.6, 0.6);
    -moz-transform: scale(0.6, 0.6);
    -ms-transform: scale(0.6, 0.6);
    -o-transform: scale(0.6, 0.6);
    transform: scale(0.6, 0.6);
  }

  .circle:nth-child(4) {
    -webkit-animation-delay: 350ms;
    -moz-animation-delay: 350ms;
    -ms-animation-delay: 350ms;
    -o-animation-delay: 350ms;
    animation-delay: 350ms;
    z-index: 2;
  }

  .circle:nth-child(4):after {
    background: #ff6d37; /* Pick a color 4*/
    -webkit-transform: scale(0.4, 0.4);
    -moz-transform: scale(0.4, 0.4);
    -ms-transform: scale(0.4, 0.4);
    -o-transform: scale(0.4, 0.4);
    transform: scale(0.4, 0.4);
  }

  .circle:nth-child(5) {
    -webkit-animation-delay: 475ms;
    -moz-animation-delay: 475ms;
    -ms-animation-delay: 475ms;
    -o-animation-delay: 475ms;
    animation-delay: 475ms;
    z-index: 1;
  }

  .circle:nth-child(5):after {
    background: #db2f00; /* Pick a color 5*/
    -webkit-transform: scale(0.2, 0.2);
    -moz-transform: scale(0.2, 0.2);
    -ms-transform: scale(0.2, 0.2);
    -o-transform: scale(0.2, 0.2);
    transform: scale(0.2, 0.2);
  }

  /* Animation keys */
  @-webkit-keyframes orbit {
    0% {
      -webkit-transform: rotate(45deg);
    }

    5% {
      -webkit-transform: rotate(45deg);
      -webkit-animation-timing-function: ease-out;
    }

    70% {
      -webkit-transform: rotate(405deg);
      -webkit-animation-timing-function: ease-in;
    }

    100% {
      -webkit-transform: rotate(405deg);
    }
  }

  @keyframes orbit {
    0% {
      transform: rotate(45deg);
    }

    5% {
      transform: rotate(45deg);
      animation-timing-function: ease-out;
    }

    70% {
      transform: rotate(405deg);
      animation-timing-function: ease-in;
    }

    100% {
      transform: rotate(405deg);
    }
  }

  @-webkit-keyframes text {
    0% {
      -webkit-transform: scale(0.2, 0.2);
      -webkit-animation-timing-function: ease-out;
    }

    40%,
    60% {
      -webkit-transform: scale(1, 1);
      -webkit-animation-timing-function: ease-out;
    }

    70%,
    100% {
      -webkit-transform: scale(0.2, 0.2);
    }
  }

  @-moz-keyframes text {
    0% {
      -moz-transform: scale(0.2, 0.2);
      -moz-animation-timing-function: ease-out;
    }

    50% {
      -moz-transform: scale(1, 1);
      -moz-animation-timing-function: ease-out;
    }

    60% {
      -moz-transform: scale(1, 1);
      -moz-animation-timing-function: ease-out;
    }

    100% {
      -moz-transform: scale(0.2, 0.2);
    }
  }

  @keyframes text {
    0% {
      transform: scale(0.2, 0.2);
      animation-timing-function: ease-out;
    }

    50% {
      transform: scale(1, 1);
      animation-timing-function: ease-out;
    }

    60% {
      transform: scale(1, 1);
      animation-timing-function: ease-out;
    }

    100% {
      transform: scale(0.2, 0.2);
    }
  }
</style>
<script type="text/javascript">

// 常用工具函数
var tools = {
	 formatParams: function(data) {
	    var arr = [];
	    for (var name in data) {
	        arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
	    }
	    return arr.join("&");
	},

	/* ajax请求get
     * @param url     string   请求的路径
     * @param query   object   请求的参数query
     * @param succCb  function 请求成功之后的回调
     * @param failCb  function 请求失败的回调
     * @param isJson  boolean  true： 解析json  false：文本请求  默认值true
     */
    ajaxGet: function (url, query, succCb, failCb, isJson) {
        // 拼接url加query
        if (query) {
            var parms = tools.formatParams(query);
            url += '&' + parms;
            // console.log('-------------',url);
        }

        // 1、创建对象
        var ajax = new XMLHttpRequest();
        // 2、建立连接
        // true:请求为异步  false:同步
        ajax.open("GET", url, true);
        // ajax.setRequestHeader("Origin",STATIC_PATH);

        // ajax.setRequestHeader("Access-Control-Allow-Origin","*");
        // // 响应类型
        // ajax.setRequestHeader('Access-Control-Allow-Methods', '*');
        // // 响应头设置
        // ajax.setRequestHeader('Access-Control-Allow-Headers', 'x-requested-with,content-type');
        // ajax.withCredentials = true;
        // 3、发送请求
        ajax.send(null);

        // 4、监听状态的改变
        ajax.onreadystatechange = function () {
            if (ajax.readyState === 4) {
                if (ajax.status === 200) {
                    // 用户传了回调才执行
                    // isJson默认值为true，要解析json
                    if (isJson === undefined) {
                        isJson = true;
                    }
                    var res = isJson ? JSON.parse(ajax.responseText == "" ? '{}' : ajax.responseText) : ajax.responseText;
                    succCb && succCb(res);
                } else {
                    // 请求失败
                    failCb && failCb();
                }

            }
        }


    },


    	/* ajax请求post
     * @param url     string   请求的路径
     * @param data   object   请求的参数query
     * @param succCb  function 请求成功之后的回调
     * @param failCb  function 请求失败的回调
     * @param isJson  boolean  true： 解析json  false：文本请求  默认值true
     */
    ajaxPost: function (url, data, succCb, failCb, isJson) {

        var formData = new FormData();
        for (var i in data) {
            formData.append(i, data[i]);
        }
        //得到xhr对象
        var xhr = null;
        if (XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");

        }

        xhr.open("post", url, true);
		// 设置请求头  需在open后send前
		// 这里的CSRF需自己取后端获取，下面给出获取代码
        // xhr.setRequestHeader("X-CSRFToken", CSRF);

        xhr.send(formData);

        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    // 判断isJson是否传进来了
                    isJson = isJson === undefined ? true : isJson;
                    succCb && succCb(isJson ? JSON.parse(xhr.responseText) : xhr.responseText);
                }
            }
        }

    },
    getSiteRoot: function () {
      return document.location.protocol + '//' + window.location.host;
    },

}


// 调用
// 接口地址
let url = tools.getSiteRoot()+"/admin/center";
// 传输数据 为object
// let data = {}

tools.ajaxGet(url,'', function(res){
    if(res.result === 1) {
        if(res.data.is_open == 2){
            window.location.href = res.data.url;
        }else {
            window.location.href = tools.getSiteRoot()+'/admin.html';
        }
    }else {
        window.location.href = tools.getSiteRoot()+'/admin.html';
    }
})


</script>
</html>