JavaScript特效源码，5、背景特效
1、数字时钟
背景时钟[好大的钟][推荐][共1步]
====1、以下是这个效果的全部代码。[最好从一个空页面开始]
<html>
<head>
<TITLE>背景时钟</TITLE>
<script language=javaScript>
<!--//
function clockon() {
thistime= new Date()
var hours=thistime.getHours()
var minutes=thistime.getMinutes()
var seconds=thistime.getSeconds()
if (eval(hours) <10) {hours="0"+hours}
if (eval(minutes) < 10) {minutes="0"+minutes}
if (seconds < 10) {seconds="0"+seconds}
thistime = hours+":"+minutes+":"+seconds
if(document.all) {
bgclocknoshade.innerHTML=thistime
bgclockshade.innerHTML=thistime
}
if(document.layers) {
document.bgclockshade.document.write('<div >'+thistime+'</div>')
document.bgclocknoshade.document.write('<div >'+thistime+'</div>')
document.close()
}
var timer=setTimeout("clockon()",200)
}
//-->
</script>
<link rel="stylesheet" href="../style.css"></head>
<body onLoad="clockon()">
<div ></div>
<div ></div>
<div >
</div>
</body>
</html>
说明：时钟显示的位置需要你修正TOP,LEFT参数来确定。TOP表示层距离显示器顶部的象素值，LEFT表示距离左侧的象素值。
2、永远居中的图片
永远居中的背景图片[推荐][共1步][修改图片名称]
====1、将以下代码加入HEML的<body></body>之间：
<STYLE TYPE="text/css">
<!--
BODY {background-image: URL(图片名称.gif);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;}
-->
</STYLE>
3、随机显示的背景图片
随机显示的背景图片[想别人每次看你页面时背景都不一样吗？][共1步]
====1、将以下代码加入HTML的<head></head>之间：
<script LANGUAGE="JavaScript">
bg = new Array(2); //设定图片数量，如果图片数为3，这个参数就设为2，依次类推
bg[0] = 'bg1.gif' //显示的图片路径，可用http://
bg[1] = 'bg2.gif'
bg[2] = 'bg3.gif'
index = Math.floor(Math.random() * bg.length);
document.write("<BODY BACKGROUND="+bg[index]+">");
</script>
4、不断变换的背景颜色
不停变换的背景颜色[共1步]
====1、将以下代码加入HTML的<body></body>之间：
<body bgColor="#ffffff" onload="chgCol(); pingpong();">
<script language="JavaScript">
<!-- Hide from JavaScript-Impaired Browsers
var pos = 10;
function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this[i] = initArray.arguments[i];
}
}
var col=new initArray("4b","5b","8b","8b");
col[0] = "yellow";
col[1] = "coral";
col[2] = "orange";
col[3] = "red";
col[4] = "greenyellow";
col[5] = "lime";
col[6] = "turquoise";
col[7] = "coral";
col[8] = "blueviolet";
col[9] = "violet";
function chgCol() {
pos++;
if (pos<0||pos>9) {
pos = 0;
}
document.bgColor = col[pos];
setTimeout("chgCol()",5000);
/* Change above set to every 10 seconds (1000 = 1 sec) If
you wish to speed it up, lower the number. To slow it
down, raise the number. */
}
var yourwords = "不斷變化背景色彩";var buffer1=" ";var buffer2=" ";var message1=buffer1+yourwords+buffer2;var dir = "left";var speed =150;function pingpong(){if (dir == "left") { message2=message1.substring(2,message1.length)+" "; window.status=message2; setTimeout("pingpong();",speed); message1=message2; if (message1.substring(0,1) == "*") dir="right"; }else { message2=" "+message1.substring(0,message1.length-2); window.status=message2; setTimeout("pingpong();",speed); message1=message2; if (message1.substring(message1.length-1,message1.length) == "*") dir="left"; }}// --></script>
5、背景颜色自己选
背景颜色自己选[推荐][共1步]
====1、以下是这个效果的全部代码。[最好从一个空页面开始]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb_2312-80">
<title>新页面 </title>
</head>
<body>
<script language="JavaScript">
<!--
done = 0;
step = 4
function anim(yp,yk)
{
if(document.layers) document.layers["napis"].top=yp;
else document.all["napis"].style.top=yp;
if(yp>yk) step = -4
if(yp<60) step = 4
setTimeout('anim('+(yp+step)+','+yk+')', 35);
}
function start()
{
if(done) return
done = 1;
if(navigator.appName=="Netscape") {
document.napis.left=innerWidth/2 - 145;
anim(60,innerHeight - 60)
}
else {
napis.style.left=11;
anim(60,document.body.offsetHeight - 60)
}
}
//-->
</script>
<div
style="position: absolute;top: -50;
color: #000000;font-family:宋体;font-size:9pt;">
</div><script language="JavaScript">
<!--
setTimeout('start()',10);
//-->
</script>
<script language="JavaScript">
<!-- Begin
function initArray() {
for (var i = 0; i < initArray.arguments.length; i++) {
this[i] = initArray.arguments[i];
}
this.length = initArray.arguments.length;
}
var colors = new initArray(
"#000000","#0000FF","#80FFFF","#80FF80","#FFFF00","#FF8000","#FF00FF","#FF0000"
);
delay = 100
link = 0;
vlink = 0;
function linkDance() {
link = (link+1)%colors.length;
vlink = (vlink+1)%colors.length;
document.linkColor = colors[link];
document.vlinkColor = colors[vlink];
setTimeout("linkDance()",delay);
}
linkDance();
// End -->
</script>
<script>
function colors(c1){
this.c1 = c1;
}
a00 = new colors("FFFBD0");
a01 = new colors("FF0000");
a02 = new colors("FF8080");
a03 = new colors("FF8000");
a04 = new colors("FFFF00");
a05 = new colors("000080");
a06 = new colors("0000FF");
a07 = new colors("008000");
a08 = new colors("00FF00");
a09 = new colors("804000");
a10 = new colors("808000");
a11 = new colors("000000");
a12 = new colors("FFFFFF");
a13 = new colors("C0C0C0");
a14 = new colors("408080");
a15 = new colors("808080");
a16 = new colors("D2BF51");
a17 = new colors("44BBE8");
a18 = new colors("C97AB9");
a19 = new colors("A2C97A");
a20 = new colors("804000");
a21 = new colors("6AE6C4");
a22 = new colors("33A3D1");
a23 = new colors("6C9AEE");
function changebg(type){
scheme = type;
document.bgColor = scheme.c1;
timerdocument.bgColor = scheme.c2', document.selector.value * 10);
}
</script>
<form NAME="selector">
<p><input TYPE="button" onClick="changebg(a00)" ><input
TYPE="button" onClick="changebg(a01)" ><input
TYPE="button" onClick="changebg(a02)" ><input
TYPE="button" onClick="changebg(a03)" ><input
TYPE="button" onClick="changebg(a04)" ><input
TYPE="button" onClick="changebg(a05)" ><input
TYPE="button" onClick="changebg(a06)" ><input
TYPE="button" onClick="changebg(a07)" ><input
TYPE="button" onClick="changebg(a08)" ><input
TYPE="button" onClick="changebg(a09)" ><input
TYPE="button" onClick="changebg(a10)" ><input
TYPE="button" onClick="changebg(a11)" ><input
TYPE="button" onClick="changebg(a12)" ><input
TYPE="button" onClick="changebg(a13)" ><input
TYPE="button" onClick="changebg(a14)" ><input
TYPE="button" onClick="changebg(a15)" ><input
TYPE="button" onClick="changebg(a16)" ><input
TYPE="button" onClick="changebg(a17)" ><input
TYPE="button" onClick="changebg(a18)" ><input
TYPE="button" onClick="changebg(a19)" ><input
TYPE="button" onClick="changebg(a20)" ><input
TYPE="button" onClick="changebg(a21)" ><input
TYPE="button" onClick="changebg(a22)" ><input
TYPE="button" onClick="changebg(a23)" > </p>
</form>
</body>
</html>