网络时空 | 网页特效

特效说明

一个固定在右上角的时间显示，可以带背景色，还是很好的

特

效

代

码

//layer height
var layerH = 70;

//layer width
var layerW = 150;

//location of the layer on the page:
//top_left, top_right, "bottom_left", "bottom_right"
var location = "top_right";

//background color of the layer:
//transparent - inherits the background of the page;
//any color as a word or in hexadecimal
var bgcolor = "yellow";

//font color
var text = "black";

//font size
var font_size = 3;

//font face
var font_face = "Arial";

//your words
var message = "现在时间：<br>";

/***************** DO NOT EDIT BELOW THIS LINE ***************/
var layer;
var IE = document.all;
var updateWatch;
var start = 0;

function writeTime(time)
{
    var color, size, face, out;
	
	color = (text)? text : "black";
	size = (font_size)? font_size : 2;
	face = (font_face)? font_face : "Arial";
    
	out = "<font face = \"" + face + "\" size = " + size + " color = \"" + color + "\">";
	out += (message)? message : "";

if(!IE)
      out += "      " + time + "</font>";
	else
      out +=  time + "</font>";
		
	if(IE)
	  layer.innerHTML = "<table width=\"100%\" height=\"100%\"><tr><td valign=\"middle\" align=\"center\">" + out + "</td></tr></table>";
    else
    {		
	  layer.document.open();
	  layer.document.write("<br>  " + "<b>" + out + "</b>");
	  layer.document.close();
	}
}

function clock()
{
  var hh, mm, ss;
  var time, d, ampm = "am";

d = new Date();
  
  hh = d.getHours();
  mm = d.getMinutes();
  ss = d.getSeconds();
  
  if(hh > 12)
  {
     hh -= 12;
	 ampm = "pm";
  }	
  
  hh = (hh < 10)? "0" + hh : hh;
  mm = (mm < 10)? "0" + mm : mm;
  ss = (ss < 10)? "0" + ss : ss;

time = hh + ":" + mm + ":" + ss + "  " + ampm;
  
  writeTime(time);
}

function timer()
{
   var hh, mm, ss;
   var time;
   
   hh = parseInt("0" + (start / 3600), 10);
   mm = parseInt("0" + ((start - (hh * 3600)) / 60), 10);
   ss = start - (hh * 3600) - (mm * 60);
   
   if(start < 60)
     time = ss + " seconds ";

else if(start < 3600 && start > 60)
     time = mm + " minutes " + ss + " seconds ";
   
   else
   {
     time = (hh == 1)? hh + " hour " : hh + " hours ";
	 time += (mm == 1)? mm + " minute " : mm + " minutes ";	 
   }
   writeTime(time);
   start++;
}

function scroller()
{
  var docH, docW, scrollT, scrollL;
  	   
  if(IE)
  {
    layer =  document.all.pane;

if(layerH)
	{
	  layer.height = layerH;
      layer.style.height = layerH;
	}  
	else  
	  layerH = layer.height;

if(layerW)
	{
	  layer.width = layerW;
	  layer.style.width = layerW;
	}
	else  
	  layerW = layer.width;
	
	if(bgcolor)
	  layer.style.background = bgcolor;

docH = document.body.clientHeight;
	docW = document.body.clientWidth;
	
	scrollT = document.body.scrollTop;
	scrollL = document.body.scrollLeft;

switch(location)	
	{
	   case "top_left": 	layer.style.posTop =  scrollT;
                        	layer.style.posLeft = scrollL;
							break;

case "top_right":   	layer.style.posTop =  scrollT;
                        	layer.style.posLeft = scrollL + (docW - layerW);
                            break;

case "bottom_left":  layer.style.posTop =  scrollT + (docH - layerH);
                        	layer.style.posLeft = scrollL;
                            break;

case "bottom_right": layer.style.posTop =  scrollT + (docH - layerH);
                        	layer.style.posLeft = scrollL + (docW - layerW);
                            break;
	  
	   default:             layer.style.posTop =  scrollT;
                        	layer.style.posLeft = scrollL;
	}
    layer.style.visibility = "visible";  
  }
  else
  {

layer = document.layers.pane;
	
    if(!layerH)
	  layerH = 200;

if(!layerW)
	  layerW = 100;

layer.resizeTo(layerW,layerH);
	  
    if(bgcolor && bgcolor != "transparent")
	  layer.bgColor = bgcolor;

docH = window.innerHeight;
	docW = window.innerWidth;
	
	scrollT = window.pageYOffset;
	scrollL = window.pageXOffset;
	
	switch(location.toLowerCase())	
	{
	   case "top_left": 	layer.moveTo(scrollL,scrollT);
							break;

case "top_right":   	layer.moveTo(scrollL + (docW - layerW) - 15, scrollT);
                        	break;

case "bottom_left":  layer.moveTo(scrollL, scrollT + (docH - layerH) - 15);
                            break;

case "bottom_right": layer.moveTo(scrollL + (docW - layerW) - 15,scrollT + (docH - layerH) - 15);
	                        break;
	  
	   default:             layer.moveTo(scrollL,scrollT);
	}
	
	//make layer visible   
    layer.visibility = "show";
  }	
}
//-->

</script>
<style type="text/css">
#pane {position: absolute; visibility: hidden;}
</style>
<span id="pane"><layer name="pane" width=&{layerW}; height=&{layerH};></layer></span>
<script>
<!--
setInterval("scroller();",100);

if(TimerOrClock.toLowerCase() == "clock")
  setInterval("clock();",1000);
else
  setInterval("timer();",1000);
//-->

</script>

@_⌒ 特效预览 @_⌒

看右上角