<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/TDT/xhtml1-strit.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

 <title>随机显示小星星</title>

 <script type="text/javascript">

 //随机显示小星星:

 /*

     1,网页背景色是黑色

     2,创建图标节点,追加到<body>父节点

     3,图片大小随机

     4,图片坐标随机

     5,定时器

     6,网页加载完成,开始星星

     7,星星显示的范围,跟窗口的宽高一样.(0,window.innerWidth)

     8,点击星星,星星消失

 */

 //网页加载完成 调用一个函数

 window.onload=function(){

 //更改网页背景色

 document.body.bgColor="#000"

 //定时器 一秒钟显示一个星星 一秒钟调用star一次

 window.setInterval("star()",1000);

 }

 //动画主函数

 function star(){

     //创建图片节点

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

     //添加src属性

     imgObj.setAttribute("src","images/lele.jpg");

     //添加width属性 getRandom()随机数函数

     var width = getRandom(20,120);

     imgObj.setAttribute("width",width);

     //添加层叠样式表属性(style属性  行内样式)

     var x = getRandom(0,window.innerWidth);

     var y = getRandom(0,window.innerHeight);

     //设置坐标 x y 为未知数

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

     //添加onclick事件属性

     //this 代表当前对象,this是一个对象,只能在函数内使用

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

     //将图片节点,挂载到<body>的父节点下

     document.body.appendChild(imgObj);

 }

 //函数:求随机数函数

 function getRandom(min,max){

     var random = Math.random()*(max-min)+min;

     //向下取整

     random = Math.floor(random);

     //返回结果

     return random;

 }

 //函数:删除节点

 function removeImg(obj){

     document.body.removeChild(obj);

 }

 </script>

 <style type="text/css">

 </style>

 </head>

 <body>

 </body>

 </html>

JS实现的随机显示图片的更多相关文章

  1. php 随机显示图片的函数(实例分享)

    转自:http://www.jbxue.com/article/12695.html 发布:thatboy   来源:Net     [大 中 小] 本文分享一个php实现的随机显示图片的函数,可以将 ...

  2. php 随机显示图片的函数(实例)

    转自:http://www.jbxue.com/article/12695.html   发布:thatboy   来源:Net     [大 中 小] 本文分享一个php实现的随机显示图片的函数,可 ...

  3. 【js】【图片显示】js控制html页面显示图片方式

    js控制html页面显示图片方式,只需要引入“jquery-1.11.2.min.js” js: /* 引用 <script src="jquery-1.11.2.min.js&quo ...

  4. tkinter改进了随机显示图片

    随机显示,还加了圆圈,这样感觉更好点. from django.test import TestCase # Create your tests here. import random import ...

  5. js随机显示图片

    定义一个图片数组,生成一个随机数对应数据索引. window.onload = choosePic; function choosePic() { var myPix = new Array(&quo ...

  6. 【js】【图片瀑布流】js瀑布流显示图片20180315

    js实现把图片用瀑布流显示,只需要“jquery-1.11.2.min.js”. js: //瀑布流显示图片 var WaterfallImg = { option: { maxWidth: 850, ...

  7. 随机漂浮图片、右侧上下浮动快捷栏JS

    随机漂浮图片JS: //公共脚本文件 main.js function addEvent(obj,evtType,func,cap){ cap=cap||false; if(obj.addEventL ...

  8. jq实现随机显示部分图片在页面上（兼容IE5）

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

  9. 如是使用JS实现页面内容随机显示

    之前有个客户咨询我,因为他们公司的业务员有多个人,但公司网站的联系方式板块里只够放一个人的信息,所以就想能不能实现这个联系方式信息随机显示,对于业务或客服人员来说也能做到分配均匀公平.本文我们将和大家 ...

随机推荐

  1. 检测文件是否有BOM 头，并删除BOM头（php）

    将下面文件放在网站根目录访问即可,它会遍历当前目录下所有子目录,检测文件是否含有BOM头,并删除BOM头 <?php //remove the utf-8 boms //by magicbug ...

  2. SOCKET 服务器停止服务时清理连接操作

    刚想到一个情况,正好是工作中遇到的. 当服务器停止时,正好有连接的请求正在被处理,而此时服务端需要等待该请求被正常的处理完,然后给客户端发送响应报文. 正常情况下,服务器停止的时候,是希望发送了响应报 ...

  3. AS快捷键

    Ctrl+Q 显示关键字的提示文档 Ctrl+鼠标点击 查看关键字的源码 ctrl+T 在不同的选项卡中进行切换 ctrl+J 提示当前位置输入模板 Ctrl+P 提示参数 Alt+Enter 提示 ...

  4. WEB打印控件Lodop

    主页 http://www.lodop.net/

  5. robocopy 命令小结

    robocopy "C:\dira" "J:\dira" /E /COPYALL /XJ /XD "C:\dira\dir1" " ...

  6. LVM原理及PV、VG、LV、PE、LE关系图

    PV(physical volume):物理卷在逻辑卷管理系统最底层,可为整个物理硬盘或实际物理硬盘上的分区.VG(volume group):卷组建立在物理卷上,一卷组中至少要包括一物理卷,卷组建立 ...

  7. C#：USB设备枚举 －－转自CSDN作者：Splash

    (一)DeviceIoControl的PInvoke /* ---------------------------------------------------------- 文件名称:Device ...

  8. 转：Java.file

    类 java.io.File 的使用 使用 File 的软件包 java.awt 包含用于创建用户界面和绘制图形图像的所有类. java.io 通过数据流.序列化和文件系统提供系统输入和输出. jav ...

  9. JAVA 多线程和并发学习笔记（三）

    Java并发编程中使用Executors类创建和管理线程的用法 1.类 Executors Executors类可以看做一个“工具类”.援引JDK1.6 API中的介绍: 此包中所定义的 Execut ...

  10. Oracle和SQLServer解锁杀进程

    ORACLE:在平时工作中经常会遇到数据库死锁的情况,以前使用oracle时候(那时候还不懂),出现这种情况时前辈给了我一段命令:SELECT dob.OBJECT_NAME Table_Name,l ...