PHP+HTML实现登出界面倒计时效果-阿里云开发者社区

开发者社区> 小珞珞> 正文

PHP+HTML实现登出界面倒计时效果

简介:
+关注继续查看
        在WAMP(Windows+Apache+MySQL+PHP)做网站时,通常需要使用Session记录表单登陆用户名和密码等变量,而在登出时需要清除Session。通常我想实现的登出是通过alert提示用户然后header跳转,但下面的代码是通过JavaScript实现的时间倒计时并跳转到主页的效果,主要是看到学校的BT网站等都是这个效果。
        PS:参考 C# 系统应用之Cookie\Session基础知识及php读取Cookie\Session
        代码如下:
<?php
	session_start();
	session_destroy(); //清空以创建的所有SESSION
	setcookie(session_name(),'',time()-1); 
	$_SESSION = array();
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>登出系统</title>
<link  href="css/mycss.css" type="text/css" rel="stylesheet"/>
</head>
<body>	
<div id="main">
<TABLE cellSpacing=0 cellPadding=0 width="100%" 
		background="images/header_bg.gif" border=0>
	<!--头部图片-->
  <TR height=80>
    <TD width=260>
    	<IMG height=80 src="images/logo.gif" width=260>
    </TD>
</TABLE>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
  <TR bgColor=#1c5db6 height=20>
    <TD></TD></TR>
</TABLE>
<!-- 布局中部 -->
<div id="middle">
<div id="logout_middle">
	<H3 style="COLOR: #880000">注销成功</H3>
	<H4>您已经登出系统!欢迎下次登录!<br />系统将在
	<input type="text" style='font-size:18px; border:0px; width:20px;' 
		readonly="true" value="5" id="time">秒后返回主页游客查看界面
	</H4>
</div>
<!-- 时间函数 -->
<script language="javascript">
	var t = 5;
	var time = document.getElementById("time");
	function fun()
	{
		t--;
		time.value = t;
		if(t<=0)
		{
			location.href="index.php";
			clearInterval(inter);
		}
	}
	var inter = setInterval("fun()",1000);
</script>
</body>
</html>
        实现的效果如下:

        最后希望文章对大家有所帮助,也尝试不同风格,写点短文章。
        (By:Eastmount 2015-2-21  http://blog.csdn.net/eastmount/)

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
巧用CSS3滤镜实现图片不同渲染效果
本站在首页文章封面图从无色转变为有色,以及页面切换、发布留言等信息提示的背景模糊都利用到了css3的filter滤镜。 CSS3 Filter是W3C CSS filter Effect 1.0中定义的滤镜,一个使用CSS来改变图片和HTML的模糊度、亮度、对比度、饱和度等等效果的过滤器。
1037 0
关于html5与jsp页面同样的html代码展示的页面效果不一样的问题
原文: 关于html5与jsp页面同样的html代码展示的页面效果不一样的问题 html5默认的声明为 jsp默认的声明头部为 这里就不一样了,如果两个页面写同样的html代码及样式,jsp页面展示的效果会跟html5页面不一样,...
890 0
HTML5 FormData实现文件上传实例
原文:HTML5 FormData实现文件上传实例 表单提交,文件上传是一个常用又十分麻烦的功能,以前要上传文件通常都是借助插件或者flash来实现,噼里啪啦的加载一大堆东西。自从有了HTML5的FormData后,老板再也不用担心我的上传了。
1246 0
10 个顶级的 CSS3 + HTML5 的菜单实现
CSS3 Clean Mega Menu Menu with CSS3 Effects and Notification Bubbles Sherpa | Complete Navigation System (CSS Edition) CSS3 Animated Mega Nav...
706 0
html5 getComputedStyle + resize 实现动态宽高度等比响应式页面设计
序:通常我们只能控制div的宽度 而不能控制高度,在响应式页面里 如果要这个div是正方形那么必须的用媒体查询在不同的分辨率下写死宽高度 今天突发奇想研究了个 用百分比来动态控制div的高度让其与宽度相同 成为一个正方形 甚至任何你想要比例 一,背景:目前移动端大多数图片或视频列表页面的显示,列出...
989 0
+关注
169
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载