zoukankan      html  css  js  c++  java
  • javascript特效

    http://www.codesky.net/article/doc/200508/200508115422220.htm
    1、时钟显示任意指定位置
    脚本说明:
    第一步:把如下代码加入<body>区域中:
      <span id=liveclock style=position:absolute;left:250px;top:122px;; 109px; height: 15px>
    </span>    (这里可以调整时钟的方位。调用脚本时去掉括号中内容)
    <SCRIPT language=javascript>
    <!--

    function show5(){if(!document.layers&&!document.all)
    return
    var Digital=new Date()
    var hours=Digital.getHours()
    var minutes=Digital.getMinutes()
    var seconds=Digital.getSeconds()
    var dn="AM"
    if(hours>12){dn="PM"
    hours=hours-12
    }if(hours==0)
    hours=12
    if(minutes<=9)
    minutes="0"+minutes
    if(seconds<=9)
    seconds="0"+seconds
    //change font size here to your desire
    myclock="<font size='5' face='Arial'><b><font size='1'>Current Time:</font></br>"+hours+":"+minutes+":"
    +seconds+" "+dn+"</b></font>"
    if(document.layers){document.layers.liveclock.document.write(myclock)
    document.layers.liveclock.document.close()
    }else if(document.all)
    liveclock.innerHTML=myclock
    setTimeout("show5()",1000)
    }
    //>
    </SCRIPT>

    第二步:把<body>中的内容改为
    <body bgcolor="#ffffff" ONLOAD=show5()>

    2、纯javascript时钟

    脚本说明:
    第一步:把如下代码加入<head>区域中:
    <SCRIPT language=javascript>
    <!--
    pX=400;pY=200
    obs = new Array(13)
    function ob () {
    for (i=0; i<13; i++) {
     if (document.all) obs[i]=new Array (eval('ob'+i).style,-100,-100)
     else obs[i] = new Array (eval('document.ob'+i),-100,-100)
     }
    }
    function cl(a,b,c){
     if (document.all) {
      if (a!=0) b+=-1
      eval('c'+a+'.style.pixelTop='+(pY+(c)))
      eval('c'+a+'.style.pixelLeft='+(pX+(b)))
      }
    else{
     if (a!=0) b+=10
     eval('document.c'+a+'.top='+(pY+(c)))
     eval('document.c'+a+'.left='+(pX+(b)))
    }
    if (document.all) c0.style.pixelLeft=26
    }

    function runClock() {
     for (i=0; i<13; i++) {
      obs[i][0].left=obs[i][1]+pX
      obs[i][0].top=obs[i][2]+pY
     }
    }

    var lastsec
    function timer() {
     time = new Date ()
     sec = time.getSeconds()
     if (sec!=lastsec) {

      lastsec = sec
      sec=Math.PI*sec/30
      min=Math.PI*time.getMinutes()/30
      hr =Math.PI*((time.getHours()*60)+time.getMinutes())/360
      for (i=1;i<6;i++) {
       obs[i][1] = Math.sin(sec) * (44 - (i-1)*11)-16;
       if (document.layers)obs[i][1]+=10;
       obs[i][2] = -Math.cos(sec) * (44 - (i-1)*11)-27;
      }
      for (i=6;i<10;i++) {
       obs[i][1] = Math.sin(min) * (40 - (i-6)*10)-16;
       if (document.layers)obs[i][1]+=10;
       obs[i][2] = -Math.cos(min) * (40 - (i-6)*10)-27;
      }
      for (i=10;i<13;i++) {
       obs[i][1] = Math.sin(hr) * (37 - (i-10)*11)-16;
       if (document.layers)obs[i][1]+=10;
       obs[i][2] = -Math.cos(hr) * (37 - (i-10)*11)-27;
      }
     }

    }
    function setNum(){

    cl (0,-67,-65);
    cl (1,10,-51);
    cl (2,28,-33);
    cl (3,35,-8);
    cl (4,28,17);
    cl (5,10,35);
    cl (6,-15,42);
    cl (7,-40,35);
    cl (8,-58,17);
    cl (9,-65,-8);
    cl (10,-58,-33);
    cl (11,-40,-51);
    cl (12,-16,-56);

    }

    //-->


    </SCRIPT>


    第二步:把<body>中加入如下代码:
    <div id="c0" style="position:absolute;right:6;top:6; z-index:2;">
       </div>
            <div id="c1" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>1</b></div>
            <div id="c2" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>2</b></div>
            <div id="c3" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>3</b></div>
            <div id="c4" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>4</b></div>
            <div id="c5" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>5</b></div>
            <div id="c6" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>6</b></div>
            <div id="c7" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>7</b></div>
            <div id="c8" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>8</b></div>
            <div id="c9" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>9</b></div>
            <div id="c10" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>10</b></div>
            <div id="c11" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>11</b></div>
            <div id="c12" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>12</b></div>
            <div id="ob0" style="position:absolute;left:-20;top:-20;z-index:1">  </div>
            <div id="ob1" style="position:absolute;left:-20;top:-20;z-index:8"> <font size="+3" color="#0000FF"><b>.</b></font></div>
            <div id="ob2" style="position:absolute;left:-20;top:-20;z-index:8"> <font size="+3" color="#0000FF"><b>.</b></font></div>
            <div id="ob3" style="position:absolute;left:-20;top:-20;z-index:8"> <font size="+3" color="#0000FF"><b>.</b></font></div>
            <div id="ob4" style="position:absolute;left:-20;top:-20;z-index:8"> <font size="+3" color="#0000FF"><b>.</b></font></div>
            <div id="ob5" style="position:absolute;left:-20;top:-20;z-index:8"> <font size="+3" color="#0000FF"><b>.</b></font></div>
            <div id="ob6" style="position:absolute;left:-20;top:-20;z-index:7"> <font size="+3" color="#00FFFF"><b>.</b></font></div>
            <div id="ob7" style="position:absolute;left:-20;top:-20;z-index:7"> <font size="+3" color="#00FFFF"><b>.</b></font></div>
            <div id="ob8" style="position:absolute;left:-20;top:-20;z-index:7"> <font size="+3" color="#00FFFF"><b>.</b></font></div>
            <div id="ob9" style="position:absolute;left:-20;top:-20;z-index:7"> <font size="+3" color="#00FFFF"><b>.</b></font></div>
            <div id="ob10" style="position:absolute;left:-20;top:-20;z-index:6"> <font size="+3" color="#F30000"><b>.</b></font></div>
            <div id="ob11" style="position:absolute;left:-20;top:-20;z-index:6"> <font size="+3" color="#F30000"><b>.</b></font></div>
            <div id="ob12" style="position:absolute;left:-20;top:-20;z-index:6"> <font size="+3" color="#F30000"><b>.</b></font></div>


    第三步:把<body>中内容改为:
    <body bgcolor="#ffffff" onLoad="ob(),setNum(),setInterval('timer()',100);setInterval('runClock()',100)">

    3、时钟显示在背景上

    脚本说明:
    第一步:把如下代码加入<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="#ffffff" onLoad="clockon()">
    4、文字跳动显示

    脚本说明:
    第一步:把如下代码加入<head>区域中
    <SCRIPT language="JavaScript" FPTYPE="dynamicanimation8">
    <!--
    dynamicanimAttr = "dynamicanimation8"
      animateElements = new Array()
      currentElement = 0
      speed = 0
      stepsZoom = 8
      stepsWord = 8
      stepsFly = 12
      stepsSpiral = 16
      steps = stepsZoom
      step = 0
      outString = ""
      function dynAnimation8()
      {
        var ms = navigator.appVersion.indexOf("MSIE")
        ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
        if(!ie4)
        {
          if((navigator.appName == "Netscape") &&
             (parseInt(navigator.appVersion.substring(0, 1)) >= 4))
          {
            for (index=document.layers.length-1; index >= 0; index--)
            {
                layer=document.layers[index]
                if (layer.left==10000)
                    layer.left=0
            }
          }
          return
        }
        for (index=document.all.length-1; index >= document.body.sourceIndex; index--)
        {
          el = document.all[index]
          animation = el.getAttribute(dynamicanimAttr, false)
          if(null != animation)
          {
            if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")
            {
              ih = el.innerHTML
              outString = ""
              i1 = 0
              iend = ih.length
              while(true)
              {
                i2 = startWord(ih, i1)
                if(i2 == -1)
                  i2 = iend
                outWord(ih, i1, i2, false, "")
                if(i2 == iend)
                  break
                i1 = i2
                i2 = endWord(ih, i1)
                if(i2 == -1)
                  i2 = iend
                outWord(ih, i1, i2, true, animation)
                if(i2 == iend)
                  break
                i1 = i2
              }
              document.all[index].innerHTML = outString
              document.all[index].style.posLeft = 0
              document.all[index].setAttribute(dynamicanimAttr, null)
            }
            if(animation == "zoomIn" || animation == "zoomOut")
            {
              ih = el.innerHTML
              outString = "<SPAN " + dynamicanimAttr + "=\"" + animation + "\" style=\"position: relative; left: 10000;\">"
              outString += ih
              outString += "</SPAN>"
              document.all[index].innerHTML = outString
              document.all[index].style.posLeft = 0
              document.all[index].setAttribute(dynamicanimAttr, null)
            }
          }
        }
        i = 0
        for (index=document.body.sourceIndex; index < document.all.length; index++)
        {
          el = document.all[index]
          animation = el.getAttribute(dynamicanimAttr, false)
          if (null != animation)
          {
            if(animation == "flyLeft")
            {
              el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
              el.style.posTop = 0
            }
            else if(animation == "flyRight")
            {
              el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
              el.style.posTop = 0
            }
            else if(animation == "flyTop" || animation == "dropWord")
            {
              el.style.posLeft = 0
              el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
            }
            else if(animation == "flyBottom")
            {
              el.style.posLeft = 0
              el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
            }
            else if(animation == "flyTopLeft")
            {
              el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
              el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
            }
            else if(animation == "flyTopRight" || animation == "flyTopRightWord")
            {
              el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
              el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
            }
            else if(animation == "flyBottomLeft")
            {
              el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
              el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
            }
            else if(animation == "flyBottomRight" || animation == "flyBottomRightWord")
            {
              el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
              el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
            }
            else if(animation == "spiral")
            {
              el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
              el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
            }
            else if(animation == "zoomIn")
            {
              el.style.posLeft = 10000
              el.style.posTop = 0
            }
            else if(animation == "zoomOut")
            {
              el.style.posLeft = 10000
              el.style.posTop = 0
            }
            else
            {
              el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
              el.style.posTop = 0
            }
            el.initLeft = el.style.posLeft
            el.initTop = el.style.posTop
            animateElements[i++] = el
          }
        }
        window.setTimeout("animate();", speed)
      }
      function offsetLeft(el)
      {
        x = el.offsetLeft
        for (e = el.offsetParent; e; e = e.offsetParent)
          x += e.offsetLeft;
        return x
      }
      function offsetTop(el)
      {
        y = el.offsetTop
        for (e = el.offsetParent; e; e = e.offsetParent)
          y += e.offsetTop;
        return y
      }
      function startWord(ih, i)
      {
        for(tag = false; i < ih.length; i++)
        {
          c = ih.charAt(i)
          if(c == '<')
            tag = true
          if(!tag)
            return i
          if(c == '>')
            tag = false
        }
        return -1
      }
      function endWord(ih, i)
      {
        nonSpace = false
        space = false
        while(i < ih.length)
        {
          c = ih.charAt(i)
          if(c != ' ')
            nonSpace = true
          if(nonSpace && c == ' ')
            space = true
          if(c == '<')
            return i
          if(space && c != ' ')
            return i
          i++
        }
        return -1
      }
      function outWord(ih, i1, i2, dyn, anim)
      {
        if(dyn)
          outString += "<SPAN " + dynamicanimAttr + "=\"" + anim + "\" style=\"position: relative; left: 10000;\">"
        outString += ih.substring(i1, i2)
        if(dyn)
          outString += "</SPAN>"
      }
      function animate()
      {
        el = animateElements[currentElement]
        animation = el.getAttribute(dynamicanimAttr, false)
        step++
        if(animation == "spiral")
        {
          steps = stepsSpiral
          v = step/steps
          rf = 1.0 - v
          t = v * 2.0*Math.PI
          rx = Math.max(Math.abs(el.initLeft), 200)
          ry = Math.max(Math.abs(el.initTop),  200)
          el.style.posLeft = Math.ceil(-rf*Math.cos(t)*rx)
          el.style.posTop  = Math.ceil(-rf*Math.sin(t)*ry)
        }
        else if(animation == "zoomIn")
        {
          steps = stepsZoom
          el.style.fontSize = Math.ceil(50+50*step/steps) + "%"
          el.style.posLeft = 0
        }
        else if(animation == "zoomOut")
        {
          steps = stepsZoom
          el.style.fontSize = Math.ceil(100+200*(steps-step)/steps) + "%"
          el.style.posLeft = 0
        }
        else
        {
          steps = stepsFly
          if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")
            steps = stepsWord
          dl = el.initLeft / steps
          dt = el.initTop  / steps
          el.style.posLeft = el.style.posLeft - dl
          el.style.posTop = el.style.posTop - dt
        }
        if (step >= steps)
        {
          el.style.posLeft = 0
          el.style.posTop = 0
          currentElement++
          step = 0
        }
        if(currentElement < animateElements.length)
          window.setTimeout("animate();", speed)
      }

    //-->


    </SCRIPT>

    第二步:把如下代码加入<body>区域中(也就是在页面中调用脚本)
    <p dynamicanimation8="dropWord"
    style="position: relative !important; left: 10000 !important" align="center"><font size="3" color="#ee00FF">很 好 玩 吧 ! 有 没 有 吓 一 跳 ?<font size="7"><b><font face="Arial, Helvetica, sans-serif" color="#FF0000">YES!
      </font></b></font></font></p>

    第三步:把<body>改为
    <body bgcolor="#ffffff" onload="dynAnimation8()">

    5、页面自动刷新

    1,页面自动刷新:把如下代码加入<head>区域中<meta http-equiv="refresh" content="20">,其中20指每隔20秒刷新一次页面.

    2,页面自动跳转:把如下代码加入<head>区域中<meta http-equiv="refresh" content="20;url=http://www.hrw.cn">,其中20指隔20秒后跳转到http://www.hrw.cn页面。

    6、汉字数字转数字
    <script language="JavaScript">
    <!--
    function word2number(w)
    {
    var e = "零一二三四五六七八九";
    var ew = ["十","百","千"];
    var ej = ["万","亿"];
    var rss = "^(["+e+ew.join("")+"]+"+ej[1]+")?(["+e+ew.join("")+"]+"+ej[0]+")?(["+e+ew.join("")+"]+)?$";
    var arr = new RegExp(rss).exec(w);
    function foh(str)
    {
    var a=0;
    if(str.indexOf(ew[0])==0)
    a=10;
    str=str.replace(new RegExp(e.charAt(0),"g"),"");
    if(new RegExp("(["+e+"])$").test(str))
    a+=e.indexOf(RegExp.$1);
    if(new RegExp("(["+e+"])"+ew[0]).test(str))
    a+=e.indexOf(RegExp.$1)*10;
    if(new RegExp("(["+e+"])"+ew[1]).test(str))
    a+=e.indexOf(RegExp.$1)*100;
    if(new RegExp("(["+e+"])"+ew[2]).test(str))
    a+=e.indexOf(RegExp.$1)*1000;
    return a;
    }
    return foh(arr[1])*100000000+foh(arr[2])*10000+foh(arr[3]);
    }
    alert(word2number("六"));
    alert(word2number("十五"));
    alert(word2number("五百零二"));
    alert(word2number("四千五百"));
    alert(word2number("七十亿零八百五十万四千五百零二"));

    //-->
    </script>
    7、数字转汉字
    function Chinese(num){  //将阿拉伯数字翻译成中文的大写数字
        if(!/^\d*(\.\d*)?$/.test(num)){alert("Number is wrong!"); return "Number is wrong!";}
        var AA = new Array("零","一","二","三","四","五","六","七","八","九");
        var BB = new Array("","十","百","千","万","亿","点","");
        var a = (""+ num).replace(/(^0*)/g, "").split("."), k = 0, re = "";
        for(var i=a[0].length-1; i>=0; i--){
            switch(k){
                case 0 : re = BB[7] + re; break;
                case 4 : if(!new RegExp("0{4}\\d{"+ (a[0].length-i-1) +"}$").test(a[0]))
                         re = BB[4] + re; break;
                case 8 : re = BB[5] + re; BB[7] = BB[5]; k = 0; break;
            }
            if(k%4 == 2 && a[0].charAt(i+2) != 0 && a[0].charAt(i+1) == 0) re = AA[0] + re;
            if(a[0].charAt(i) != 0) re = AA[a[0].charAt(i)] + BB[k%4] + re; k++;
        }
        if(a.length>1) //加上小数部分(如果有小数部分)
        {
            re += BB[6];
            for(var i=0; i<a[1].length; i++) re += AA[a[1].charAt(i)];
        }
        //return re;
     document.all.text2.value=re;
    }
    8、防拷贝页面

    body 处
    <body oncontextmenu="return false" onselectstart="return false"
    ondragstart="return false">

    再加上<noscript> <iframe src="*.htm"></iframe> </noscript>
    防止别人另存
  • 相关阅读:
    python中list的一种取值方式切片
    python之字典(Dictionary)
    表示数字
    自动收售货系统
    明明的随机数
    自守数
    等差数列
    计算字符个数
    字符统计
    Redraimen的走法
  • 原文地址:https://www.cnblogs.com/zengwei/p/1092195.html
Copyright © 2011-2022 走看看