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 id="bgclockshade" style="position:absolute;visibility:visible;font-family:Verdana;color:FFAAAAA;font-size:120px;top:10px;left:152px">'+thistime+'</div>')

document.bgclocknoshade.document.write('<div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:Verdana;color:DDDDDD;font-size:120px;top:10px;left:150px">'+thistime+'</div>')

document.close()

}

var timer=setTimeout("clockon()",200)

}

//-->

</script>

<link rel="stylesheet" href="../style.css"></head>

<body onLoad="clockon()">

<div id="bgclockshade" style="position:absolute;visibility:visible;font-family:Arial;color:FF8888;font-size:120px;top:102px;left:152px"></div>

<div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:Arial;color:DDDDDD;font-size:120px;top:100px;left:150px"></div>

<div id="mainbody" style="position:absolute; visibility:visible">

</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 id="napis"

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;

timerID=setTimeout('document.bgColor = scheme.c2', document.selector.value * 10);

}

</script>

<form NAME="selector">

<p><input TYPE="button" onClick="changebg(a00)" style="background-color: rgb(255,251,208)"><input

TYPE="button" onClick="changebg(a01)" style="background-color: rgb(255,0,0)"><input

TYPE="button" onClick="changebg(a02)" style="background-color: rgb(255,128,128)"><input

TYPE="button" onClick="changebg(a03)" style="background-color: rgb(255,128,0)"><input

TYPE="button" onClick="changebg(a04)" style="background-color: rgb(255,255,0)"><input

TYPE="button" onClick="changebg(a05)" style="background-color: rgb(0,0,128)"><input

TYPE="button" onClick="changebg(a06)" style="background-color: rgb(0,0,255)"><input

TYPE="button" onClick="changebg(a07)" style="background-color: rgb(0,128,0)"><input

TYPE="button" onClick="changebg(a08)" style="background-color: rgb(0,255,0)"><input

TYPE="button" onClick="changebg(a09)" style="background-color: rgb(128,0,0)"><input

TYPE="button" onClick="changebg(a10)" style="background-color: rgb(128,128,0)"><input

TYPE="button" onClick="changebg(a11)" style="background-color: rgb(0,0,0)"><input

TYPE="button" onClick="changebg(a12)" style="background-color: rgb(255,255,255)"><input

TYPE="button" onClick="changebg(a13)" style="background-color: rgb(192,192,192)"><input

TYPE="button" onClick="changebg(a14)" style="background-color: rgb(64,128,128)"><input

TYPE="button" onClick="changebg(a15)" style="background-color: rgb(128,128,128)"><input

TYPE="button" onClick="changebg(a16)" style="background-color: rgb(210,191,81)"><input

TYPE="button" onClick="changebg(a17)" style="background-color: rgb(68,187,232)"><input

TYPE="button" onClick="changebg(a18)" style="background-color: rgb(201,122,185)"><input

TYPE="button" onClick="changebg(a19)" style="background-color: rgb(162,201,122)"><input

TYPE="button" onClick="changebg(a20)" style="background-color: rgb(106,230,196)"><input

TYPE="button" onClick="changebg(a21)" style="background-color: rgb(194,219,185)"><input

TYPE="button" onClick="changebg(a22)" style="background-color: rgb(51,163,209)"><input

TYPE="button" onClick="changebg(a23)" style="background-color: rgb(108,154,238)"> </p>

</form>

</body>

</html>

JavaScript特效源码(5、背景特效)的更多相关文章

