漂亮的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 相关文章推荐
mysql时区问题
Mar 26 PHP
PHP 配置文件中open_basedir选项作用
Jul 19 PHP
PHP循环语句笔记(foreach,list)
Nov 29 PHP
php循环创建目录示例分享(php创建多级目录)
Mar 04 PHP
通过dbi使用perl连接mysql数据库的方法
Apr 16 PHP
ThinkPHP3.1新特性之G方法的使用
Jun 19 PHP
php批量删除数据库下指定前缀的表以prefix_为例
Aug 24 PHP
php自动获取关键字的方法
Jan 06 PHP
php生成验证码函数
Oct 20 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
Aug 17 PHP
Laravel如何同时连接多个数据库详解
Aug 13 PHP
关于laravel 子查询 &amp; join的使用
Oct 16 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也可以?成Shell Script
2006/10/09 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
PHP7 list() 函数修改
2021/03/09 PHP
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
2006/10/19 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
[01:20]PWL S2开团时刻第三期——团战可以输 蝙蝠必须死
2020/11/26 DOTA
Django Highcharts制作图表
2016/08/27 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
Python定义一个Actor任务
2020/07/29 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
JSP&Servlet技术面试题
2015/05/21 面试题
协议书范本
2014/04/23 职场文书
ktv好的活动方案
2014/08/15 职场文书
悬空寺导游词
2015/02/05 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
初二数学教学反思
2016/02/17 职场文书