php第5课：一个经典的框架
时间 2019-04-11
主讲 刘培富
地点 在线分享，大家自学
通过前面的学习，实现了用户登陆，用户登陆后，进入主界面。关于主界面的设计，给大家介绍一个经典的例子。
如图，使用一个frameset框架，将页面分成三个区域，分别是：
上部，标题栏，显示标题和用户、权限等。
左部：菜单栏，显示功能菜单。
右部：工作区，显示正在执行的工作内容。
admin.php代码如下：
<html>
<head>
<title>上饶市犬管信息系统</title>
</head>
<SCRIPT lanuage="JScript">
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
</SCRIPT>
<frameset name="switchTop" rows="120,*" cols="*" frameborder="no" border="0" framespacing="0" >
<frame src="Top.php" name="topFrame" scrolling="NO" >
<frameset name="switchLeft" cols="230,*" frameborder="yes" border="1" framespacing="0" rows="*">
<frame src="Left.php" name="leftFrame" scrolling="auto" >
<frame src="help.php" name="mainFrame">
</frameset>
</frameset>
<noframes>
</noframes>
</html>
几个关键技术点的说明：
1，页面最大化
<SCRIPT lanuage="JScript">
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
</SCRIPT>
2、页面防嵌套
<SCRIPT LANGUAGE=JAVASCRIPT>
if (top.location != self.location)top.location=self.location;
</SCRIPT>
3，退出框架
<a target=_top href="index.php">退出</a>
4、当前时间实时显示：
在left.php加入代码<?php
include_once("time.php");
?>
time.php的代码如下：
<html>
<head>
<title> js clock 时钟 </title>
<script type="text/javascript">
function Clock() {
var date = new Date();
this.year = date.getFullYear();
this.month = date.getMonth() + 1;
this.date = date.getDate();
this.day = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[date.getDay()];
this.hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
this.minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
this.second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
this.toString = function() {
return "现在是:" + this.year + "年" + this.month + "月" + this.date + "日 " + this.hour + ":" + this.minute + ":" + this.second + " " + this.day;
};
this.toSimpleDate = function() {
return this.year + "-" + this.month + "-" + this.date;
};
this.toDetailDate = function() {
return this.year + "-" + this.month + "-" + this.date + " " + this.hour + ":" + this.minute + ":" + this.second;
};
this.display = function(ele) {
var clock = new Clock();
ele.innerHTML = clock.toString();
window.setTimeout(function() {clock.display(ele);}, 1000);
};
}
</script>
</head>
<body>
<div id="clock" align="center"></div>
<script type="text/javascript">
var clock = new Clock();
clock.display(document.getElementById("clock"));
</script>
</body>
</html>
5，校验用户是否在线
以session.php实现：
<?php
session_start();
if ($_SESSION["online"]!=1)
{
Header("Location: index.php");
die();
}
?>
网友评论