• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    漂亮的thinkphp 跳转页封装示例

    项目是要一点点按优先级进行优化的,现在到优化thinkphp的跳转页了。

    ?php
     if(C('LAYOUT_ON')) {
      echo '{__NOLAYOUT__}';
     }
    ?>
    !DOCTYPE html>
    html>
    head>
     meta charset="UTF-8">
     title>跳转中/title>
     style>
      .buffer{
       background-color: black;
       height: 100%;
       width: 60%;
       margin: auto;
       filter: alpha(Opacity=60);
       -moz-opacity: 0.6;
       opacity: 0.85;
       border-radius: 7px;
      }
     
      .buffer_tip{
       color: wheat;
       font-size: 30px;
       display: block;
       padding-top: 10px;
       text-align: center;
      }
      .spinner {
       margin: 16px auto 57px;
       width: 32px;
       height: 32px;
       position: relative;
      }
       
      .cube1, .cube2 {
       background-color: #67CF22;
       width: 30px;
       height: 30px;
       position: absolute;
       top: 0;
       left: 0;
       
       -webkit-animation: cubemove 1.8s infinite ease-in-out;
       animation: cubemove 1.8s infinite ease-in-out;
      }
       
      .cube2 {
       -webkit-animation-delay: -0.9s;
       animation-delay: -0.9s;
      }
       
      @-webkit-keyframes cubemove {
       25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
       50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
       75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
       100% { -webkit-transform: rotate(-360deg) }
      }
       
      @keyframes cubemove {
       25% {
       transform: translateX(42px) rotate(-90deg) scale(0.5);
       -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
       } 50% {
       transform: translateX(42px) translateY(42px) rotate(-179deg);
       -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
       } 50.1% {
       transform: translateX(42px) translateY(42px) rotate(-180deg);
       -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
       } 75% {
       transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
       -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
       } 100% {
       transform: rotate(-360deg);
       -webkit-transform: rotate(-360deg);
       }
      }
     
      #href{
        color: wheat;
        font-size: 20px;
      }
      a:link{
        text-decoration:none;
      }
     /style>
    /head>
    body>
     
    div class='buffer' id='buffer' >
      span class='buffer_tip' id='buffer_tip' >
      php>
        if(isset($message)) {
          echo $message;
        }else{
          if(!empty($error)) {
            echo $error;
          }else{
            echo '操作出现错误';
          } 
        }
      /php>
      a id="href" href="?php echo($jumpUrl); ?>" rel="external nofollow" >(b id="wait">?php echo($waitSecond); ?>/b>s)/a>
      /span>
      div class="spinner">
       div class="cube1">/div>
       div class="cube2">/div>
      /div>
    /div>
     
    script type="text/javascript">
    (function(){
    var wait = document.getElementById('wait'),href = document.getElementById('href').href;
    var interval = setInterval(function(){
      var time = --wait.innerHTML;
      if(time = 0) {
        location.href = href;
        clearInterval(interval);
      };
    }, 1000);
    })();
    /script>
    /body>
    /html>
    

    效果如下:

    以上这篇漂亮的thinkphp 跳转页封装示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

    您可能感兴趣的文章:
    • Nginx下ThinkPHP5的配置方法详解
    • thinkphp5使html5实现动态跳转的例子
    • 浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
    • 解决thinkPHP 5 nginx 部署时,只跳转首页的问题
    上一篇:Thinkphp页面跳转设置跳转等待时间的操作
    下一篇:详解将数据从Laravel传送到vue的四种方式
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    漂亮的thinkphp 跳转页封装示例 漂,亮的,thinkphp,跳转页,