📄 you5.htm

📁 javascript各种效果的实例及源代码
💻 HTM
字号:
<html>
<head>
<title>模拟太空飞行</title>
<style type="text/css">
<!--
body {  font-family: "宋体"; font-size: 9pt; margin-top: 0px; margin-left: 0px; margin-right: 0px}
A { COLOR: black; FONT-SIZE: 13px; FONT-WEIGHT: 400; TEXT-DECORATION: none }
 A:hover { COLOR: red; FONT-SIZE: 13px; FONT-WEIGHT: 400; TEXT-DECORATION: underline }
a:active     { font: 9pt "宋体"; cursor: hand; color: #FF0033 }

-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Tomer Shiran

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var total = 0
var play = false
function display(element) {
var now = new Date()
if (!play) {
play = true
startTime = now.getTime()}
if (now.getTime() - startTime > 20000) {
element.checked = !element.checked
return
}
 if (element.checked)
total++
else
total--
element.form.num.value = total
}
function restart(form) {
total = 0
play = false
for (var i = 1; i <= 100; ++i) {
 form.elements[i].checked = false
   }
}
// End -->
</SCRIPT>
</head>
<BODY bgcolor="black" onLoad="space()">
<br>
<br>
<center><font color=red face="隶书" size=6>模拟太空飞行</font></center>
<br>
<center>

<br>
<br>
<center>
<table border=5 bordercolor=blue borderlight=green>
<tr><td align=center><font size=5 color=red face="Arial, Helvetica, sans-serif"><strong>看到效果了吧!</strong></font></td></tr><tr><td align=center>
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
astropic = "5.jpg"; // location of YOUR astronaut image
var xval = new Array(); // holds star coordinates
var yval = new Array();
no = 100;  // number of stars in the background
speed = 200; // speed
xp = 20 + 100 * Math.random();
yp = 20 + 100 * Math.random();
angle = 3.14 * Math.random(); // astronaut angle
xinc = 3 * Math.sin(angle);
yinc = 3;
ie = (document.all)? 1 : 0;
ns = (document.layers)? 1: 0;
if (ie) {
width = document.body.clientWidth;
height = document.body.clientHeight;
for (var i = 0; i <= no; i++) {
document.write("<div id=\"div" + i+ "\" style=\"color:white;");
document.write("position:absolute;left:100;\">.</div>");
}
document.write("<div id=\"diva\" style=\"position:absolute;\">");
document.write("<img src=" + astropic + " border=\"0\" width=\"65\" height=\"95\"></div>");
for (i = 0; i <= no; i++) {
xval[i] = width * Math.random();
yval[i] = height * Math.random();
document.all["div" + i].style.left = xval[i];
document.all["div" + i].style.top = yval[i];
   }
}
if (ns) {
width = self.innerWidth;
height = self.innerHeight;
for (var i = 0; i <= no; i++) {
document.write("<layer id=\"div" + i+ "\" style=\"color:white;");
document.write("position:absolute;left:100;\">.</layer>");
}
document.write("<layer id=\"diva\" style=\"position:absolute;\">");
document.write("<img src=" + astropic + " border=\"0\" width=\"65\" height=\"95\"></layer>");
for (i = 0; i <= no; i++) {
xval[i] = width * Math.random();
yval[i] = height * Math.random();
document.layers["div" + i].left = xval[i];
document.layers["div" + i].top = yval[i];
   }
}
function star() {
for (i = 0; i <= no; i = i+4) {
xval[i] +=5;
if ((i%20) == 0) xval[i] += 10;
if(xval[i] >= width)  xval[i] = width * Math.random();
if (ie) document.all["div" + i].style.left = xval[i];
if (ns) document.layers["div" + i].left = xval[i];
}
return true;
}
function goangle() {
angle = 3.14 * Math.random();
xinc = 3 * Math.sin(angle);
return true;
}
function space() {
if (ie) {
document.all["diva"].style.left = xp;
document.all["diva"].style.top = yp;
}
if (ns) {
document.layers["diva"].left = xp;
document.layers["diva"].top = yp;
}
xp += xinc;
yp +=yinc;
star();
if ((xp >= (width - 50)) || (xp <= 10))  { goangle();  xinc = (-1) * xinc; }
if ((yp >= (height - 50)) || (yp <= 10)) {  goangle(); yinc = (-1) * yinc; }
setTimeout('space()', speed);
}
//  End -->
</script>
</td></tr>
</table></center>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<center>
<textarea name=source rows=12 cols=45 class=yk9>
脚本说明:
第一步:把如下代码加入<body>区域中
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
astropic = "5.jpg"; // location of YOUR astronaut image
var xval = new Array(); // holds star coordinates
var yval = new Array();
no = 100;  // number of stars in the background
speed = 200; // speed
xp = 20 + 100 * Math.random();
yp = 20 + 100 * Math.random();
angle = 3.14 * Math.random(); // astronaut angle
xinc = 3 * Math.sin(angle);
yinc = 3;
ie = (document.all)? 1 : 0;
ns = (document.layers)? 1: 0;
if (ie) {
width = document.body.clientWidth;
height = document.body.clientHeight;
for (var i = 0; i <= no; i++) {
document.write("<div id=\"div" + i+ "\" style=\"color:white;");
document.write("position:absolute;left:100;\">.</div>");
}
document.write("<div id=\"diva\" style=\"position:absolute;\">");
document.write("<img src=" + astropic + " border=\"0\" width=\"65\" height=\"95\"></div>");
for (i = 0; i <= no; i++) {
xval[i] = width * Math.random();
yval[i] = height * Math.random();
document.all["div" + i].style.left = xval[i];
document.all["div" + i].style.top = yval[i];
   }
}
if (ns) {
width = self.innerWidth;
height = self.innerHeight;
for (var i = 0; i <= no; i++) {
document.write("<layer id=\"div" + i+ "\" style=\"color:white;");
document.write("position:absolute;left:100;\">.</layer>");
}
document.write("<layer id=\"diva\" style=\"position:absolute;\">");
document.write("<img src=" + astropic + " border=\"0\" width=\"65\" height=\"95\"></layer>");
for (i = 0; i <= no; i++) {
xval[i] = width * Math.random();
yval[i] = height * Math.random();
document.layers["div" + i].left = xval[i];
document.layers["div" + i].top = yval[i];
   }
}
function star() {
for (i = 0; i <= no; i = i+4) {
xval[i] +=5;
if ((i%20) == 0) xval[i] += 10;
if(xval[i] >= width)  xval[i] = width * Math.random();
if (ie) document.all["div" + i].style.left = xval[i];
if (ns) document.layers["div" + i].left = xval[i];
}
return true;
}
function goangle() {
angle = 3.14 * Math.random();
xinc = 3 * Math.sin(angle);
return true;
}
function space() {
if (ie) {
document.all["diva"].style.left = xp;
document.all["diva"].style.top = yp;
}
if (ns) {
document.layers["diva"].left = xp;
document.layers["diva"].top = yp;
}
xp += xinc;
yp +=yinc;
star();
if ((xp >= (width - 50)) || (xp <= 10))  { goangle();  xinc = (-1) * xinc; }
if ((yp >= (height - 50)) || (yp <= 10)) {  goangle(); yinc = (-1) * yinc; }
setTimeout('space()', speed);
}
//  End -->
</script>



第二步:把<body>区域中的内容改为:
<BODY bgcolor="black" onLoad="space()">
</textarea>
<SCRIPT LANGUAGE="JavaScript">

<!-- hide

function goHist(a) 

{

   history.go(a);

}

//-->

</script>

<FORM METHOD="post">
<INPUT TYPE="button" VALUE="返回" onClick="goHist(-1)" style="background-color: #8000FF; color: rgb(255,255,255)">
</form>
</center>
<br>
<br>
</body>
</html>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -