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 ...

随机推荐

css Sticky footers
写在前面做过网页开发的同学想必都遇到过这样尴尬的排版问题:在主体内容不足够多或者未完全加载出来之前,就会导致出现(图一)的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我 ...
faster-rcnn代码阅读-roi-data层
这一节讲述roi-data层,和这一层有关的结构图如下: roi-data层的prototxt定义如下: layer { name: 'roi-data' type: 'Python' bottom: ...
WinDbg解决BHO不加载
昨天zhengwei同学说他机器上的一个BHO不能正常加载,我把BHO的代码拿过来,在我的两台机器上都验证了一下,一台是Win7+IE8的环境,一台是XP+IE7的环境,都能正常加载.zhengwei ...
Git 远程仓库分支管理
目录目录速查表关联远程代码仓库克隆远程仓库分支管理创建分支切换分支合并分支删除分支解决冲突速查表指令作用 git branch 查看分支 git branch newBran ...
（转）在Source Insight中看Python代码
http://blog.csdn.net/lvming404/archive/2009/03/18/4000394.aspx SI是个很强大的代码查看修改工具,以前用来看C,C++都是相当happy的 ...
ps-奇幻金鱼彩妆
1.打开背景图,拷贝一份防止出错 2增加色相饱和度改变全局的饱和度.这是为了改变嘴唇的颜色.其他变色的地方可以通过添加蒙版,然后用背景色为黑色的画笔擦掉 3给眼睛上加上金鱼置入图片类型选 ...
HDU 2167 状压dp方格取数
题意:给出一个数表,规定取出一个数后周围的八个数都不可取,求可获得的最大数字和思路:状态压缩dp,每一行的取数方法为状态,显然,由于取数规则的限制,可取的状态并不是 1<<size_co ...
Photoshop基础照片美化
自从有了“ps”以后,很多事情变成了可能,你可以出现在任何你想在的地方.而最基本的美化照片的功能,我想是很多同学学习PS的初衷.当你掌握了这门技术,很多人会对你刮目相看!今天小编就和大家分享一下ps的 ...
Number浮点数运算详解
文章来自我的 github 博客,包括技术输出和学习笔记,欢迎star. 一道题 0.1 + 0.2 = ? 在浏览器中测试下计算结果,得到的结果是 0.30000000000000004,并不是理想 ...
双十一HostGator独立服务器方案
一年一度的“双十一”购物狂欢节到来,各大电商平台线上消费的各种“吸金”开启了“双十一”模式,一年一度的“双十一”网购狂欢又开始以“巨大的价格优势”来勾起消费者的购买欲望. 此次双十一期间,HostGa ...

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

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

随机推荐

热门专题