建站学 - 轻松建站从此开始！
高级搜索|网站地图|TAG标签RSS订阅[设为首页] [加入收藏]

建站学-个人建站指南,网页制作,网站设计,网站制作教程

搜索

热门标签:

当前位置: 建站学 > 网页设计 > html/xhtml >

网页常用代码

时间:2011-01-08 22:01来源: 作者: 点击: 次
网页常用代码

1、数字时钟
  说明 数字化的时钟
  代码
<span id="liveclock" style"=width: 109px; height: 15px"></span>
<SCRIPT language=javascript>
function www_helpor_net()
{
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()

if(minutes<=9)
minutes="0"+minutes
if(seconds<=9)
seconds="0"+seconds
myclock="现在时刻：<font size='5' face='Arial black'>"+hours+":"+minutes+":"+seconds+"</font>"
if(document.layers){document.layers.liveclock.document.write(myclock)
document.layers.liveclock.document.close()
}else if(document.all)
liveclock.innerHTML=myclock
setTimeout("www_helpor_net()",1000)
}
www_helpor_net();
//-->
</SCRIPT>


2、六种风格时间
  说明： 六种风格时间显示,一定有你喜欢的！
  效果： 风格一: 星期二,6月1日,2004年
  风格二: 7:56:28上午
  风格三: 星期二,6月1日,2004年 7:56:28上午
  风格四: 6/1/04
  风格五: 7:56:28
  风格六: Tue Jun 1 07:56:28 UTC+0800 2004
  代码：
<SCRIPT language="javascript">
<!--
function initArray()
{
for(i=0;i<initArray.arguments.length;i++)
this[i]=initArray.arguments[i];
}
var isnMonths=new initArray("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
var isnDays=new initArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六","星期日");
today=new Date();
hrs=today.getHours();
min=today.getMinutes();
sec=today.getSeconds();
clckh=""+((hrs>12)?hrs-12:hrs);
clckm=((min<10)?"0":"")+min;clcks=((sec<10)?"0":"")+sec;
clck=(hrs>=12)?"下午":"上午";
var stnr="";
var ns="0123456789";
var a="";

function getFullYear(d)
{
yr=d.getYear();if(yr<1000)
yr+=1900;return yr;}
document.write("<table>");

//下面各行分别是一种风格，把不需要的删掉即可
document.write("<TR><TD>风格一:</TD><TD>"+isnDays[today.getDay()]+","+isnMonths[today.getMonth()]+""+today.getDate()+"日,"+getFullYear(today)+"年");
document.write("<TR><TD>风格二:</TD><TD>"+clckh+":"+clckm+":"+clcks+""+clck+"</TD></TR>");
document.write("<TR><TD>风格三:</TD><TD>"+isnDays[today.getDay()]+","+isnMonths[today.getMonth()]+""+today.getDate()+"日,"+getFullYear(today)+"年 "+clckh+":"+clckm+":"+clcks+""+clck+"</TD></TR>");
document.write("<TR><TD>风格四:</TD><TD>"+(today.getMonth()+1)+"/"+today.getDate()+"/"+(getFullYear(today)+"").substring(2,4)+"</TD></TR>");
document.write("<TR><TD>风格五:</TD><TD>"+hrs+":"+clckm+":"+clcks+"</TD></TR>");
document.write("<TR><TD VALIGN=TOP>风格六:</TD><TD>"+today+"</TD></TR>");

document.write("</table>");
//-->
</SCRIPT>


3、显示停留的时间
  说明： 显示他人在页面停留的时间，而且可以作出提醒 
  代码：
您在本站逗留了<input type="text" name="helpor_net" size="15" style="border: 0 ">
<SCRIPT language="javascript">
<!--
var sec=0;
var min=0;
var hou=0;
flag=0;
idt=window.setTimeout("www_helpor_net();",1000);
function www_helpor_net()
{
sec++;
if(sec==60){sec=0;min+=1;}
if(min==60){min=0;hou+=1;}
if((min>0)&&(flag==0))
{
window.alert("您刚刚来了1分钟!可别急着走开，还有好多好东东等着您呢!--站长");
flag=1;
}
helpor_net.value=hou+"小时"+min+"分"+sec+"秒";
idt=window.setTimeout("www_helpor_net();",1000);
}
//-->

</SCRIPT>

 

4、有影子的数字时钟
  说明： 这个时钟是有影子的，而且还在不停地走着呢 
  代码：
<div id="bgclockshade" style="position:absolute;visibility:visible;font-family:'Arial black';color:#cccccc;font-size:20px;top:50px;left:173px"></div>
<div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:'Arial black';color:#000000;font-size:20px;top:48px;left:170px"></div>
<div id="mainbody" style="position:absolute; visibility:visible">
</div>
<script language=javaScript>
<!--
function www_helpor_net() {
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:20px;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:20px;top:8px;left:150px">'+thistime+'</div>')
document.close()
}
var timer=setTimeout("www_helpor_net()",200)
}
www_helpor_net();
//-->
</script>

 

