本篇文章主要利用Bootstrap和Font Awesome修改ThinkPHP默认笑脸跳转页面,创建一个简单的跳转页面。话不多说,先看效果:
- 修改ThinkPHP的默认跳转页面:查看ThinkPHP默认成功和出错的模板的路径:
默认代码:
{__NOLAYOUT__}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>跳转提示</title>
<style type="text/css">
*{ padding: 0; margin: 0; }
body{ background: #fff; font-family: "Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif; color: #333; font-size: 16px; }
.system-message{ padding: 24px 48px; }
.system-message h1{ font-size: 100px; font-weight: normal; line-height: 120px; margin-bottom: 12px; }
.system-message .jump{ padding-top: 10px; }
.system-message .jump a{ color: #333; }
.system-message .success,.system-message .error{ line-height: 1.8em; font-size: 36px; }
.system-message .detail{ font-size: 12px; line-height: 20px; margin-top: 12px; display: none; }
</style>
</head>
<body>
<div class="system-message">
<?php switch ($code) {?>
<?php case 1:?>
<h1>:)</h1>
<p class="success"><?php echo(strip_tags($msg));?></p>
<?php break;?>
<?php case 0:?>
<h1>:(</h1>
<p class="error"><?php echo(strip_tags($msg));?></p>
<?php break;?>
<?php } ?>
<p class="detail"></p>
<p class="jump">
页面自动 <a id="href" href="<?php echo($url);?>">跳转</a> 等待时间: <b id="wait"><?php echo($wait);?></b>
</p>
</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>
- 引入bootstrap和font awesome文件
<link rel="stylesheet" type="text/css" href="__STATIC__/css/bootstrap.min.css">
<link rel="stylesheet" href="__STATIC__/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
- 利用bootstrap布局,利用font awesome做出笑脸和哭脸的效果,引入效果(可以在font awesome网站找到笑脸和哭脸对应的代码):
<i class="fa fa-smile-o fa-5x">
<i class="fa fa-frown-o fa-5x">
4.利用bootstrap的栅格布局是跳转提示在网页中间,利用bootstrap的panel面板组件实现提示效果,利用switch语句分别对成功与出错跳转写入不同的效果。代码如下:
<body>
<div class="container">
<div class="col-md-4 col-md-offset-4 panel panel-primary text-center" id="alert-info">
<?php switch ($code) {?>
<?php case 1:?>
<div class="panel-heading">
<?php echo(strip_tags($msg));?>
</div>
<div class="panel-body">
<span><i class="fa fa-smile-o fa-5x"></i></span>
</div>
<?php break;?>
<?php case 0:?>
<div class="panel-heading">
<?php echo(strip_tags($msg));?>
</div>
<div class="panel-body">
<span><i class="fa fa-frown-o fa-5x"></i></span>
</div>
<?php break;?>
<?php } ?>
<div class="panel-footer">
<p class="jump">
页面自动 <a id="href" href="<?php echo($url);?>">跳转</a> 等待时间: <b id="wait"><?php echo($wait);?></b>
</p>
</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>
- 总结:写的效果比较简单,主要是为了简单:)😃。