三更论坛技术版『 网站建设 』 → 网页特效代码选集


  共有15757人关注过本帖树形打印复制链接

主题:网页特效代码选集

帅哥哟,离线,有人找我吗?
荞麦
  11楼 | QQ | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:坛主 帖子:7889 积分:39456 威望:0 精华:5 注册:2004-7-31 17:34:24
  发帖心情 Post By:2006-1-4 15:54:47 [只看该作者]

21、按钮上的时间

脚本说明:
第一步:把如下代码加入<body>区域中
<script language="JavaScript">
var timerID = null;
var timerRunning = false;
// Called by both onLoad in BODY tag, and Resume button.
function startclock ()
{
// Make sure the clock is stopped
stopclock();
time();
}
// Kills clock.
function stopclock ()
{
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function time ()
{
var now = new Date();
var yr = now.getYear();
var mName = now.getMonth() + 1;
var dName = now.getDay() + 1;
var dayNr = ((now.getDate()<10) ? "0" : "")+ now.getDate();
var ampm = (now.getHours() >= 12) ? " P.M." : " A.M."
var hours = now.getHours();
hours = ((hours > 12) ? hours - 12 : hours);
var minutes = ((now.getMinutes() < 10) ? ":0" : ":") + now.getMinutes();
var seconds = ((now.getSeconds() < 10) ? ":0" : ":") + now.getSeconds();
if(dName==1) Day = "Sunday";
if(dName==2) Day = "Monday";
if(dName==3) Day = "Tuesday";
if(dName==4) Day = "Wednesday";
if(dName==5) Day = "Thursday";
if(dName==6) Day = "Friday";
if(dName==7) Day = "Saturday";
if(mName==1) Month="January";
if(mName==2) Month="February";
if(mName==3) Month="March";
if(mName==4) Month="April";
if(mName==5) Month="May";
if(mName==6) Month="June";
if(mName==7) Month="July";
if(mName==8) Month="August";
if(mName==9) Month="September";
if(mName==10) Month="October";
if(mName==11) Month="November";
if(mName==12) Month="December";
// String to display current date.
var DayDateTime=(" "
+ Day
+ " "
+ Month
+ " "
+ dayNr
+ ", "
+ ""
+ yr
+ " "
+ hours
+ minutes
+ seconds
+ " "
+ ampm
);
// Displays Day-Date-Time on the staus bar.
document.clock.face.value=DayDateTime;
timerID = setTimeout("time()",1000);
timerRunning = true;
}
// Stops clock and clears status bar.
function clearStatus()
{
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
window.status=" ";
}
// -- End Hiding Here -->
</script>

<form name="clock" onSubmit="0">
<input type=button name="face" size=100 value=" JavaScript!! ">
</form>


第二步:把<body>中的内容改为:
<body bgcolor="#fef4d9" onLoad="startclock ()">

22、时间按钮提醒

脚本说明:
把如下代码加入<body>区域中:
<script LANGUAGE="JavaScript">
<!-- Begin
day = new Date();
miVisit = day.getTime();
function clock() {
today = new Date();
hrNow = today.getHours();
mnNow = today.getMinutes();
scNow = today.getSeconds();
miNow = today.getTime();
if (hrNow == 0) {
hour = 12;
ap = "A";
} else if(hrNow <= 11) {
ap = "A";
hour = hrNow;
} else if(hrNow == 12) {
ap = "P";
hour = 12;
} else if (hrNow >= 13) {
hour = (hrNow - 12);
ap = "P";
}
if (hrNow >= 13) {
hour = hrNow - 12;
}
if (mnNow <= 9) {
min = "0" + mnNow;
}
else (min = mnNow)
if (scNow <= 9) {
secs = "0" + scNow;
} else {
secs = scNow;
}
time = hour + ":" + min + ":" + secs + ap;
document.form.button.value = time;
setTimeout('clock()', 1000);
}
function timeInfo() {
milliSince = miNow;
milliNow = miNow - miVisit;
secsVisit = Math.round(milliNow / 1000);
minsVisit = (milliNow / 1000) / 60;
alert("给你提个醒: "
+ "你已经在本页面上停留了大约" + minsVisit + "分或"
+ secsVisit + "秒");
}
document.write("<left><form name=\"form\">"
+ "<input type=button value=\"Click for info!\""
+ " name=button onClick=\"timeInfo()\"></form></left>");
onError = null;
clock();
// End -->
</script>



三更论坛交流群:11484137 三更有梦休闲群:30275742
荞麦的新浪博客:http://blog.sina.com.cn/qiaomai
有事请点这里与荞麦临时会话QQ留言
 回到顶部
帅哥哟,离线,有人找我吗?
荞麦
  12楼 | QQ | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:坛主 帖子:7889 积分:39456 威望:0 精华:5 注册:2004-7-31 17:34:24
  发帖心情 Post By:2006-1-4 15:57:52 [只看该作者]

23、页面完成时间

脚本说明:
把如下代码加入<body>区域中:
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function HowLongSince(startmonth, startdate, startyear) {
sdate=startdate;
smonth=startmonth-1;
syear=startyear;
var DaysInMonth = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
today = new Date()
var thisyear = today.getFullYear();
var thismonth = today.getMonth();
var thisdate = today.getDate();
mstart = new Date(syear,(smonth==12?1:smonth+1),1);
days1 = (mstart - new Date(syear,smonth,sdate))/(24*60*60*1000)-1;
mend = new Date(thisyear,thismonth,1);
days2 = (new Date(thisyear,thismonth,thisdate) - mend)/(24*60*60*1000)+1;
dayst = days1 + days2;
if (dayst >= DaysInMonth[smonth]) {
AddOneMonth = 1;
dayst -= DaysInMonth[smonth];
}
else AddOneMonth = 0;
ydiff1 = thisyear-mstart.getFullYear();
mdiff1 = thismonth-mstart.getMonth()+AddOneMonth;
if (mdiff1 >11) { mdiff1=0; ydiff1++; }
if (mdiff1 < 0) { mdiff1 = mdiff1 + 12; ydiff1--; }
temp = (ydiff1==0?"":(ydiff1==1?ydiff1+" year and ":ydiff1 + " years, "));
temp += (mdiff1==0?"0 months, and ":(mdiff1==1?mdiff1+" month, and ":mdiff1+" months, and "));
temp += (dayst==0?"no days":(dayst==1 ? " 1 day." : dayst + " days" ));
return temp;
}
// End -->
</script>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
document.write("本页面已经制作完成:");
document.write("<font color=red>");
document.write(HowLongSince(06,15,99));
// this is the date your site was created. day,month,year
document.write("</font>了");
// End -->
</script>

24、时钟加在背景上

脚本说明:
第一步:把如下代码加入<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<head>区域中:
<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>

第二步:把<body>中加入如下代码:
<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>中内容改为:
<body bgcolor="#fef4d9" onLoad="clockon()">



三更论坛交流群:11484137 三更有梦休闲群:30275742
荞麦的新浪博客:http://blog.sina.com.cn/qiaomai
有事请点这里与荞麦临时会话QQ留言
 回到顶部
帅哥哟,离线,有人找我吗?
荞麦
  13楼 | QQ | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:坛主 帖子:7889 积分:39456 威望:0 精华:5 注册:2004-7-31 17:34:24
  发帖心情 Post By:2006-1-6 10:16:57 [只看该作者]

25、文本静止不动

脚本说明:
把如下代码加入<body>区域中
<div id="KBStatic" style="position:absolute; left:3px; top:0px; width:553px; height:70px; z-index:25">
<font size="5" color="#CC3366"><a href=lu.htm>欢迎来到Javascript世界</a></font></div>
<script language=JavaScript>
function KB_keepItInIE(theName,theWantTop,theWantLeft) {
theRealTop=parseInt(document.body.scrollTop)
theTrueTop=theWantTop+theRealTop
document.all[theName].style.top=theTrueTop
theRealLeft=parseInt(document.body.scrollLeft)
theTrueLeft=theWantLeft+theRealLeft
document.all[theName].style.left=theTrueLeft
}
function KB_keepItInNN(theName,theWantX,theWantY) {
theRealLay=document.layers[theName]
theBadX=self.pageYOffset
theBadY=self.pageXOffset
theRealX=theBadX+theWantX
theRealY=theBadY+theWantY
theRealLay.moveTo(theRealY,theRealX)
}
IE4=(document.all)?1:0
NN4=(document.layers)?1:0
if (IE4)
setInterval('KB_keepItInIE("KBStatic",0,0)',1)
if (NN4)
setInterval('KB_keepItInNN("KBStatic",0,0)',1)
</script>

26、重要信息说明脚本

脚本说明:
第一步:把如下代码加入<body>区域中
<script language="javascript">
//显示的信息,可以使用HTML语法,注意引号用法,单套双。
var message='<b><font size=5 face=arial color=red><a href="http://www.cn76.com/js/" target="_blank">请点击进入本站</a></font></b>'

//背景色
var backgroundcolor="#eeffee"

//0 代表信息永远显示,1 代表信息只显示一段时间,2为随机显示模式;
var displaymode=1

//如果显示模式为在指定时间内显示,输入时间段(1000为1秒);
var displayduration=30000

//1代表闪烁,0代表不闪烁;
var flashmode=1
//如果设置了闪烁,输入闪烁的颜色;
var flashtocolor="lightgreen"

////下面不必修改///


function regenerate(){
window.location.reload()
}

var which=0

function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",400)
}


