首页 > 代码库 > 随机显示星星(点击可删除)【转】

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

2024-08-22 13:53:08   219人阅读

<!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>
转载自：http://www.cnblogs.com/yangzailu/p/6090164.html

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


联系
我们