漂亮的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之第十天
Oct 09 PHP
如何删除多级目录
Oct 09 PHP
PHP数字格式化
Dec 06 PHP
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
Dec 13 PHP
不错的一篇面向对象的PHP开发模式(简写版)
Mar 15 PHP
php的POSIX 函数以及进程测试的深入分析
Jun 03 PHP
PHP实现图片自动清理的方法
Jul 08 PHP
Yii rules常用规则示例
Mar 15 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
Oct 25 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
Dec 02 PHP
php插件Xajax使用方法详解
Aug 31 PHP
php unlink()函数使用教程
Jul 12 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 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
如何让页面加载完成后执行js
2013/06/26 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
详解AngularJS中的filter过滤器用法
2016/01/04 Javascript
JavaScript中的原型prototype完全解析
2016/05/10 Javascript
JS实现六边形3D拖拽翻转效果的方法
2016/09/11 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
Vue如何实现响应式系统
2018/07/11 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
python 中split 和 strip的实例详解
2017/07/12 Python
Pytorch之contiguous的用法
2019/12/31 Python
python实现tail -f 功能
2020/01/17 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
娱乐地球:Entertainment Earth
2020/01/08 全球购物
医学专业大学生求职的自我评价
2013/11/27 职场文书
外语系大学生自荐信范文
2014/03/01 职场文书
生态养殖创业计划书
2014/05/06 职场文书
行政监察建议书
2014/05/19 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
胡桃夹子观后感
2015/06/11 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
gateway网关接口请求的校验方式
2021/07/15 Java/Android
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js