漂亮的thinkphp 跳转页封装示例


Posted in PHP onOctober 16, 2019

项目是要一点点按优先级进行优化的,现在到优化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 跳转页封装示例

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

PHP 相关文章推荐
组合算法的PHP解答方法
Feb 04 PHP
php获得url参数中具有&amp;的值的方法
Mar 05 PHP
PHP编译安装中遇到的两个错误和解决方法
Aug 20 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
Jan 21 PHP
PHP中使用curl伪造IP的简单方法
Aug 07 PHP
php实现点击可刷新验证码
Nov 07 PHP
PHP常用设计模式之委托设计模式
Feb 13 PHP
PHP读书笔记_运算符详解
Jul 01 PHP
PHP中explode函数和split函数的区别小结
Aug 24 PHP
yii2.0整合阿里云oss的示例代码
Sep 19 PHP
通过PHP设置BugFree获取邮箱通知
Apr 25 PHP
提高Laravel应用性能方法详解
Jun 24 PHP
Thinkphp页面跳转设置跳转等待时间的操作
Oct 16 #PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
Oct 16 #PHP
thinkphp5使html5实现动态跳转的例子
Oct 16 #PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
Oct 16 #PHP
在thinkphp5.0路径中实现去除index.php的方式
Oct 16 #PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
Oct 16 #PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
Oct 16 #PHP
You might like
怎样在php中使用PDF文档功能
2006/10/09 PHP
php实现上传图片文件代码
2015/07/19 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
php版微信小店API二次开发及使用示例
2016/11/12 PHP
Js切换功能的简单方法
2010/11/23 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
node使用UEditor富文本编辑器的方法实例
2017/07/11 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
实例详解Node.js 函数
2018/06/10 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
对pandas处理json数据的方法详解
2019/02/08 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
PHP开发的一般流程
2013/08/13 面试题
平安建设实施方案
2014/03/19 职场文书
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
报效祖国演讲稿
2014/09/15 职场文书
物流业务员岗位职责
2015/04/03 职场文书
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis