漂亮的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 跳转页封装示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • thinkphp5使html5实现动态跳转的例子

    1.从数据库取数据 在application/模块名/controller/控制器名/方法名中对数据库进行获取,这里为了方便,举例为application/modulea/controller/x/test $result = Db::name('data')->where('uid',session('xx.uid'))->select(); 数据传递 这里可以是标题栏的数据,然后就通过 $this->assign('data', $result); 这种方式可以传递到 applica

  • 解决thinkPHP 5 nginx 部署时,只跳转首页的问题

    在使用tp5时候把它部署到服务器上发现一个奇葩的事情,就是它默认访问config配置的默认页,无论怎么跳转到其他接口都不好使,最终重写了  Nginx 的配置文件解决了这个问题 server{ listen 80; server_name www.XXXX.com; index index.php index.html index.htm; root /var/www/didu; location ~ \.php #原来这个里有"$" 去掉就ok { #fastcgi_pass uni

  • Nginx下ThinkPHP5的配置方法详解

    本文主要给大家介绍了关于Nginx下ThinkPHP5的配置方法,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: url里public目录的隐藏 出于安全的考虑,TP5的入口文件改成放在public下了,因为这样的话能防止被恶意用户访问到"/thinkphp/"."/vendor/"等等这些目录下的文件.所以当你以之前的习惯将网站documentroot配置为项目根目录的时候就会需要在url后面加上/public/来访问.当然可能也会有童鞋把入口文件放

  • 浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法

    1,心血来潮,把ThinkPHP项目部署到了nginx上,以上是在apache上跑的.突然发现nginx不支持pathinfo功能,难怪在TP中调怎么都没管用. 2,开始上文件了,比网上其他一些杂的好多了: server { listen 80; #listen [::]:80; server_name www.tp.com tp.com; index index.html index.htm index.php default.html default.htm default.php; roo

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

    项目是要一点点按优先级进行优化的,现在到优化thinkphp的跳转页了. <?php if(C('LAYOUT_ON')) { echo '{__NOLAYOUT__}'; } ?> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>跳转中</title> <style> .buffer{ background-color

  • ThinkPHP跳转页success及error模板实例教程

    本文以实例讲解了ThinkPHP跳转页面的success与error方法所对应的视图与控制器的实现方法,通过本实例教程可以帮助读者更好的掌握success方法与error方法的使用. 首先是控制器中,可以使用下代码: <?php // 本文档自动生成,仅供测试运行 class IndexAction extends Action { /** +---------------------------------------------------------- * 默认操作 +----------

  • thinkphp制作404跳转页的简单实现方法

    网上有很多thinkphp的404页面制作方法,但大多太过繁琐不简便,很烦人,所以为大家分享了最便捷的404制作方法,如下. 在thinkphp的公共目录的config配置文件中增加配置项: 'TMPL_EXCEPTION_FILE' => 'Public/404.html', 在Public文件夹中创建404.html内容如下 <!DOCTYPE html > <html> <head> <meta charset=utf-8" /> &l

  • Vue实现未登录跳转到登录页的示例代码

    Vue实现未登录跳转到登录页的示例代码

    1.登录页登录成功时将服务端返回的标识存放起来 2.在router中给不需要登录的页面设置 meta : { auth : false },如首页 3.使用路由前置守卫beforEach,由于给路由设置了meta : { auth : false },如果是符合该属性时则不需要跳转登录页 4.接下来根据token是否存入到localstorage来进行判断或者cookie是否存入客户端做判断,这里在vuex中做处理 如果token和cookie不存在时则需要跳转到登录页 5.在axios中响应拦

  • php实现搜索类封装示例

    本文为大家分享了php实现搜索类封装示例,供大家参考,具体内容如下 <?php /** * SoClass.php * 索引与搜索类 */ class SoClass { private $_xindex; private $_xsearch; private $_project; public function __construct($project){ //载入引导文件 require_once 'lib/XS.php'; //初始化 $xs = new XS($project); $th

  • React前端DOM常见Hook封装示例上

    React前端DOM常见Hook封装示例上

    目录 引言 useEventListener useClickAway useEventTarget useTitle useFavicon 引言 本文是深入浅出 ahooks 源码系列文章的第十四篇,这个系列的目标主要有以下几点: 加深对 React hooks 的理解. 学习如何抽象自定义 hooks.构建属于自己的 React hooks 工具库. 培养阅读学习源码的习惯,工具库是一个对源码阅读不错的选择. 上一篇我们探讨了 ahooks 对 DOM 类 Hooks 使用规范,以及源码中是

  • React前端DOM常见Hook封装示例下

    目录 引言 useFullscreen useHover useDocumentVisibility 引言 本文是深入浅出 ahooks 源码系列文章的第十五篇,这个系列的目标主要有以下几点: 加深对 React hooks 的理解. 学习如何抽象自定义 hooks.构建属于自己的 React hooks 工具库. 培养阅读学习源码的习惯,工具库是一个对源码阅读不错的选择. 上文指路:React前端DOM常见Hook封装示例上 本篇接着针对关于 DOM 的各个 Hook 封装进行解读. useF

  • ThinkPHP实现事务回滚示例代码

    ThinkPHP的事务回滚示例如下: $m=D('YourModel');//或者是M(); $m2=D('YouModel2'); $m->startTrans();//在第一个模型里启用就可以了,或者第二个也行 $result=$m->where('删除条件')->delete(); $result2=m2->where('删除条件')->delete(); if($result && $result2){ $m->commit();//成功则提交

  • jsp实现上一页下一页翻页功能(示例代码)

    jsp实现上一页下一页翻页功能(示例代码)

    前段时间一直忙于期末考试和找实习,好久没写博客了. 这段时间做了个小项目,包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深,打算玩深后再写篇博客. 要实现翻页功能,只需要设置一个pageIndex即可,然后每次加载页面时通过pageIndex去加载数据就行. 那么我们可以设置一个隐藏的input框,用于传递pageIndex给下个页面. 当我们点击上一页的时候,通过js方法改变pageIndex的值,再提交表单即可 二话不多说,看代码,代码里面写的还算比较清楚.

  • 点选TOP后并不是直接跳到页顶的，而是滚动上去的

    如果网页太长了,一般都使用锚标签快速返回到TOP <a href="#header" title="back to top">top</a> 确实很简单,不过却有一些高手让这个简变成不简单: 国外演示地址:http://tonyyoo.com/v2/ 点选TOP后并不是直接跳到页顶的,而是滚动上去的..而且距离页顶越长滚动的速度也就越快... 研究了下,用到的JS有4个: <script type="text/javascri

随机推荐