ตัวอย่างบทความนี้แสดงให้เห็นว่า JS ตระหนักถึงผลกระทบพื้นหลังของจักรวาลและท้องฟ้าที่เต็มไปด้วยดวงดาวได้อย่างไร แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
การคัดลอกรหัสมีดังนี้:
<! doctype html public "-// w3c // h2d xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/h2d/xhtml1-transitional.h2d">>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> เอฟเฟกต์พื้นหลังของ Cosmic Starry Sky, JS Exp พิเศษเอฟเฟกต์ </title>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<style type = "text/css">
.ดาว {
ตำแหน่ง: สัมบูรณ์;
ชั้นหลังพื้น-สีขาว: สีขาว;
ทัศนวิสัย: มองเห็นได้;
ด้านบน: -50px;
ความกว้าง: 50px;
ความสูง: 50px;
ขนาดตัวอักษร: 1px;
พื้นหลังสี: สีขาว;
-
.60pt {ตัวอักษรขนาด: 60pt; สี:#ff66cc;}
</style>
<ภาษาสคริปต์ = "JavaScript">
-
var starnum = 75; // จำนวนดาว
var isns = (document.layers);
var _all = (isns)? '' : 'ทั้งหมด.';
var _style = (isns)? '' : '.สไตล์';
var xoffset, yoffset, w_x, w_y, tmpx, tmpy, scrlx, scrly;
ฟังก์ชั่น getStartPos (obj) {// กำหนดตำแหน่งเริ่มต้นของดวงดาวที่เคลื่อนที่
obj.deltay = math.floor (math.random () * 12); // ตัดสินใจด้วยฟังก์ชันสุ่ม
obj.deltax = math.floor (math.random () * 12);
obj.xdir = (math.floor (math.random () * 2) == 1)? -
obj.ydir = (math.floor (math.random () * 2) == 1)? -
obj.counter = 1;
ถ้า (isns) {
obj.clip.width = 1;
obj.clip.height = 1;
obj.moveto (xoffset+pagexoffset, yoffset+pageyoffset);
} อื่น {
obj.width = 1;
obj.height = 1;
obj.pixeltop = yoffset+document.body.scrolltop;
obj.pixelleft = xoffset+document.body.scrollleft;
-
-
ฟังก์ชั่น Movestar (Starn) // ตำแหน่งของดาวที่กำลังเคลื่อนที่
-
tmpx = starn.deltax*starn.counter+starn.counter;
tmpy = starn.deltay*starn.counter+starn.counter;
ถ้า (isns) {
starn.clip.width = starn.counter / 3;
starn.clip.height = starn.counter / 3;
scrlx = pagexoffset;
scly = pageyoffset;
if ((starn.left+tmpx> = w_x+scrlx) || (starn.top+tmpy> = w_y+screly) || (starn.left-tmpx <= scrlx) || (starn.top-tmpy <= scrlx) ||
GetStartPos (Starn);
} อื่น {
evals ('starn.moveby ('+starn.xdir+tmpx+','+starn.ydir+tmpy+')');
-
} อื่น {
starn.width = starn.counter/3;
starn.height = starn.counter/3;
scrlx = document.body.scrollleft;
scly = document.body.scrolltop;
if ((starn.pixelleft+tmpx> = w_x+scrlx) || (starn.pixeltop+tmpy> = w_y+screly) || (starn.pixelleft-tmpx <= scrlx) ||
GetStartPos (Starn);
} อื่น {
eval ('starn.pixeltop'+starn.ydir+'= tmpy');
eval ('starn.pixelleft'+starn.xdir+'= tmpx');
-
-
starn.counter ++;
-
ฟังก์ชั่น animate () // ปล่อยให้ดวงดาวทั้งหมดเคลื่อนไหว
-
สำหรับ (i = 1; i <= starnum; i ++) {
Movestar (eval ('star'+i));
-
settimeout ('antiMive ()', 100);
-
ฟังก์ชั่น findwindowparams () {// กำหนดตำแหน่งเริ่มต้นของดวงดาวที่เคลื่อนที่
w_x = (isns)? window.innerWidth: document.body.clientwidth;
w_y = (isns)? window.innerHeight: document.body.clientheight;
xoffset = w_x / 2;
yoffset = w_y / 2;
สำหรับ (i = 1; i <= starnum; i ++) {
getStartPos (eval ('star'+i));
-
-
ฟังก์ชั่น resizens () {
settimeout ('document.location.reload ()', 400);
-
(isns)? window.onresize = resizens: window.onresize = findwindowparams;
window.onload = ฟังก์ชั่นใหม่ ("findwindowparams (); animate ();");
-
</script>
</head>
<body>
<body bgcolor =#999999>
<ภาษาสคริปต์ = "JavaScript">
-
สำหรับ (i = 1; i <= starnum; i ++) {// กำหนดเลเยอร์สำหรับดาว
document.writeLn ('<div id = "star'+i+'"> </div>');
evaln ('var star'+i+'= document'+_ all+'star'+i+_style);
-
-
</script>
<p> <center>
<font class = 60pt> <br> บินบนท้องฟ้าที่เต็มไปด้วยดวงดาวของจักรวาล <br> </font>
</enter> <p>
</body>
</html>
เอฟเฟกต์การดำเนินการแสดงในรูปด้านล่าง:
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน