飞奔的炮台 发表于 2021-11-8 14:27:43

漂亮的thinkphp 跳转页封装示例

今天小编就为大家分享一篇漂亮的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 跳转页封装示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持CodeAE代码之家。
原文链接:https://blog.csdn.net/u013288190/article/details/54908718

http://www.zzvips.com/article/189502.html
页: [1]
查看完整版本: 漂亮的thinkphp 跳转页封装示例