1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>满天小星星</title>
  6.      <meta name="keywords" content="关键字列表" />
  7.      <meta name="description" content="网页描述" />
  8.      <link rel="stylesheet" type="text/css" href="" />
  9.      <style type="text/css"></style>
  10.      <script type="text/javascript">
  11.  
  12.          window.onload = function(){
  13.              //1.要开启定时器
  14.              setInterval("createImg()",4000);
  15.          }
  16.  
  17.          //表示图片的最大与最小值
  18.          var img_min_width = 15;
  19.          var img_max_width = 90;
  20.          //控制图片出现的范围
  21.          var x_left = 0;
  22.          var x_right = window.innerWidth-img_max_width;
  23.          var y_top = 0;
  24.          var y_bottom = window.innerHeight-img_max_width;
  25.  
  26.          //定时器函数
  27.          function createImg(){
  28.              //2.创建图片标签对象
  29.              var img_node = document.createElement("img");
  30.  //            然后给这个标签对象添加src属性
  31.                  img_node.setAttribute("src","images/xingxing.gif");
  32.              //并且把创建好的img标签追加到body标签里面去
  33.                  document.body.appendChild(img_node);
  34.               //图片大小随机出现
  35.                img_node.setAttribute("width",getRandom(img_max_width,img_min_width));
  36.              //4图片出现的位置也是进行随机出现！
  37.               var x = getRandom(x_right,x_left);
  38.               var y = getRandom(y_bottom,y_top);
  39.               img_node.setAttribute("style","position:absolute;left:"+x+"px;top:"+y+"px;");
  40.               //5、当鼠标点击当前的这个星星时 就将当前这个星星移除掉
  41.               img_node.setAttribute("onclick","removeImg(this)");
  42.          }
  43.  
  44.          function getRandom(max,min){
  45.              return Math.floor(Math.random()*(max-min+1)+min);
  46.          }
  47.  
  48.          //这个函数的功能是要移除当前的星星  其实就是将img这个标签删除掉
  49.          function removeImg(obj){
  50.              //当前要移除的标签对象的父元素.removeChild(要移除的标签对象)
  51.              obj.parentNode.removeChild(obj);
  52.          }
  53.  
  54.      </script>
  55.  </head>
  56.  <body>
  57.  
  58.  </body>
  59.  </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. 设计模式（3）--抽象工厂模式（Absrtact Factory Pattern）

    定义 抽象工厂模式的实质就是提供接口来创建一系列相关或独立的对象而不指定这些对象的具体类. 理解 在软件系统中,经常面临着"一系列相互依赖的对象"的创建工作:同时由于需求的变化,往 ...

  2. js初学者的div移动

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  3. tensor flow入门笔记

    个人学习笔记,欢迎交流.

  4. 动态加载jQuery

    success: function(data){ for(var i in data){ $('.x-details>ul:eq(0)').append("<li>&quo ...

  5. Bootstrap 模态框在用户点击背景空白处时会自动关闭

    问题: Bootstrap 模态框在用户点击背景空白处时,会自动关闭. 解决方法: 在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdr ...

  6. C++多线程3

    #include "stdafx.h" #include <windows.h> #include <process.h> int g_count; ; u ...

  7. Linux网络编程(多人在线聊天系统)

    一.首先是服务器的建立 首先是一个信号终止程序,发信号ctrl+c终止程序,而是是初始化网络通信. 创建一个描述符负责绑定服务器和监听服务器接收客户端的消息. socket()->sockadd ...

  8. 玩转mysql-5.7.9-winx64.zip解压版

    解压zip文件,放到D盘 追加\bin到Path环境变量 修改my-default.ini,# basedir =D:\mysql_5.7.9_winx64# datadir =D:\mysql_5. ...

  9. QM UML状态机建模实例之移植 cortex-m0

    ---恢复内容开始--- 在上一期“Blinky for cortex-m0”中我们介绍了如何在QM中建立一个工程和生成代码,如何使生成的代码在我们的工程师运行起来,为此这一期要介绍如何将QP-NAN ...

  10. linux-rpm

    1.         RPM本地安装 RPM包管理员(简称RPM,全称为The RPM Package Manager)是在Linux下广泛使用的软件包管理器.RPM此名词可能是指.rpm的文件格式的 ...