你的位置:首页 > 软件开发 > Java > 随机显示星星(点击可删除)

随机显示星星(点击可删除)

发布时间:2016-11-22 18:00:05
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&qu ...

随机显示星星(点击可删除)

随机显示星星(点击可删除)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ="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>

原标题:随机显示星星(点击可删除)

关键词:随机

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。