HTML5做的浏览器欢迎界面自动跳转

思路很简单，随手装逼呗。根据时间来控制背景图和文字，背景图加了毛玻璃效果，效果直接看图，用javascript来实现。

完整代码

<!DOCTYPE html>

<html>

<head>

	<title>Navigation</title>

	<!--2秒后跳转到自定义页面-->

	<meta http-equiv="refresh" content="2; url=http://www.baidu.com" />

	<style type="text/css">

		@font-face{

			font-family: "MAILR___";

			src:url("MAILR___.TTF");

		}

		p{

			font-family: MAILR___;

			font-size: 70px;

		}

		.blur {

    			filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

    			-webkit-filter: blur(5px); /* Chrome, Opera */

       			-moz-filter: blur(5px);

       			-ms-filter: blur(5px);

            		filter: blur(5px);

    			filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=5, MakeShadow=false); /* IE6~IE9 */

		}

		.hvcenter{

			position: absolute;

			top: 15%;

			left: 10%;

		}

	</style>

	<script type="text/javascript">

		window.onload=CurrentTime;

		function CurrentTime(){

	        	var now = new Date();

		        var year = now.getFullYear();       //年

		        var month = now.getMonth() + 1;     //月

		        var day = now.getDate();            //日

		        var hh = now.getHours();            //时

		        var mm = now.getMinutes();          //分

		        var clock = year + " - ";

		        if(month < 10)

		        	clock += "0";

		        clock += month + " - ";

		        if(day < 10)

		            	clock += "0";

		        clock += day + "&nbsp;&nbsp;&nbsp;";

		        if(hh < 10)

		            	clock += "0";

		        clock += hh + " : ";

		        if (mm < 10)

		        	clock += '0';

		        clock += mm;

		        document.getElementById("time").innerHTML=clock;

		        if(hh>=6&&hh<=12){

		        	document.getElementById("sayhi").innerHTML="Good morning, Wsine";

		        	document.getElementById("myimg").src="morning.jpg";

		        }

		        else if(hh>=13&&hh<=16){

		        	document.getElementById("sayhi").innerHTML="Good noon, Wsine";

		        	document.getElementById("myimg").src="noon.jpg";

		        }

		        else if(hh>=17&&hh<=18){

		        	document.getElementById("sayhi").innerHTML="Good afternoon, Wsine";

		        	document.getElementById("myimg").src="afternoon.jpeg";

		        }

		        else{

		        	document.getElementById("sayhi").innerHTML="Good evening, Wsine";

		        	document.getElementById("myimg").src="night.jpg";

		        }

		}

	</script>

</head>

<body>

	<div id="bg_pic" style="position:absolute; width:100%; height:100%; z-index:-1">

		<img id="myimg" src="morning.jpg" alt="backgroundpicture"  class="blur" width="100%" height="100%">

	</div>

	<div id="" style="width:1000px; height:500px;  text-align:center" class="hvcenter" >

			<p id="sayhi"></p>

			<p id="time"></p>

	</div>

</body>

</html>

附录

背景图片和字体的压缩包

下载

