<!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>满天小星星</title>

     <meta name="keywords" content="关键字列表" />

     <meta name="description" content="网页描述" />

     <link rel="stylesheet" type="text/css" href="" />

     <style type="text/css"></style>

     <script type="text/javascript">

         window.onload = function(){

             //1.要开启定时器

             setInterval("createImg()",4000);

         }

         //表示图片的最大与最小值

         var img_min_width = 15;

         var img_max_width = 90;

         //控制图片出现的范围

         var x_left = 0;

         var x_right = window.innerWidth-img_max_width;

         var y_top = 0;

         var y_bottom = window.innerHeight-img_max_width;

         //定时器函数

         function createImg(){

             //2.创建图片标签对象

             var img_node = document.createElement("img");

 //            然后给这个标签对象添加src属性

                 img_node.setAttribute("src","images/xingxing.gif");

             //并且把创建好的img标签追加到body标签里面去

                 document.body.appendChild(img_node);

              //图片大小随机出现

               img_node.setAttribute("width",getRandom(img_max_width,img_min_width));

             //4图片出现的位置也是进行随机出现！

              var x = getRandom(x_right,x_left);

              var y = getRandom(y_bottom,y_top);

              img_node.setAttribute("style","position:absolute;left:"+x+"px;top:"+y+"px;");

              //5、当鼠标点击当前的这个星星时 就将当前这个星星移除掉

              img_node.setAttribute("onclick","removeImg(this)");

         }

         function getRandom(max,min){

             return Math.floor(Math.random()*(max-min+1)+min);

         }

         //这个函数的功能是要移除当前的星星  其实就是将img这个标签删除掉

         function removeImg(obj){

             //当前要移除的标签对象的父元素.removeChild(要移除的标签对象)

             obj.parentNode.removeChild(obj);

         }

     </script>

 </head>

 <body>

 </body>

 </html>

效果图:

JS对象实现随机满天小星星实例的更多相关文章

  1. JS中构造函数与原型对象的同名属性，实例会取哪一个

    构造函数与原型对象的同名属性,实例会取哪一个? 看了下面的过程,再回忆JS高程3里关于这部分的示意图.实例my在new的时候,本身就获得了a属性,所以my.a是1,倘若在new的时候如果没有赋予a属性 ...

  2. JS对象继承篇

    JS对象继承篇 ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的 原型链 其基本思路是利用原型让一个引用类型继承另一个引用类型的属性和方法 function Person() ...

  3. JS 对象封装的常用方式

    JS是一门面向对象语言,其对象是用prototype属性来模拟的,下面,来看看如何封装JS对象. 常规封装 function Person (name,age,sex){ this.name = na ...

  4. js对象详解

    js自定义对象 一,概述 在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtable类等等. 目前在J ...

  5. JS实现的随机显示图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  6. 如何判断一个js对象是否一个DOM对象

    我们在写js代码时有时需要判断某个对象是不是DOM对象,然后再进行后续的操作,这里我给出一种兼容各大浏览器,同时又算是比较稳妥的一种方法. 要判断一个对象是否DOM对象,首先想到的无非就是它是否具有D ...

  7. JSON与js对象序列化

    JavaScript对象表示法(JavaScript Object Notation,简称JSON)是一种轻量级的数据交换格式,它基于js字面量表示法,是js的一个子集.虽然是一个js的子集但是他与语 ...

  8. js 对象深复制，创建对象和继承

    js 对象深复制,创建对象和继承.主要参考高级编程第三版,总结网上部分资料和自己的代码测试心得.每走一小步,就做一个小结. 1.对象/数组深复制 一般的=号传递的都是对象/数组的引用,如在控制台输入 ...

  9. 超实用的JavaScript代码段 Item8 -- js对象的(深)拷贝

    js 对象 浅拷贝 和 深拷贝 1.浅拷贝 拷贝就是把父对像的属性,全部拷贝给子对象. 下面这个函数,就是在做拷贝: var Chinese = { nation:'中国' } var Doctor ...

随机推荐

  1. 【mysql】关于循环插入数据 存储设计

    要求插入的数据有一定的规律 新建实例列表 CREATE TABLE users ( userId ) NOT NULL, userName ) NOT NULL, Serves ) NOT NULL, ...

  2. myeclipse编译问题

    这个问题困扰了两天,在用springmvc编写Controller层的时候.我前台js跳转时@RequestMapping无法捕获到,但是之前的编写的都可以捕获正常执行.然后我更改js的跳转地址,发现 ...

  3. angular初步认识一

    最近比较流行MVC前端框架开发,最近研究了一个框架AngularJS框架 不说那么多,先上例子,我是个代码控 <!DOCTYPE html> <html lang="en& ...

  4. crack a router

    1. using hydra dhclient eth0 hydra -l admin -P /c0do/passwd.lst -0 ns -f -v 192.1681.1 htp-get / hyd ...

  5. Chinese economic influence in North Korea

    Where this new investment is being targeted is also interesting雄性禿 . "If you look at the econom ...

  6. 使用phantomjs实现highcharts等报表通过邮件发送（本文仅提供完整解决方案和实现思路，完全照搬不去整理代码无法马上得到效果）

    前不久项目组需要将测试相关的质量数据通过每日自动生成报表展示,并自动通过将报表作为邮件正文内容知会到干系人邮箱.那么问题来了,报表生成了,但是邮件怎么发送,因为highcharts等报表都是通过JS和 ...

  7. sql 日期格式输出 - 转

    SELECT CONVERT(varchar(100), GETDATE(), 0) 05 9 2011 9:12AM SELECT CONVERT(varchar(100), GETDATE(), ...

  8. Kruskal算法

    1.基本思想:设无向连通网为G＝(V, E),令G的最小生成树为T＝(U, TE),其初态为U＝V,TE＝{ },然后,按照边的权值由小到大的顺序,考察G的边集E中的各条边.若被考察的边的两个顶点属于 ...

  9. NYOJY 491 幸运三角形

    描述 话说有这么一个图形,只有两种符号组成(‘+’或者‘-’),图形的最上层有n个符号,往下个数依次减一,形成倒置的金字塔形状,除第一层外(第一层为所有可能情况),每层形状都由上层决定,相邻的符号相同 ...

  10. BackTrack5-r3改源

    默认源服务器是国外的,更新起来会很慢,所以要改成国内的. 所需要的文件包地址:http://pan.baidu.com/s/1i3ouc9v(64位更新包)进入BT系统图形模式-将(语言选择器)文件拖 ...