<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>随机显示星星</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <meta name="author" content="" /> <style type="text/css"></style> <script type="text/javascript"> //实例：随机显示小星星 /* (1)网页加载完成，背景颜色为黑色 (2)创建图片节点，并追加到body父节点下 (3)定时器 (4)星星随机大小 (5)星星随机定位 (6)单机星星，星星消失 */ window.onload=function(){ document.body.bgColor="#000"; //定时器开关 window.setInterval("start2()",1000); } function start2(){ //创建图片节点 var imgObj=document.createElement("img"); //追加到body节点 document.body.appendChild(imgObj); //添加属性 imgObj.setAttribute("src","xingxing.gif"); //添加width属性 var imgWidth=getRandom(15,85); imgObj.setAttribute("width",imgWidth); //添加style属性 //clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。 //window.innerWidth取得浏览器的定宽 火狐支持 //ie浏览器支持document.documentElement.clientX //如果"window.innerWidth"有值则执行前面的window.innerWidth(火狐支持);否则执行document.documentElement.clientWidth(ie浏览器兼容); /* if(window.innerWidth){ window.innerWidth }else{ document.documentElement.clientWidth; } */ var winWidth=window.innerWidth ? window.innerWidth : document.documentElement.clientWidth; var winHeight=window.innerHeight ? window.innerHeight : document.documentElement.clientHeight; //求随机数（出现的坐标） var x=getRandom(0,winWidth); var y=getRandom(0,winHeight); imgObj.setAttribute("style","position:absolute;left:"+x+"px;top:"+y+"px"); //单击删除星星 imgObj.setAttribute("onclick","removeImg(this)"); } function removeImg(imgObj){ document.body.removeChild(imgObj); } function getRandom(min,max){ var random=Math.random()*(max-min)+min; //向下取整 random=Math.floor(random); //返回值 return random; } </script> </head> <body> </body> </html>