zoukankan      html  css  js  c++  java
  • JavaScript----特效代码

    1.不同时间段显示不同问候语 
    
    
      <Script Language="JavaScript"> 
      <!-- 
      var text=""; day = new Date( ); time = day.getHours( );  
      if (( time>=0) && (time < 7 )) 
        text="夜猫子,要注意身体哦! " 
      if (( time >= 7 ) && (time < 12)) 
        text="今天的阳光真灿烂啊,你那个朋友呢?" 
      if (( time >= 12) && (time < 14)) 
        text="午休时间。您要保持睡眠哦!" 
      if (( time >=14) && (time < 18)) 
        text="祝您下午工作愉快! " 
      if ((time >= 18) && (time <= 22)) 
        text="您又来了,可别和MM聊太久哦!" 
      if ((time >= 22) && (time < 24)) 
        text="您应该休息了!" 
      document.write(text) 
      //---> 
      </Script> 
    
      
    
    2.水中倒影效果 
    
    
      <img id="reflect" src="你自己的图片文件名" width="175" height="59">  
      <script language="JavaScript"> 
      function f1() 
      { 
        setInterval("mdiv.filters.wave.phase+=10",100);  
      } 
      if (document.all) 
      { 
        document.write('<img id=mdiv src="'+document.all.reflect.src+'"  
        style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()">') 
        window.onload=f1 
      } 
      </script> 
    
      
    
    3.慢慢变大的窗口 
    
    
      <Script Language="JavaScript"> 
      <!-- 
      var Windowsheight=100 
      var Windowswidth=100 
      var numx=5 
      function openwindow(thelocation){ 
      temploc=thelocation 
      if  
      (!(window.resizeTo&&document.all)&&!(window.resizeTo&&document.getElementById)) 
      { 
        window.open(thelocation) 
        return 
      } 
      windowsize=window.open("","","scrollbars") 
      windowsize.moveTo(0,0) 
      windowsize.resizeTo(100,100) 
      tenumxt() 
      } 
      function tenumxt(){ 
      if (Windowsheight>=screen.availHeight-3) 
        numx=0 
      windowsize.resizeBy(5,numx) 
      Windowsheight+=5 
      Windowswidth+=5 
      if (Windowswidth>=screen.width-5) 
      { 
        windowsize.location=temploc 
        Windowsheight=100 
        Windowswidth=100 
        numx=5 
        return 
      } 
      setTimeout("tenumxt()",50) 
      } 
      //--> 
      </script> 
      <p><a href="javascript:openwindow('http://www.ccjol.com')">进入</a> 
    
      
    
    4.改变IE地址栏的IE图标 
    
    
      我们要先做一个16*16的icon(图标文件),保存为index.ico。把这个图标文件上传到根目录下并在首页<head></head>之间加上如下代码: 
    
      <link REL = "Shortcut Icon" href="index.ico"> 
    
    
    
    5.让网页随意后退 
    
    
      <a href="javascript:history.go(-X)">X</a> //把X换成你想要后退在页数 
       //把“-”变成“+”就为前进 
    
      
    
    6.鼠标指向时弹出信息框 
    
    
      在<body></body>之间加上如下代码: 
    
      <a href onmouseover="alert('弹出信息!')">显示的链接文字</a> 
    
      
    
    7.单击鼠标右键弹出添加收藏夹对话框 
    
    
      在<body></body>之间加上如下代码: 
    
      <Script Language=JavaScript> 
      if (document.all) 
      document.body.onmousedown=new Function("if (event.button==2||event.button==3)  
      window.external.addFavorite('您的网址','您的网站名称)") 
      </Script> 
    
      
    
    8.随机变换背景图象(一个可以刷新心情的特效) 
    
    
      在<head></head>之间加上如下代码: 
    
      <Script Language="JavaScript"> 
      image = new Array(4); //定义image为图片数量的数组 
      image [0] = 'tu0.gif' //背景图象的路径 
      image [1] = 'tu1.gif' 
      image [2] = 'tu2.gif' 
      image [3] = 'tu3.gif' 
      image [4] = 'tu4.gif' 
      number = Math.floor(Math.random() * image.length); 
      document.write("<BODY BACKGROUND="+image[number]+">"); 
      </Script> 
    
      
    
    9.鼠标一碰就给颜色看的链接 
    
    
      在<body></body>之间加上如下代码: 
    
      <p onMouseMove="anniu()">你敢碰我,我就给点颜色你看!</p> 
      <Script Language = "VBScript"> 
      sub anniu 
      document.fgColor=int(256*256*256*rnd) 
      end sub 
      </Script> 
    
      
    
    10.从天而降并有幻影效果的窗口 
    
    
      <head> 
      <Script language="JavaScript"> 
      function move(x) { 
      if(self.moveBy){ 
      self.moveBy (0,-800); 
      for(i = x; i > 0; i--) 
      { 
      self.moveBy(0,3); 
      } 
      for(j = 200; j > 0; j--){ //如果你认为窗口抖动厉害,就200换成个位数 
      self.moveBy(0,j); 
      self.moveBy(j,0); 
      self.moveBy(0,-j); 
      self.moveBy(-j,0); 
      } 
      } 
      } 
      </Scrip> 
      <body bgColor=#ffffff onload=move(280)> 
      </body> 
      </head> 
    
      
    
    11.表格的半透明显示效果 
    
    
      在<head></head>之间加上如下代码: 
    
      <style> 
      .alpha{filter: Alpha(Opacity=50)} //50表示50%的透明度 
      </style> 
    
      在<body></body>之间加上如下代码: 
      <table border="1" width="100" height="62" class="alpha" bgcolor="#F2A664" > 
      <tr> 
      <td width="100%" height="62"> 
      <div align="center">很酷吧!</div> 
      </td> 
      </tr> 
      </table> 
    
    
    
    
    中级篇 
    
      
    
    1.节日倒计时 
    
    
      <Script Language="JavaScript"> 
      var timedate= new Date("October 1,2002"); 
      var times="国庆节"; 
      var now = new Date(); 
      var date = timedate.getTime() - now.getTime(); 
      var time = Math.floor(date / (1000 * 60 * 60 * 24)); 
      if (time >= 0) 
      document.write("现在离"+times+"还有: "+time +"天")</Script> 
    
      
    
    2.单击按钮打印出当前页 
    
    
      <Script Language="JavaScript"> 
      <!-- Begin 
      if (window.print) { 
      document.write('<form>' 
      + '<input type=button name=print value="打印本页" ' 
      + 'onClick="javascript:window.print()"></form>'); 
      } 
      // End --> 
      </Script> 
    
      
    
    3.单击按钮‘另存为'当前页 
    
    
      <input type="button" name="Button" value="保存本页" 
      onClick="document.all.button.ExecWB(4,1)"> 
      <object id="button" 
      width=0 
      height=0  
      classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"> 
      <embed width="0" height="0"></embed>  
      </object> 
    
      
    
    4.显示系统当前日期 
    
    
      <script language=JavaScript> 
      today=new Date(); 
      function date(){ 
      this.length=date.arguments.length 
      for(var i=0;i<this.length;i++) 
      this[i+1]=date.arguments[i] } 
      var d=new date("星期日","星期一","星期二","星期三","星期四","星期五","星期六"); 
      document.write( 
      "<font color=##000000 style='font-size:9pt;font-family: 宋体'> ", 
      today.getYear(),"年",today.getMonth()+1,"月",today.getDate(),"日", 
      d[today.getDay()+1],"</font>" );  
      </script> 
    
    
    
    初级篇 
    
    
      
    
    1.让文字不停地滚动 
    
    
      <MARQUEE>滚动文字</MARQUEE> 
    
      
    
    2.记录并显示网页的最后修改时间 
    
    
      <script language=JavaScript> 
      document.write("最后更新时间: " + document.lastModified + "") 
      </script> 
    
      
    
    3.关闭当前窗口 
    
    
      <a href="/"onClick="javascript:window.close();return false;">关闭窗口</a> 
    
      
    
    4.2秒后关闭当前页 
    
    
      <script language="JavaScript"> 
      <!-- 
      setTimeout('window.close();',2000); 
      --> 
      </script> 
    
      
    
    5.2秒后载入指定网页 
    
    
      <head> 
      <meta http-equiv="refresh" content="2;URL=http://你的网址"> 
      </head> 
    
      
    
    6.添加到收藏夹 
    
    
      <Script Language="JavaScript"> 
      function bookmarkit() 
      { 
      window.external.addFavorite('http://你的网址','你的网站名称') 
      } 
      if (document.all)document.write('<a href="#" onClick="bookmarkit()">加入收藏夹</a>') 
      </Script> 
    
      
    
    7.让超链接不显示下划线 
    
    
      <style type="text/css"> 
      <!- 
      a:link{text-decoration:none} 
      a:hover{text-decoration:none} 
      a:visited{text-decoration:none} 
      -> 
      </style> 
    
      
    
    8.禁止鼠标右键的动作 
    
    
      <Script Language = "JavaScript">  
      function click() { if (event.button==2||event.button==3)  
      { 
      alert('禁止鼠标右键');  
      }  
      document.onmousedown=click // -->  
      </Script> 
    
      
    
    9.设置该页为首页 
    
    
      <body bgcolor="#FFFFFF" text="#000000"> 
      <!-- 网址:http://你的网址--> 
      <a class="chlnk" style="cursor:hand" HREF 
      onClick="this.style.behavior='url(#default#homepage)'; 
      this.setHomePage('你的网站名称);"><font color="000000" size="2" face="宋体">设为首页</font></a> 
      </body> 
    

      

  • 相关阅读:
    css3发光闪烁的效果
    移动端滚动加载数据实现
    JS生成一个简单的验证码
    百度地图在IOS中不显示
    vue开发神奇vue-devtools的安装
    gulp搭建服务
    webstorm中配置ES6语法
    centos 7 中防火墙的关闭问题
    centos命令
    Cesium加载影像
  • 原文地址:https://www.cnblogs.com/w-s-l123/p/9761372.html
Copyright © 2011-2022 走看看