JavaScript特效源码(1、文字特效)
注:本文以及以下关于Javascript特效源码都是分享自JavaScript源码大全. 1.逐隐逐现的的特效逐隐逐现的文字特效[推荐使用][适用于IE4++] (修改显示的文字后根据说明进行共2步 ...
多种的android进度条的特效源码
多种的android进度条的特效源码,这个源码是在源码天堂那个网站上转载过来的,我已经修改一部分了,感觉很实用的,大家可以学习一下吧,我就不上传源码了,大家可以直接到那个网站上下载吧. 源码天堂下载地 ...
JavaScript特效源码(4、鼠标特效)
1.鼠标感应--渐现特效鼠标感应渐显图片[平时很模糊的图片鼠标一放上就显示清楚] [修改图片名称即可][共2步] ====1.将以下代码加入HTML的<head></head> ...
3D轮播切换特效源码
这个3D轮播切换特效是我2017年2月份写的当初我刚接触HTML不久,现在把源码分享给大家源码的注释超级清楚 . <!-- 声明文档类型:html 作用:符合w3c统一标准规范每个浏览器 ...
使用C#重写网上的60行 Javascript 俄罗斯方块源码 (带注释)
在很久很久以前,就已经看过 60行Js的俄罗斯方块源码.无奈当时能力不够看明白,当时觉得就是个神作. 现在总算有空再看了,顺便用c#实现一遍(超过60行),顺道熟悉下Js API. 网上其他博客也有分 ...
JavaScript特效源码(7、页面特效二)
7.将站点加入频道栏将站点加入频道栏[看详细说明] ====1.加入channel的方法:使用如下连接指向你的频道文件*.cdf. <a href="javascript:windo ...
JavaScript特效源码(8、其他特效)
1.中文日期中文日期[无须修改][共1步]] ====1.将以下代码加入HEML的<body></body>之间 <script LANGUAGE="Java ...
JavaScript特效源码(6、页面特效一)
1.页面全屏页面全屏显示[ALT+F4关闭][共1步][新弹出窗口并以全屏幕方式显示] ====1.将以下代码加入HTML的<body></body>之间: <form ...
JavaScript特效源码(3、菜单特效)
1.左键点击显示菜单左键弹出式菜单[推荐][修改显示的文字及链接即可][共2步] ====1.将以下代码加入HEML的<head></head>之间: <style t ...

随机推荐

flume配置参数的意义
1.监控端口数据: flume启动: [bingo@hadoop102 flume]$ bin/flume-ng agent --conf conf/ --name a1 --conf-file jo ...
kafka和flume进行整合的日志采集的confi文件编写
配置flume.conf 为我们的source channel sink起名 a1.sources = r1 a1.channels = c1 a1.sinks = k1 指定我们的source收集到 ...
Ubuntu安装msf
环境 root运行 ubuntu18.04 腾讯云服务器控制面板上面所有的端口全部放行本机自带防火墙已拆拆墙是为了能msf接受到会话安装 curl https://raw.githubuser ...
NX二次开发-UFUN体找面函数UF_MODL_ask_body_faces
NX9+VS2012 #include <uf.h> #include <uf_modl.h> #include <uf_obj.h> #include <u ...
NX二次开发-UF_MODL_ask_distance_tolerance获取建模的长度公差
NX9+VS2012 #include <uf.h> #include <uf_modl.h> #include <uf_ui.h> UF_initialize() ...
Annotation详解
转自:http://www.doc88.com/p-995532241886.html 首先我们定义一个简单的注解 package com.qjy.annotation; import java.la ...
Android 配置正式签名和debug签名
为了测试微信分享,微信分享必须有签名信息才能成功调用微信,所以需要debug 下设置签名,方便调试build.gradle里,配置2个签名: signingConfigs { release { ke ...
Java-Idea-笔记：lombok、微信支付依赖
ylbtech-Java-Idea-笔记:lombok.微信支付依赖 1. idea-install-lombok返回顶部 1.0. P:问题描述Idea每打开一个类文件,类名就标红,不影响运行,但g ...
Python正则表达式如何进行字符串替换实例
Python正则表达式如何进行字符串替换实例 Python正则表达式在使用中会经常应用到字符串替换的代码.有很多人都不知道如何解决这个问题,下面的代码就告诉你其实这个问题无比的简单,希望你有所收获. ...
2D转换中的translate里调用matrix()的用法
一开始,经常看到大佬们用matrix的方法,当时完全不会,不知道如何写.到后面,发现都是这样用,导致只能去认真看一下这个东西怎么用,要不然完全跟不上的节奏啊.因此建议大家去看下这篇文章,写的挺不错的, ...

JavaScript特效源码(5、背景特效)

JavaScript特效源码(5、背景特效)的更多相关文章

随机推荐

热门专题