美化网页常用特效代码

来源:百度文库 编辑:神马文学网 时间:2024/04/29 09:48:31

  1.让文字不停地滚动

  <MARQUEE>滚动文字</MARQUEE>

  2.记录并显示网页的最后修改时间

  <script language=JavaScript>

  document.write("最后更新时间: " + document.lastModified + "")

  </script>

  3.关闭当前窗口

  <a href="/">关闭窗口</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

  url(#default#homepage)';

  this.setHomePage('你的网站名称);"><font color="000000" size="2" face="宋体">设为首页</font></a>

  </body>

中级篇

  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="打印本页" '

  + '></form>');

  }

  // End -->

  </Script>

  3.单击按钮‘另存为’当前页

  <input type="button" name="Button" value="保存本页"

  >

  <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.不同时间段显示不同问候语

  <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=" src="http://www.jinjunhe.net/pic/url.gif" border=0>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="">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>