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. HTML5-新API-geolocation-实例-距离跟踪器

    <body onLoad="loadDemo()"> <header> <h1>oldmeter演示</h1> <h4> ...

  2. zedboard如何从PL端控制DDR读写(三)——AXI-FULL总线调试

    之前的项目和培训中,都只用到了AXI-Lite或者AXI-Stream,对于AXI-FULL知之甚少,主要是每次一看到那么多接口信号就望而却步了. 现在为了调试DDR,痛下决心要把AXI-FULL弄懂 ...

  3. vsftp配置参数

    转载:http://blog.chinaunix.net/uid-134240-id-172158.html listen_address=ip address 指定侦听IP listen_port= ...

  4. poj3692_Kindergarten

    这题目大意是:男孩互相认识,女孩互相认识,一部分男女之间认识,老师要选一部分人,要求这部分人必须都相互认识. 这是一个二部图,先求出补图,在补图中G‘左右两点有连线说明在G中两者不认识,反之成立. 所 ...

  5. 通过Migration在EF6中用多个DbContext

    通过Migration在EF6中用多个DbContext EF EF6 C# Migration 通过Migration在EF6中用多个DbContext 前言 实现目标 设置多数据上下文 更新数据脚 ...

  6. DOS终端不能使用JAVA命令

    DOS 终端 java 命令OK javac 命令OK java version  命令OK 写了小程序HelloWorld 测试 ,文件名HelloWorld.java public class H ...

  7. Linux安装配置php环境的方法

    本文实例讲述了Linux安装配置php环境的方法.分享给大家供大家参考,具体如下: 1.获取安装文件: http://www.php.net/downloads.php php-5.3.8.tar.g ...

  8. javascript组件化(转)

    javascript组件化(转) By purplebamboo 3月 16 2015 更新日期:3月 23 2015 文章目录 1. 最简陋的写法 2. 作用域隔离 3. 面向对象 4. 抽象出ba ...

  9. web.xml中的url-pattern映射规则

    Servlet和filter是J2EE开发中常用的技术,使用方便,配置简单.servlet和filter中的url-pattern有一些文章在里面的,总结了一些东西,以免遇到问题又要浪费时间. 一,s ...

  10. css下拉菜单效果

    <style> *{padding: 0; margin: 0;} .menu {} li { list-style-type: none; } .menu li {float: left ...