5、全中文日期显示
  说明： 年月日都是用全中文显示
  代码：
<script language="JavaScript">
<!--
function number(index1){
var numberstring="一二三四五六七八九十";
if(index1 ==0) {document.write("十")}
if(index1 < 10){
document.write(numberstring.substring(0+(index1-1),index1))}
else if(index1 < 20 ){
document.write("十"+numberstring.substring(0+(index1-11),(index1-10)))}
else if(index1 < 30 ){
document.write("二十"+numberstring.substring(0+(index1-21),(index1-20)))}
else{
document.write("三十"+numberstring.substring(0+(index1-31),(index1-30)))}
}

var today1 = new Date()
var month = today1.getMonth()+1
var date = today1.getDate()
var day = today1.getDay()

document.write("公元二零零三年")
number(month)
document.write("月")
number(date)
document.write("日")
//-->
</script>

 

6、打字效果
  说明: 文字在状态栏上从左往右一个一个地显示，就象你打出的字一样 
  代码: <script language="JavaScript">
var msg = "欢迎光临，请多提意见。谢谢! " ;
var interval = 120
var spacelen = 120;
var space10=" ";
var seq=0;
function Helpor_net() {
len = msg.length;
window.status = msg.substring(0, seq+1);
seq++;
if ( seq >= len ) {
seq = 0;
window.status = '';
window.setTimeout("Helpor_net();", interval );
}
else
window.setTimeout("Helpor_net();", interval );
}
Helpor_net();
</script>

 

7、文字从左往右移动
  说明: 文字在状态栏上从右往左显示，而且是循环的 
  代码:
<script>
<!--
function Helpor_net(seed)
{ var m1 = "欢迎来到网页特效世界，请多提意见。谢谢! !" ;
var m2 = "" ;
var msg=m1+m2;
var out = " ";
var c = 1;
var speed = 120;
if (seed > 100)
{ seed-=2;
var cmd="Helpor_net(" + seed + ")";
timerTwo=window.setTimeout(cmd,speed);}
else if (seed <= 100 && seed > 0)
{ for (c=0 ; c < seed ; c++)
{ out+=" ";}
out+=msg; seed-=2;
var cmd="Helpor_net(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd,speed); }
else if (seed <= 0)
{ if (-seed < msg.length)
{
out+=msg.substring(-seed,msg.length);
seed-=2;
var cmd="Helpor_net(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd,speed);}
else { window.status=" ";
timerTwo=window.setTimeout("Helpor_net(100)",speed);
}
}
}
Helpor_net(100);
-->
</script>

 

8、图像自动变化
  说明: 把一张图片变形扭曲成各种不同的长宽，非常好玩 
  代码:
<img src="http://code.helpor.net/picture/swimming.gif" name="u" border="1" alt="很好玩的">
<script language="JavaScript">

var b = 1;
var c = true;

function www_helpor_net(){
if(document.all);

if(c == true) {
b++;
}
if(b==100) {
b--;
c = false
}

if(b==10) {
b++;
c = true;
}

if(c == false) {
b--;
}
u.width=150 + b;
u.height=125 - b;
setTimeout("www_helpor_net()",50);
}
www_helpor_net();
</script>

 

9、漫天飞雪
  说明: 漫天飞雪
  代码：
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
var no = 12;
var speed = 10;
var heart = "http://code.helpor.net/picture/snow.gif";
var flag;
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;

var dx, xp, yp;
var am, stx, sty;
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;
}
dx = new Array();
xp = new Array();
yp = new Array();
amx = new Array();
amy = new Array();
stx = new Array();
sty = new Array();
flag = new Array();
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-30)+10;
yp[i] = Math.random()*doc_height;
amy[i] = 12+ Math.random()*20;
amx[i] = 10+ Math.random()*40;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
flag[i] = (Math.random()>0.5)?1:0;
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(heart+ "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(heart+ "\" border=\"0\"></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;\"><img src=\"");
document.write(heart+ "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(heart+ "\" border=\"0\"></div>");
}
}
}