function display2(){
if (document.layers){
if (topmsg.visibility=="show")
topmsg.visibility="hide"
else
topmsg.visibility="show"
}
else if (document.all){
if (topmsg.style.visibility=="visible")
topmsg.style.visibility="hidden"
else
topmsg.style.visibility="visible"
setTimeout("display2()",Math.round(Math.random()*10000)+10000)
}
}

function flash(){
if (which==0){
if (document.layers)
topmsg.bgColor=flashtocolor
else
topmsg.style.backgroundColor=flashtocolor
which=1
}
else{
if (document.layers)
topmsg.bgColor=backgroundcolor
else
topmsg.style.backgroundColor=backgroundcolor
which=0
}
}


if (document.all){
document.write('<span id="topmsg" style="position:absolute;visibility:hidden">'+message+'</span>')
}


function logoit(){
document.all.topmsg.style.left=document.body.scrollLeft+document.body.clientWidth/2-document.all.topmsg.offsetWidth/2
document.all.topmsg.style.top=document.body.scrollTop+document.body.clientHeight-document.all.topmsg.offsetHeight-4
}


function logoit2(){
topmsg.left=pageXOffset+window.innerWidth/2-topmsg.document.width/2
topmsg.top=pageYOffset+window.innerHeight-topmsg.document.height-5
setTimeout("logoit2()",90)
}