HTML5做的浏览器欢迎界面自动跳转的更多相关文章

  1. html5 video微信浏览器视频不能自动播放

    html5 video微信浏览器视频不能自动播放 一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的最顶层) 二.ios系统解决方案:(无phone手机未测试) <au ...

  2. nginx做http向https的自动跳转

    在访问百度时,在浏览器输入www.baidu.com会自动跳转到https://www.baidu.com不用人工干预,nginx也可以做这样的自动跳转! 首先让nginx服务器监听两个端口,分别是8 ...

  3. JSP实现界面的自动跳转的几种方式

    下面来谈一谈在jsp中实现的几种界面自动跳转的方法. 使用JavaScript脚本 <html> <script language=javascript> function o ...

  4. 根据浏览器UA信息进行跳转（移动和pc）

    如何用php判断一个客户端是手机还是电脑?其实很简单,开发人员都知道,通过浏览器访问网站时,浏览器都会向服务器发送UA,即User Agent(用户代理).不同浏览器.同一浏览器的不同版本.手机浏览器 ...

  5. 判断浏览器及设备的打开方式，自动跳转app中

    如果安装了APP则自动条状app,如果没安装则自动跳转下载页面 <head> 放在head中加载 <script> function redirect() { var appU ...

  6. Nodejs一键实现微信内打开网页url自动跳转外部浏览器访问的功能

    前言 现如今微信对第三方推广链接的审核是越来越严格了,域名在微信中分享转发经常会被拦截,一旦被拦截用户就只能复制链接手动打开浏览器粘贴才能访问,要不然就是换个域名再推,周而复始.无论是哪一种情况都会面 ...

  7. 分享一个微信自动跳转外部浏览器下载app的api接口！

    现在微信渠道可以说是拉新最快的渠道,因为微信具备强裂变性.但是目前微信对第三方下载链接的拦截是越来越严格了,那么想要在微信内肆无忌惮地推广链接就需要用到微信跳转浏览器的接口,那如何获取该接口呢?   ...

  8. Android——实现欢迎界面的自动跳转（转）

    Android实现欢迎界面的自动跳转,就是打开某一个安卓手机应用,出现的欢迎界面停留几秒钟,自动进入应用程序的主界面.在网上看到很多种实现办法,但是感觉这种方法还是比较简单的. 在onCreate里设 ...

  9. 所有浏览器打开后自动打开115.29.163.152/404.html这个网页，然后自动跳转到hao123 解决办法

    这几天,电脑所有浏览器打开后自动打开115.29.163.152/404.html这个网页,然后自动跳转到hao123这个网页,网上查询没解决办法.开始自己找,搜索注册表,都无效,最后下载软件Hija ...

随机推荐

  1. MFC六大核心机制之一：MFC程序的初始化

    很多做软件开发的人都有一种对事情刨根问底的精神,例如我们一直在用的MFC,很方便,不用学太多原理性的知识就可以做出各种窗口程序,但喜欢钻研的朋友肯定想知道,到底微软帮我们做了些什么,让我们在它的框架下 ...

  2. idea 14 svn安装

    安装SVN客户端. 打开IDEA 14 File-setting-Version coltorl-Subversion-General 填入安装路径 打开"VCS"菜单项然后点击& ...

  3. Cent OS 6 主机名设置

    1:查看主机名: #hostname 2:修改主机名: #vi /etc/sysconfig/network ETWORKING=yes HOSTNAME=superboy.com 3:重启生效: # ...

  4. 单例模式（Winform窗体的实现）

    在我的设计模式分类当中,我选择单例模式作为我第一个要写的设计模式,其一,单例模式简单.容易理解让人接受,其二,单例模式很常用,在实际的Winform窗体应用开发中能够带来更好的客户体验. 单例模式的核 ...

  5. 如何添加localizable.strings本地化

    1.在Supporting Files文件夹右键,NewFile… -> iOS -> Resources -> String Files,命名为Localizable.string ...

  6. 一个完整的菜谱客户端（android源码）（有独立后台）

    该源码是自己写的,是一个完整的菜谱类客户端.功能简单比较简单,界面比较丑,自己乱拼接的,只为学习用.功能相对完整,数据来自独立后台,通过http协议获取,全部来自真实数据.代码里面有获取数据的相应ur ...

  7. Mvc多级Views目录

    一般我们在mvc开发过程中,都会碰到这样的问题.页面总是写在Views文件夹下,而且还只能一个Controller的页面只能写在相应的以Controller名命名的文件夹下.如果我们写到别处呢?那么肯 ...

  8. Ado.net利用反射执行SQL得到实体

    public Model.orderParent GetTraceIDforID(string orderid) { string sql = string.Format(" select ...

  9. map与set的遍历

    map有四种方式: 1.直接遍历 keySet 2.使用Iterator //注意next放回的对象是map.Entry<K,V>,而使用的iterator是通过entrySet返回的一个 ...

  10. python 字符串格式化 (%操作符)

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 在许多编程语言中都包含有格式化字符串的功能,比如C和Fortran语言中的格式化输 ...