function helpor_net() {
for (i = 0; i < no; ++ i) {
if (yp[i] > doc_height-50) {
xp[i] = 10+ Math.random()*(doc_width-amx[i]-30);
yp[i] = 0;
flag[i]=(Math.random()<0.5)?1:0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
if (flag[i])
dx[i] += stx[i];
else
dx[i] -= stx[i];
if (Math.abs(dx[i]) > Math.PI) {
yp[i]+=Math.abs(amy[i]*dx[i]);
xp[i]+=amx[i]*dx[i];
dx[i]=0;
flag[i]=!flag[i];
}
document.layers["dot"+i].top = yp[i] + amy[i]*(Math.abs(Math.sin(dx[i])+dx[i]));
document.layers["dot"+i].left = xp[i] + amx[i]*dx[i];

}
setTimeout("helpor_net()", speed);
}

function www_helpor_net() {
for (i = 0; i < no; ++ i) {
if (yp[i] > doc_height-50) {
xp[i] = 10+ Math.random()*(doc_width-amx[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
flag[i]=(Math.random()<0.5)?1:0;
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
if (flag[i])
dx[i] += stx[i];
else
dx[i] -= stx[i];
if (Math.abs(dx[i]) > Math.PI) {
yp[i]+=Math.abs(amy[i]*dx[i]);
xp[i]+=amx[i]*dx[i];
dx[i]=0;
flag[i]=!flag[i];
}

document.all["dot"+i].style.pixelTop = yp[i] + amy[i]*(Math.abs(Math.sin(dx[i])+dx[i]));
document.all["dot"+i].style.pixelLeft = xp[i] + amx[i]*dx[i];
}
setTimeout("www_helpor_net()", speed);
}

if (ns4up) {
helpor_net();
} else if (ie4up) {
www_helpor_net();
}
//-->
</script>

 

10、图片渐渐显隐
  说明: 图片渐渐显隐
  代码: <img src="http://code.helpor.net/picture/swimming.gif" name="u" border="1" style="filter:alpha(opacity=0)">
<script language="JavaScript">

var b = 1;
var c = true;

function helpor_net(){
if(document.all);

if(c == true) {
b++;
}
if(b==100) {
b--;
c = false
}

if(b==10) {
b++;
c = true;
}

if(c == false) {
b--;
}
u.filters.alpha.opacity=0 + b;
setTimeout("helpor_net()",50);
}
helpor_net();
</script>

 

11、图片渐渐显示
  说明: 图片渐渐显示
  代码:
<img src="http://code.helpor.net/picture/swimming.gif" border="1" id="helpor_net" style="visibility:hidden; FILTER:revealTrans(Duration=4.0, Transition=23);">
<SCRIPT FOR="window" EVENT="onLoad" LANGUAGE="vbscript">
helpor_net.filters.item(0).apply()
helpor_net.filters.item(0).transition = 12
helpor_net.Style.visibility = ""
helpor_net.filters(0).play(2.0)
</SCRIPT>

 

12、自由移动的图片 
  说明: 自由移动的图片
  效果: 看到了吗？
  代码:
<div id="helpor_net" style="position:absolute; visibility:visible; left:0px; top:0px; z-index:-1">
<img src="http://code.helpor.net/picture/swimming.gif" border="0">
</div>
<SCRIPT LANGUAGE="JavaScript">
<!--
var isNS = ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 4));
var _all = '';
var _style = '';
var wwidth, wheight;
var ydir = '++';
var xdir = '++';
var id1, id2, id3;
var x = 1;
var y = 1;
var x1, y1;
if(!isNS) {
_all='all.';
_style='.style';
}
function www_helpor_net() {
clearTimeout(id1);
clearTimeout(id2);
clearTimeout(id3);
if (isNS) {
wwidth = window.innerWidth - 55;
wheight = window.innerHeight - 50;
} else {
wwidth = document.body.clientWidth - 55;
wheight = document.body.clientHeight - 50;
}
id3 = setTimeout('randomdir()', 20000);
animate();
}
function randomdir() {
if (Math.floor(Math.random()*2)) {
(Math.floor(Math.random()*2)) ? xdir='--': xdir='++';
} else {
(Math.floor(Math.random()*2)) ? ydir='--': ydir='++';
}
id2 = setTimeout('randomdir()', 20000);
}
function animate() {
eval('x'+xdir);
eval('y'+ydir);
if (isNS) {
helpor_net.moveTo((x+pageXOffset),(y+pageYOffset))
} else {
helpor_net.pixelLeft = x+document.body.scrollLeft;
helpor_net.pixelTop = y+document.body.scrollTop;
}
if (isNS) {
if (helpor_net.top <= 5+pageYOffset) ydir = '++';
if (helpor_net.top >= wheight+pageYOffset) ydir = '--';
if (helpor_net.left >= wwidth+pageXOffset) xdir = '--';
if (helpor_net.left <= 5+pageXOffset) xdir = '++';
} else {
if (helpor_net.pixelTop <= 5+document.body.scrollTop) ydir = '++';
if (helpor_net.pixelTop >= wheight+document.body.scrollTop) ydir = '--';
if (helpor_net.pixelLeft >= wwidth+document.body.scrollLeft) xdir = '--';
if (helpor_net.pixelLeft <= 5+document.body.scrollLeft) xdir = '++';
}
id1 = setTimeout('animate()', 30);
}
var helpor_net=eval('document.'+_all+'helpor_net'+_style);
// -->
</script>


再把<body>改为：
<body OnLoad="www_helpor_net()" OnResize="www_helpor_net()">

 

13、随鼠标触动而变化
  说明: 鼠标接触或者离开图片时，图片大小会相应变化 
  代码:
<span id="s1" style = "width : 150"><a href="http://www.helpor.net" target="_blank" onmouseover="www_helpor_net.style.width='200';" onmouseout="www_helpor_net.style.width= '150';"><Img src="http://code.helpor.net/picture/swimming.gif" id="www_helpor_net"></a></span>

 

14、javascript的容错脚本
  说明: javascript的容错脚本，有了它，你的页面就不会出现错误提示了。 
  代码:
<SCRIPT LANGUAGE="JavaScript">
<!--
function Helpor_net() {
return true;
}
window.onerror = Helpor_net();
// -->
</SCRIPT>

(责任编辑：admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
最新评论 进入详细评论页>>
栏目列表
推荐内容
热点内容

Powered by DedeCMS_V57_GBK_SP2 © 2004-2017 DesDev Inc.

Copyright © 2002-2017 建站学. 晨展科技 版权所有 Power by DedeCms  豫ICP备18028807号-1