zoukankan      html  css  js  c++  java
  • JavaScript特效制作经典精讲(案例入门详解、可直接粘贴拷贝运行、史上最牛案例)

    技巧一、添加链接提示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>徐守威</title>
    </head>

    <body><a href="#" OnMouseOver="window.status='添加链接提示 ...'; return true" OnMouseOut="window.status=''; return true"

    >链接提示</a>
    </body>

    </html>

    技巧二、在网页中加入最后修改日期

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>徐守威</title>
    </head>

    <body>
    <script Language="JavaScript">
    document.write
    ("最后修改日期" + document.lastModified);
    </Script>
    </body>

    </html>

    技巧三、实现图片循环隐现的效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>徐守威</title>
    </head>

    <body onLoad="fade()">
    <script language="JavaScript">
    var b = 1;
    var c = true;
    function fade(){
    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("fade()",50);
    }
    </script>
    <img src="042.gif" width="500" height="600" align="middle" name="u" style="filter:alpha(opacity=0)"/>
    </body>

    </html>

    技巧四、给图片添加探照灯效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>徐守威</title>
    <style>
    #spotlight{
    filter:light
    }
    </style>
    </head>

    <body>

    <img src="042.gif" name="tanzh" width="400" height="420" align="middle" id="spotlight" speed="50"/>
    <script language="JavaScript1.2">
    if (document.all&&window.spotlight){
    var x=new Array()
    var direction=new Array()
    var y=new Array()
    if (spotlight.length==null){
    spotlight[0]=document.all.spotlight
    x[0]=0
    direction[0]="right"
    y[0]=spotlight[0].height
    spotlight[0].filters.light.addPoint(100,50,100,255,255,255,90)
    }
    else
    for (i=0;i<spotlight.length;i++){
    x[i]=0
    direction[i]="right"
    y[i]=spotlight[i].height
    spotlight[i].filters.light.addPoint(100,50,100,255,255,255,90)
    }
    }
    function slidelight(cur){
    spotlight[cur].filters.light.MoveLight(0,x[cur],y[cur],200,-1)
    if (x[cur]<spotlight[cur].width+200&&direction[cur]=="right")
    x[cur]+=10
    else if (x[cur]>spotlight[cur].width+200){
    direction[cur]="left"
    x[cur]-=10
    }
    else if (x[cur]>-200&&x[cur]<-185){
    direction[cur]="right"
    x[cur]+=10
    }
    else{
    x[cur]-=10
    direction[cur]="left"
    }
    }
    if (document.all&&window.spotlight){
    if (spotlight.length==null)
    setInterval("slidelight(0)",spotlight[0].speed)
    else
    for (t=0;t<spotlight.length;t++){
    var temp='setInterval("slidelight('+t+')",'+spotlight[t].speed+')'
    eval(temp)
    }
    }
    </script>
    </body>

    </html>

    技巧五、打开一个新的浏览器窗口并设置窗口的属性

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>徐守威</title>
    <script type="text/JavaScript">
    <!--
    function MM_openBrWindow(theURL,winName,features) { //v2.0
    window.open(theURL,winName,features);
    }
    //-->
    </script>
    </head>

    <body onload="MM_openBrWindow('tanch.html','','status=yes,menubar=yes,width=400,height=400')">
    </body>

    Link-to:
    </html>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>徐守威</title>
    </head>

    <body>
    </body>
    </html>

    技巧六、利用单机来关闭浏览器窗口

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    <title>徐守威</title>
    </head>

    <body>
    <a href="javascript:window.close()">关闭网页</a>
    </body>
    </html>

    技巧七、禁止保存网页

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>徐守威</title>
    <noscript><iframe src="*.htm"></iframe></noscript>
    </head>
    <body>
    </body>
    </html>

    技巧八、制作网页中雪花飘飘效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>徐守威</title>
    <style type="text/css">
    <!--
    body {
    background-color: #3399FF;
    }
    -->
    </style></head>

    <body>
    <img src="042.gif" width="656" height="705" />
    <SCRIPT language=JavaScript1.2>
    var snowsrc="l.gif"
    var no = 10;
    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();
    am = new Array();
    stx = new Array();
    sty = new Array();
    for (i = 0; i < no; ++ i) {
    dx[i] = 0;
    xp[i] = Math.random()*(doc_width-50);
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20;
    stx[i] = 0.02 + Math.random()/10;
    sty[i] = 0.7 + Math.random();
    if (ns4up) {
    if (i == 0) {
    document.write("<layer name="dot"+ i +"" left="15" top="15" visibility="show"><a href="http://mir123456789.com/"><img src='"+snowsrc+"' border="0"></a></layer>");
    } else {
    document.write("<layer name="dot"+ i +"" left="15" top="15" visibility="show"><img src='"+snowsrc+"' border="0"></layer>");
    }
    } else if (ie4up) {
    if (i == 0) {
    document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><a href="http://mir123456789.com"><img src='"+snowsrc+"' border="0"></a></div>");
    } else {
    document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><img src='"+snowsrc+"' border="0"></div>");
    }
    }
    }
    function snowNS() {
    for (i = 0; i < no; ++ i) {
    yp[i] += sty[i];
    if (yp[i] > doc_height-50) {
    xp[i] = Math.random()*(doc_width-am[i]-30);
    yp[i] = 0;
    stx[i] = 0.02 + Math.random()/10;
    sty[i] = 0.7 + Math.random();
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
    }
    dx[i] += stx[i];
    document.layers["dot"+i].top = yp[i];
    document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
    }
    setTimeout("snowNS()", 10);
    }
    function snowIE() {
    for (i = 0; i < no; ++ i) {
    yp[i] += sty[i];
    if (yp[i] > doc_height-50) {
    xp[i] = Math.random()*(doc_width-am[i]-30);
    yp[i] = 0;
    stx[i] = 0.02 + Math.random()/10;
    sty[i] = 0.7 + Math.random();
    doc_width = document.body.clientWidth;
    doc_height = document.body.clientHeight;
    }
    dx[i] += stx[i];
    document.all["dot"+i].style.pixelTop = yp[i];
    document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
    }
    setTimeout("snowIE()", 10);
    }
    if (ns4up) {
    snowNS();
    } else if (ie4up) {
    snowIE();
    }
    </SCRIPT>
    </body>
    </html>

    技巧九、在状态栏中显示跑马灯效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>徐守威</title>
    </head>

    <body>
    <script>
    <!--
    function Helpor_net(seed)
    { var m1 = "欢迎光临! !" ;
    var m2 = "" ;
    var msg=m1+m2;
    var out = " ";
    var c = 1;
    var speed = 200;
    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>
    </body>
    </html>

    技巧十、制作烟花效果

    <html>

    <head><script language="JavaScript">
    if (document.all){
    xL=5;
    xH=0;
    xW=0;
    xR=0;
    xE=0;
    xMY=0;
    xMX=0;
    xWd=0;
    xHd=0;
    xF=new Array();
    xY=new Array();
    xX=new Array();
    xS=new Array();
    xA=new Array();
    xB=new Array();
    ini=new Array();
    cl=new Array('#fff000','#0000FF','#ff0000','#00ff00','#ff00ff','#ffa500')
    document.write('<div id="xouter" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
    for (i=0; i < xL; i++){
    document.write('<div id="xie" style="position:absolute;top:0;left:0;10px;height:10px;'
    +'font-family:Courier New;font-size:50px;color:#ffffff">.</div>');
    }
    document.write('</div></div>');
    //Initial Placement!
    function Set(){
    for (i=0; i < xL; i++){
    xH=window.document.body.offsetHeight;
    xW=window.document.body.offsetWidth;
    xA[i]=Math.round(Math.random()*xH);
    xB[i]=Math.round(Math.random()*xW);
    xS[i]=Math.random()*0.07+0.05;
    xR=Math.round(Math.random()*3);
    xE=Math.round(Math.random()*2500+50)
    if (xR == 3) xB[i]=-xE;
    if (xR == 2) xB[i]=xW+xE;
    if (xR == 1) xA[i]=-xE;
    if (xR == 0) xA[i]=xH;
    xF[i]=xW/14;
    }
    }
    Set();
    function Assign(){
    xouter.style.top=document.body.scrollTop;
    for (i=0; i < xL; i++){
    xF[i]-=xS[i]*25;
    if (xF[i] < 4) xF[i]=3;
    xie[i].style.top =xY[i];
    xie[i].style.left=xX[i];
    xie[i].style.fontSize=xF[i];
    xie[i].style.filter='glow(color='+ini[i]+', strength='+xF[i]/3+')';
    }
    }
    function fly(){
    var N=Math.floor(Math.random()*cl.length)
    xMY=window.document.body.clientHeight/2;
    xMX=window.document.body.clientWidth/2;
    xWd=Math.round(Math.random()*40+5);
    xHd=Math.round(Math.random()*30+5);
    for (i=0; i < xL; i++)
    {
    xY[i]=xA[i]+=(xMY-xA[i])*(xS[i]);
    xX[i]=xB[i]+=(xMX-xB[i])*(xS[i]);
    if ((xX[i] > xMX-xWd) && (xX[i] < xMX+xWd) && (xY[i] > xMY-xHd) && (xY[i] < xMY+xHd)){

    xH=window.document.body.offsetHeight;
    xW=window.document.body.offsetWidth;
    xA[i]=Math.round(Math.random()*xH);
    xB[i]=Math.round(Math.random()*xW);
    xS[i]=Math.random()*0.05+0.05;
    xR=Math.round(Math.random()*3);
    xE=Math.round(Math.random()*50+50)
    if (xR == 3) xB[i]=-xE;
    if (xR == 2) xB[i]=xW+xE;
    if (xR == 1) xA[i]=-xE;
    if (xR == 0) xA[i]=xH+xE;
    }
    if ((xX[i] < 0) || (xX[i] > xW) || (xY[i] < 0) || (xY[i] > xH))
    {
    xF[i]=xW/14;
    ini[i]=cl[N];
    }
    }
    Assign();
    setTimeout('fly()',10);
    }
    fly();
    }
    // -->
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>徐守威</title>
    </head>

    <body>
    </body>
    </html>

    技巧十一、制作状态栏数字时钟

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head><script language="JavaScript">
    var timerID = null;
    var timerRunning = false;
    function stopclock (){
    if(timerRunning)
    clearTimeout(timerID);
    timerRunning = false;
    }
    function showtime () {
    var now = new Date();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds()
    var timeValue = " " + ((hours >12) ? hours -12 :hours)
    timeValue += ((minutes < 10) ? ":0" : ":") + minutes
    timeValue += ((seconds < 10) ? ":0" : ":") + seconds
    timeValue += (hours >= 12) ? " 下午" : " 上午"
    window.status = timeValue;
    timerID = setTimeout("showtime()",1000);
    timerRunning = true;
    }
    function startclock () {
    stopclock();
    showtime();
    }
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>徐守威</title>
    </head>

    <body onLoad="startclock()">
    </body>
    </html>

    技巧十二、制作微少鼠标指针旋转的文本

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head><script language="JavaScript">
    yourLogo='围绕鼠标指针旋转的文本';
    logoFont='Arial';
    logoSize=9;
    logoColor='red';
    logoWidth=40;
    logoHeight=40;
    logoSpeed=0.03;
    yourLogo=yourLogo.split('');
    L=yourLogo.length;
    Result="<font face="+logoFont+" style='font-size:"+logoSize+"pt' color="+logoColor+">";
    TrigSplit=360/L;
    br=(document.layers)?1:0;
    if (br){
    for (i=0; i < L; i++)
    document.write('<layer name="ns'+i+'" top=0 left=0 width=14 height=14">'+Result+yourLogo[i]+'</font></layer>');
    }
    else{
    document.write('<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
    for (i=0; i < L; i++)
    document.write('<div id="ie" style="position:absolute;top:0px;left:0px;14px;height:14px">'+Result+yourLogo[i]+'</font></div>');
    document.write('</div></div>');
    }
    ypos=0;
    xpos=0;
    step=logoSpeed;
    currStep=0;
    Y=new Array();
    X=new Array();
    Yn=new Array();
    Xn=new Array();
    for (i=0; i < L; i++)
    {
    Yn[i]=0;
    Xn[i]=0;
    }
    (document.layers)?window.captureEvents(Event.MOUSEMOVE):0;
    function Mouse(evnt){
    ypos = (document.layers)?evnt.pageY:event.y;
    xpos = (document.layers)?evnt.pageX:event.x;
    }
    (document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
    function animateLogo(){
    if (!br)outer.style.pixelTop=document.body.scrollTop;
    for (i=0; i < L; i++){
    var layer=(document.layers)?document.layers['ns'+i]:ie[i].style;
    layer.top =Y[i]+logoHeight*Math.sin(currStep+i*TrigSplit*Math.PI/180);
    layer.left=X[i]+logoWidth*Math.cos(currStep+i*TrigSplit*Math.PI/180);
    }
    currStep-=step;
    }
    function Delay(){
    for (i=L; i >= 0; i--)
    {
    Y[i]=Yn[i]+=(ypos-Yn[i])*(0.1+i/L);
    X[i]=Xn[i]+=(xpos-Xn[i])*(0.1+i/L);
    }
    animateLogo();
    setTimeout('Delay()',20);
    }
    window.onload=Delay;
    // -->
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>徐守威</title>
    </head>

    <body>
    </body>
    </html>

    技巧十三、制作跟随鼠标指针飘动的双层时钟

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>徐守威</title>
    </head>

    <body>
    <SCRIPT language=JavaScript>
    dCol='000000';
    fCol='000000';
    sCol='000000';
    mCol='000000';
    hCol='000000';
    ClockHeight=40;
    ClockWidth=40;
    ClockFromMouseY=0;
    ClockFromMouseX=100;
    d=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY");
    m=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER");
    date=new Date();
    day=date.getDate();
    year=date.getYear();
    if (year < 2000) year=year+1900;
    TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year;
    D=TodaysDate.split('');
    H='...';
    H=H.split('');
    M='....';
    M=M.split('');
    S='.....';
    S=S.split('');
    Face='1 2 3 4 5 6 7 8 9 10 11 12';
    font='Arial';
    size=1;
    speed=0.6;
    ns=(document.layers);
    ie=(document.all);
    Face=Face.split(' ');
    n=Face.length;
    a=size*10;
    ymouse=0;
    xmouse=0;
    scrll=0;
    props="<font face="+font+" size="+size+" color="+fCol+"><B>";
    props2="<font face="+font+" size="+size+" color="+dCol+"><B>";
    Split=360/n;
    Dsplit=360/D.length;
    HandHeight=ClockHeight/4.5
    HandWidth=ClockWidth/4.5
    HandY=-7;
    HandX=-2.5;
    scrll=0;
    step=0.06;
    currStep=0;
    y=new Array();x=new Array();Y=new Array();X=new Array();
    for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}
    Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
    for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}
    if (ns){
    for (i=0; i < D.length; i++)
    document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+D[i]+'</font></center></layer>');
    for (i=0; i < n; i++)
    document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face[i]+'</font></center></layer>');
    for (i=0; i < S.length; i++)
    document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>');
    for (i=0; i < M.length; i++)
    document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>');
    for (i=0; i < H.length; i++)
    document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>');
    }
    if (ie){
    document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
    for (i=0; i < D.length; i++)
    document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+';'+a+';text-align:center">'+props2+D[i]+'</B></font></div>');
    document.write('</div></div>');
    document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
    for (i=0; i < n; i++)
    document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:'+a+';'+a+';text-align:center">'+props+Face[i]+'</B></font></div>');
    document.write('</div></div>');
    document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
    for (i=0; i < H.length; i++)
    document.write('<div id="ieHours" style="position:absolute;16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>');
    document.write('</div></div>');
    document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
    for (i=0; i < M.length; i++)
    document.write('<div id="ieMinutes" style="position:absolute;16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>');
    document.write('</div></div>')
    document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
    for (i=0; i < S.length; i++)
    document.write('<div id="ieSeconds" style="position:absolute;16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>');
    document.write('</div></div>')
    }
    (ns)?window.captureEvents(Event.MOUSEMOVE):0;
    function Mouse(evnt){
    ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;
    xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;
    }
    (ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
    function ClockAndAssign(){
    time = new Date ();
    secs = time.getSeconds();
    sec = -1.57 + Math.PI * secs/30;
    mins = time.getMinutes();
    min = -1.57 + Math.PI * mins/30;
    hr = time.getHours();
    hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;
    if (ie){
    Od.style.top=window.document.body.scrollTop;
    Of.style.top=window.document.body.scrollTop;
    Oh.style.top=window.document.body.scrollTop;
    Om.style.top=window.document.body.scrollTop;
    Os.style.top=window.document.body.scrollTop;
    }
    for (i=0; i < n; i++){
    var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style;
    F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;
    F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
    }
    for (i=0; i < H.length; i++){
    var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;
    HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
    HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);
    }
    for (i=0; i < M.length; i++){
    var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;
    ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;
    ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);
    }
    for (i=0; i < S.length; i++){
    var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;
    SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
    SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);
    }
    for (i=0; i < D.length; i++){
    var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;
    DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;
    DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);
    }
    currStep-=step;
    }
    function Delay(){
    scrll=(ns)?window.pageYOffset:0;
    Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);
    Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);
    for (i=1; i < D.length; i++){
    Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);
    Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);
    }
    y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
    x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
    for (i=1; i < n; i++){
    y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
    x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
    }
    ClockAndAssign();
    setTimeout('Delay()',20);
    }
    if (ns||ie)window.onload=Delay;
    </SCRIPT>
    </body>
    </html>

    技巧十四、实现每天不同时间显示不同信息

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>徐守威</title>
    </head>

    <body><script language="javaScript">
    <!--
    now = new Date(),hour = now.getHours()
    if(hour < 6){document.write("凌晨好!")}
    else if (hour < 9){document.write("早上好!")}
    else if (hour < 12){document.write("上午好!")}
    else if (hour < 14){document.write("中午好!")}
    else if (hour < 17){document.write("下午好!")}
    else if (hour < 19){document.write("傍晚好!")}
    else if (hour < 22){document.write("晚上好!")}
    else {document.write("夜里好!")}
    // -->
    </script>
    </body>
    </html>

    技巧十五、禁止鼠标右键和左键对页面的操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>徐守威</title>
    <script language=javascript>
    function click() {
    alert('禁止左键复制!') }
    function click1() {
    if (event.button==2) {
    alert('禁止右键复制!') }}
    function CtrlKeyDown(){
    if (event.ctrlKey) {
    alert('不当的拷贝将损害您的系统!') }}
    document.onkeydown=CtrlKeyDown;
    document.onselectstart=click;
    document.onmousedown=click1;
    </script>
    </script>
    </head>

    <body>
    徐守威
    </body>

    </html>

    技巧十六、实现鼠标指针移上时图片加亮的效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <STYLE type=text/css>BODY {
    BACKGROUND-IMAGE: url(image/bj.gif); MARGIN: 0px
    }
    .unnamed1 {
    FONT-SIZE: 12px; LINE-HEIGHT: 200%
    }
    </STYLE>
    <SCRIPT language="JavaScript">
    <!--
    function makevisible(cur,which){
    if (which==0)
    cur.filters.alpha.opacity=100
    else
    cur.filters.alpha.opacity=20
    }
    //-->
    </SCRIPT>
    </head>

    <body>
    <img src="042.gif" width="656" height="705" style="filter:alpha(opacity=20)" onMouseOver="makevisible(this,0)" onMouseOut="makevisible(this,1)"/>
    </body>
    </html>

    技巧十七、让网页中跳出一个会说话的老人

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>徐守威</title>
    <SCRIPT>
    <!--
    function crml(nid)
    {
    try
    {
    nid=new ActiveXObject("Agent.Control.2");
    nid.Connected = true;
    nid.Characters.Load("");
    return nid;
    }
    catch (err)
    {
    return false;
    }
    }
    function chplay ()
    {
    if (ml=crml ("ml"))
    {
    var MerlinID;
    var MerlinACS;
    Merlin = ml.Characters.Character(MerlinID);
    Merlin.MoveTo(200,200);
    Merlin.Show();
    Merlin.Play("Explain");
    Merlin.Play("Announce");
    Merlin.Speak("你好啊,欢迎光临");
    Merlin.Play("Gestureright");
    Merlin.Play("Pleased");
    Merlin.Speak("首先自我介绍下");
    Merlin.Play("Idle1_1");
    Merlin.Hide();
    Merlin.MoveTo(600,300);
    Merlin.Show();
    Merlin.Play("Surprised");
    Merlin.Speak("我叫万事通");
    Merlin.Play("Read");
    Merlin.Speak("年龄就不说了吧");
    Merlin.Play("Read")
    Merlin.Play("GestureUp");
    Merlin.Speak("接着就是我的空间了");
    Merlin.Play("DontRecognize");
    Merlin.Speak("其他的不说,一个字晕");
    Merlin.Play("DontRecognize");
    Merlin.Play("Greet");
    Merlin.Speak("两个字很牛");
    Merlin.Play("Greet");
    Merlin.Speak("三个字非常棒");
    Merlin.Play("Greet");
    Merlin.Hide();
    }
    }
    //-->
    </SCRIPT>
    <SCRIPT>
    <!--
    chplay()
    -->
    </SCRIPT>
    </head>

    <body>
    </body>
    </html>

    技巧十八、让浏览者知道自己访问网页的次数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>徐守威</title>
    </head>

    <body><script language="JavaScript">
    var caution = false
    function setCookie(name, value, expires, path, domain, secure) {
    var curCookie = name + "=" + escape(value) +
    ((expires) ? "; expires=" + expires.toGMTString() : "") +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    ((secure) ? "; secure" : "")
    if (!caution || (name + "=" + escape(value)).length <= 4000)
    document.cookie = curCookie
    else
    if (confirm("Cookie exceeds 4KB and will be cut!"))
    document.cookie = curCookie
    }
    function getCookie(name) {
    var prefix = name + "="
    var cookieStartIndex = document.cookie.indexOf(prefix)
    if (cookieStartIndex == -1)
    return null
    var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length)
    if (cookieEndIndex == -1)
    cookieEndIndex = document.cookie.length
    return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex))
    }
    function deleteCookie(name, path, domain) {
    if (getCookie(name)) {
    document.cookie = name + "=" +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    "; expires=Thu, 01-Jan-70 00:00:01 GMT"
    }
    }
    function fixDate(date) {
    var base = new Date(0)
    var skew = base.getTime()
    if (skew > 0)
    date.setTime(date.getTime() - skew)
    }
    var now = new Date()
    fixDate(now)
    now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000)
    var visits = getCookie("counter")
    if (!visits)
    visits = 1
    else
    visits = parseInt(visits) + 1
    setCookie("counter", visits, now)
    document.write("您已访问本站" + visits + "次.")
    </script>
    </body>
    </html>

    技巧十九、禁止页面最小化

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>徐守威</title>
    </head>

    <body onblur= 'self.focus();'>
    </body>
    </html>

    技巧二十、这只网页由中间向外扩大变化

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>徐守威</title>
    <SCRIPT LANGUAGE="JavaScript">
    function expand() {
    for(x = 0; x < 50; x++) {
    window.moveTo(screen.availWidth * -(x - 50) / 100, screen.availHeight * -(x - 50) / 100);
    window.resizeTo(screen.availWidth * x / 50, screen.availHeight * x / 50);
    }
    window.moveTo(0,0);
    window.resizeTo(screen.availWidth, screen.availHeight);
    }
    </script>
    </head>

    <body>
    <a href="index.html" onClick="expand();">单击此链接,页面就会由中间向外扩大!</a>
    </body>

    </html>

    注:本文红色部分为主要部分

  • 相关阅读:
    编写高质量代码改善C#程序的157个建议——建议7: 将0值作为枚举的默认值
    编写高质量代码改善C#程序的157个建议——建议6: 区别readonly和const的使用方法
    编写高质量代码改善C#程序的157个建议——建议5: 使用int?来确保值类型也可以为null
    编写高质量代码改善C#程序的157个建议——建议4: TryParse比Parse好
    基于cookie实现用户验证
    页面分页自定义插件
    DOM详习讲解
    HTML标签详细讲解
    Tornado模板配置
    biginteger转Long
  • 原文地址:https://www.cnblogs.com/Jasxu/p/javascript.html
Copyright © 2011-2022 走看看