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. nginx之keepalive

    一:设置 keepalive_timeout  0; 发curl: [xxx ~]$ curl -H "Keep-Alive: 60" -H "Connection: k ...

  2. ruby中symbol

    Symbol 是什么 Ruby 是一个强大的面向对象脚本语言(本文所用 Ruby 版本为1.8.6),在 Ruby 中 Symbol 表示“名字”,比如字符串的名字,标识符的名字. 创建一个 Symb ...

  3. Something wrong with FTK's index search results

    My friend she told me last week that FTK could not "see" keywords in a plain text files wh ...

  4. sed的惯常用法

    1:注释掉某一行这个经常会遇到的,把配置文件里某一行注释掉.让他不起作用.sed -i -e ’121 s/^/#/’ /usr/local/apache2/conf/httpd.conf上面一行命令 ...

  5. PayPal 开发详解（六）：下载paypal立即付款SDK 并编译打包

    1.下载PayPal REST SDKs,地址:https://developer.paypal.com/docs/api/rest-sdks/ paypal api比较混乱,有的已经不推荐使用,比如 ...

  6. RocketMQ学习记录

    RocketMQ是一款分布式.队列模型的消息中间件,具有以下特点: 1.能够保证严格的消息顺序 2.提供丰富的消息拉取模式 3.高效的订阅者水平扩展能力 4.实时的消息订阅机制 5.亿级消息堆积能力 ...

  7. wpf常见枚举收集

    Icons made by from www.flaticon.com

  8. linux下alias命令详解

    功能说明:设置指令的别名. 语 法:alias[别名]=[指令名称] 形如: alias cp=“cp -i” : 补充说明:用户可利用alias,自定指令的别名.若仅输入alias,则可列出目前所有 ...

  9. echarts简单使用案例

    先上效果图:

  10. Mac上添加adb_usb.ini

    max上添加android驱动支持 用到的命令: 命令方式最简单,键入如下两行命令你就可以实现对文件的现实和隐藏功能了.这个时候肯定会有童鞋问:“在哪里敲命令呢?”,Launchpad——其他——终端 ...