程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> JAVA編程 >> JAVA編程入門知識 >> 用JavaScript實現網頁特效二例

用JavaScript實現網頁特效二例

編輯:JAVA編程入門知識

  一、 字符隨鼠標漂動

  這個特效可以讓你的鼠標在網頁上移動時,在鼠標的後面會有你指定的文字跟著漂動,這個特效足可以讓你的主頁新鮮一陣了。下面就是它的源代碼。 <!-- frame contents --> <!-- /frame contents -->

  首先在你Html文件的<head>與</head>之間加上:

  <STYLE> .spanstyle { position:absolute; visibility:visible; top:-50px; font-size:10pt; font-family:Verdana; font-weight:bold; color:red; } </STYLE>

  <script> var x,y var step=20 var flag=0 var message="柳苑工作室http://pagestar.yeah.net" message=message.split("") var XPos=new Array() for (i=0;i<=message.length-1;i++) { xpos[i]=-50 } var ypos=new Array() for (i=0;i<=message.length-1;i++) { ypos[i]=-50 } function handlerMM(e){ x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY flag=1 } function makesnake() { if (flag==1 && document.all) { for (i=message.length-1; i>=1; i--) { xpos[i]=xpos[i-1]+step ypos[i]=ypos[i-1] } xpos[0]=x+step ypos[0]=y for (i=0; i<message.length-1; i++) { var thisspan = eval("span"+(i)+".style") thisspan.posLeft=xpos[i] thisspan.posTop=ypos[i] } } else if (flag==1 && document.layers) { for (i=message.length-1; i>=1; i--) { xpos[i]=xpos[i-1]+step ypos[i]=ypos[i-1] } xpos[0]=x+step ypos[0]=y for (i=0; i<message.length-1; i++) { var thisspan = eval("document.span"+i) thisspan.left=xpos[i] thisspan.top=ypos[i] } } var timer=setTimeout("makesnake()",30) } </script>

  然後把你html文件的<body>部分改為:

  <BODY onLoad="makesnake()" >

  最後再把下面代碼加入你html文件<body>和</body>之間:

  <script> for (i=0;i<=message.length-1;i++) { document.write("<span id='span"+i+"' class='spanstyle'>") document.write(message[i]) document.write("</span>") } if (document.layers){ document.captureEvents(Event.MOUSEMOVE); } document.onmousemove = handlerMM; </script>

  這樣一個效果不錯的Javasript特效就做成了,只是你要把上面有下劃線地方的文字換成你的內容,否則你網頁上就會漂出我的主頁名稱和地址喲。怎麼樣,很酷吧。

  二、 顯示訪問者的停留時間

  這個特效可以讓你的主頁出現一個數字時鐘,上面能顯示訪問者在你的主頁上所停留的時間(見圖一)。下面是這個Javasript特效的源代碼。

  首先在你html文件的<head>與</head>之間加上:

  <script LANGUAGE="javascript"> <!-- var ap_name = navigator.appName; var ap_vinfo = navigator.appVersion; var ap_ver = parseFloat(ap_vinfo.substring(0,ap_vinfo.indexOf('('))); var time_start = new Date(); var clock_start = time_start.getTime(); var dl_ok=false; function init () { if(ap_name=="Netscape" && ap_ver>=3.0) dl_ok=true; return true; } function get_time_spent () { var time_now = new Date(); return((time_now.getTime() - clock_start)/1000); } function show_secs () // show the time user spent on the side { var i_total_secs = Math.round(get_time_spent()); var i_secs_spent = i_total_secs % 60; var i_mins_spent = Math.round((i_total_secs-30)/60); var s_secs_spent = "" + ((i_secs_spent>9) ? i_secs_spent : "0" + i_secs_spent); var s_mins_spent = "" + ((i_mins_spent>9) ? i_mins_spent : "0" + i_mins_spent); document.time.time_spent.value = s_mins_spent + ":" + s_secs_spent; window.setTimeout('show_secs()',1000); } --> </script>

  然後把你html文件的<body>改為:

  <body onLoad="init(); window.setTimeout('show_secs()',1);">

  最後在你html文件的<body>與</body>之間加上:

  <form name="time" onSubmit="0"> <p>你的停留時間為:<br>
 
  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved