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

Posted zhao.bo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了随机显示星星(点击可删除)相关的知识,希望对你有一定的参考价值。

<!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

以上是关于随机显示星星(点击可删除)的主要内容,如果未能解决你的问题,请参考以下文章

HTML代码片段

微信小程序代码片段

vscode中设置vue代码片段

操作栏项目是可点击的,但不响应片段中的事件

JS---案例:点击按钮摇起来 & 星星闪动 (挺难看的)

淘宝评价星怎么修改