function setmessage(){
document.all.topmsg.style.left=document.body.scrollLeft+document.body.clientWidth/2-document.all.topmsg.offsetWidth/2
document.all.topmsg.style.top=document.body.scrollTop+document.body.clientHeight-document.all.topmsg.offsetHeight-4
document.all.topmsg.style.backgroundColor=backgroundcolor
document.all.topmsg.style.visibility="visible"
if (displaymode==1)
setTimeout("topmsg.style.visibility='hidden'",displayduration)
else if (displaymode==2)
display2()
if (flashmode==1)
setInterval("flash()",1000)
window.onscroll=logoit
window.onresize=new Function("window.location.reload()")
}


function setmessage2(){
topmsg=new Layer(window.innerWidth)
topmsg.bgColor=backgroundcolor
regenerate2()
topmsg.document.write(message)
topmsg.document.close()
logoit2()
topmsg.visibility="show"
if (displaymode==1)
setTimeout("topmsg.visibility='hide'",displayduration)
else if (displaymode==2)
display2()
if (flashmode==1)
setInterval("flash()",1000)
}


if (document.layers)
window.onload=setmessage2
else if (document.all)
window.onload=setmessage
</script>



三更论坛交流群:11484137 三更有梦休闲群:30275742
荞麦的新浪博客:http://blog.sina.com.cn/qiaomai
有事请点这里与荞麦临时会话QQ留言
 回到顶部
