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. 【MySQL】MySQL事务回滚脚本

    MySQL自己的 mysqlbinlog | mysql 回滚不好用,自己写个简单脚本试试: 想法是用mysqlbinlog把需要回滚的事务区域从mysql-bin.file中找到,然后通过脚本再插入 ...

  2. 网络编码 GB2312、GBK与UTF-8的区别

    GB2312.GBK与UTF-8的区别  这是一个异常经典的问题,有无数的新手站长每天都在百度这个问题,而我,作为一个“伪老手”站长,在明白这个这个问题的基础上,有必要详细的解答一下.  首先,我们要 ...

  3. Windows phone 8 学习笔记(8) 定位地图导航（转）

    Windows phone 8 已经不使用自家的bing地图,新地图控件可以指定制图模式.视图等.bing地图的定位误差比较大,在模拟器中测试新地图貌似比较理想.本节主要讲解下位置服务以及新地图控件的 ...

  4. 如何利用jq来实现复选框的全选，反选！

    $("document").ready(function(){ $("#btn1").click(function(){ $("[name='chec ...

  5. 前端工程筹建NodeJs+gulp+bower

    1.安装nodejs nodejs 官网下载安装文件 安装完成之后,在命令窗口执行,(显示nodejs版本) 和(显示npm版本)可以使用这两个命令查看是否安装成功: node -v npm -v 2 ...

  6. ios球体弹跳游戏源码

    一款耐玩的ios游戏源码,画面上有很多小星星,球体落下的时候,你需要在画面上画出一条条的线条让球体弹跳起来然后吃掉小星星,如果没借助球体就失败了.游戏有很多关卡.注意: <ignore_js_o ...

  7. POJ C程序设计进阶 编程题＃4：Tomorrow never knows？

    来源: POJ (Coursera声明:在POJ上完成的习题将不会计入Coursera的最后成绩.) 注意: 总时间限制: 1000ms 内存限制: 65536kB 描述 甲壳虫的<A day ...

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

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

  9. Decorator模式

    Decorator模式能够像标准的继承一样为类添加新的功能. 不同于标准继承机制的是,如果对象进行了实例化,Decorator模式能够在运行时动态地为对象添加新的功能. <?php abstra ...

  10. Java实现抽奖游戏

    代码如下: import java.io.*; public class PresentDemo { /** * @param args */ public static void main(Stri ...