html 使用javascript特效問題

javascript html

BB 2021-06-22 00:30:12 ‧ 1186 瀏覽

想請問我現在從網路上找到js特效如下

<!--流星雨_開始-->
<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;width:10px;height:10px;'+'font-family:Courier New;font-size:50px;color:white">.</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> 
<!--流星雨_結束-->`

我該如何使用在html網站當中
假設就是最簡單的

<!doctype html>
<head>
    <title>123</title>
</head>
<body>
    hihi
</body>
</html>

看更多先前的討論...收起先前的討論...

haward79 iT邦研究生 3 級 ‧ 2021-06-22 05:22:00 檢舉

你拿到的 code 看起來有問題。
建議你先學一點基礎的 JavaScript 再使用。

淺水員 iT邦大師 6 級 ‧ 2021-06-22 10:01:25 檢舉

那段程式碼很舊，有些要改過才能跑。
好像還有 IE 專屬的東西...

BB iT邦新手 4 級 ‧ 2021-06-22 10:06:21 檢舉

ok 謝謝樓上兩位

窮嘶發發發 iT邦高手 1 級 ‧ 2021-06-22 10:43:08 檢舉

幫樓主餵狗了
https://www.google.com/search?q=流星雨+js

淺水員 iT邦大師 6 級 ‧ 2021-06-22 13:01:45 檢舉

好奇那段程式碼的效果，所以玩了一下
之後再改成 css 動畫來做
大概會像是這樣
https://jsfiddle.net/o3s4qt6z/

BB iT邦新手 4 級 ‧ 2021-06-22 13:54:35 檢舉

成功了感謝樓上 js特效真的是蠻好玩的

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

japhenchen

iT邦超人 1 級 ‧ 2021-06-22 08:11:09

你可以把網上取得的腳本放到這類型的線上試驗網站試試
https://jsfiddle.net/

回應 1
分享
檢舉

BB iT邦新手 4 級 ‧ 2021-06-22 10:06:47 檢舉

ok 謝謝

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js

IT邦幫忙