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. mongodb replica set(副本集)设置步骤

    网上已经有一大堆的设置步骤的了,根据我遇到的问题,整理一下,如下: 首先先去下载一个mongodb最新版,目前最新版应该是2.6 cd /usr/local/bin wget http://fastd ...

  2. 教你快速写出多线程Junit单元测试用例 - GroboUtils

    摘自: http://mushiqianmeng.blog.51cto.com/3970029/897786/ 本文出自One Coder博客,转载请务必注明出处: http://www.coderl ...

  3. banner淡出效果

    <div class="banner"> <div class="ban"></div> <ul class=&quo ...

  4. 搭建高性能计算环境（四）、应用软件的安装之VASP

    1,将需要的软件包上传vasp.5.2.12.tar.gz.vasp.5.lib.tar.gz.benchmark.Hg.tar.gz. 2,创建vasp目录并解压软件包. mkdir /opt/va ...

  5. PHPExcel操作sae的storage上的文件

    在用PHPexcel操作excel的时候,在本地是好使的,但是把代码部署到sae就不好使了.会遇到如下问题: 文件的操作被拒绝. 这个原因就是sae上的应用文件是不允许改动的.sae提供的文件方案是使 ...

  6. nginx 解决400 bad request 的方法（转载）

    nginx的400错误比较难查找原因,因为此错误并不是每次都会出现的,另外,出现错误的时候,通常在浏览器和日志里看不到任何有关提示. 经长时间观察和大量试验查明,此乃request header过大所 ...

  7. Thinkphp 获取当前url

    $_GET['_URL_'] 获取整个url,返回值是数组 $Think.MODULE_NAME 获取当前class的名称 $Think.ACTION_NAME 获取当前action的方法名称

  8. web.xml中常见配置解读

    文章转自:http://blog.csdn.net/sdyy321/article/details/5838791 有一般XML都必须有的版本.编码.DTD <web-app>下子元素&l ...

  9. Laravel 5 基础（十一）- Eloquent 关系

    一个用户可能有多个文章,一个文章是某个用户书写的,这就是关系.同样文章中可能包含多个 TAG,而一个 TAG 可能关联多个文章. 在项目中,我们已经有了 User.php,也就是用户模型,查看一下,相 ...

  10. 内存分配函数malloc、realloc、calloc、_alloca

    1.内存分配函数_alloca.malloc.realloc.calloc: _alloca 函数原型void * __cdecl _alloca(size_t); 头文件:malloc.h _all ...