帅哥哟,离线,有人找我吗?
荞麦
  14楼 | QQ | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:坛主 帖子:7889 积分:39456 威望:0 精华:5 注册:2004-7-31 17:34:24
  发帖心情 Post By:2006-1-6 10:58:15 [只看该作者]

27、先后点击链接

脚本说明:
第一步:把如下代码加入<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<head>区域中
<script language="JavaScript">
var num = 2;
var mypage = 'http://www.cn76.com/javascript.zip';
var pissoff = ' 请先点击上面链接 ';
allow = Array();
allow[num] = 2;
function gotoit(link){
if (link != num){
allow[link] = 2;
} else {
for (i=1;i<=num;i++){
if (allow[i] != 2){
i = num + 1;
lemmeIn = 0;
} else {
lemmeIn = 1;
}
}
if (lemmeIn == 1){
window.location = mypage;
} else {
alert(pissoff);
}
}
}
//--->
</script>

第二步:把如下代码加入<body>区域中
<a href="http://www.cn76.com" onClick="gotoit(1)" target="_blank"><u>先帮忙点击这里</u></a><BR>
<a href="javascript:gotoit(num)"><u>下载本站所有页面</u></a>

28、下雨

脚本说明:
把如下代码加入<body>区域中
<script language="JavaScript">
<!--
var no = 50;
var speed = 1;
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var s, x, y, sn, cs;
var a, r, cx, cy;
var i, doc_width = 800, doc_height = 600;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
else
if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
x = new Array();
y = new Array();
r = new Array();
cx = new Array();
cy = new Array();
s = 8;
for (i = 0; i < no; ++ i) {
initRain();
if (ns4up) {
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"1\" ");
document.write("top=\"1\" visibility=\"show\"><font color=\"red\">");
document.write(",</font></layer>");
}
else {
document.write("<layer name=\"dot"+ i +"\" left=\"1\" ");
document.write("top=\"1\" visibility=\"show\"><font color=\"red\">");
document.write(",</font></layer>");
}
}
else
if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"red\">");
document.write(",</font></div>");
}
else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"red\">");
document.write(",</font></div>");
}
}
}
function initRain() {
a = 6;
r[i] = 1;
sn = Math.sin(a);
cs = Math.cos(a);
cx[i] = Math.random() * doc_width + 1;
cy[i] = Math.random() * doc_height + 1;
x[i] = r[i] * sn + cx[i];
y[i] = cy[i];
}
function makeRain() {
r[i] = 1;
cx[i] = Math.random() * doc_width + 1;
cy[i] = 1;
x[i] = r[i] * sn + cx[i];
y[i] = r[i] * cs + cy[i];
}
function updateRain() {
r[i] += s;
x[i] = r[i] * sn + cx[i];
y[i] = r[i] * cs + cy[i];
}
function raindropNS() {
for (i = 0; i < no; ++ i) {
updateRain();
if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {
makeRain();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
document.layers["dot"+i].top = y[i];
document.layers["dot"+i].left = x[i];
}
setTimeout("raindropNS()", speed);
}
function raindropIE() {
for (i = 0; i < no; ++ i) {
updateRain();
if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {
makeRain();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
document.all["dot"+i].style.pixelTop = y[i];
document.all["dot"+i].style.pixelLeft = x[i];
}
setTimeout("raindropIE()", speed);
}
if (ns4up) {
raindropNS();
}
else
if (ie4up) {
raindropIE();
}

-->
</script>



三更论坛交流群:11484137 三更有梦休闲群:30275742
荞麦的新浪博客:http://blog.sina.com.cn/qiaomai
有事请点这里与荞麦临时会话QQ留言
 回到顶部