<!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. 基于hadoop的数据仓库工具：Hive概述

    Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供完整的sql查询功能,可以将sql语句转换为MapReduce任务进行运行.其优点是学习成本低,可以通过类 ...

  2. 搭建jms的步骤和过程

    搭建jms 参考网摘: http://www.jianshu.com/p/98689164a041

  3. IO操作

    /// <summary> /// 文件读写操作/// </summary> public partial class TestIO : DevComponents.DotNe ...

  4. cocos2d触碰例子代码

    // // TestLayer.h // MiniTD // // Created by OnePiece on 12-7-30. // Copyright 2012年 __MyCompanyName ...

  5. 微信小程序--摸索之旅

    首先 奉上腾讯官方文档 方便参考:https://mp.weixin.qq.com/debug/wxadoc/design/index.html  个人认为没说啥特别有用的信息(可能是我看的太粗糙了) ...

  6. Windows 10下通过蓝牙连接iPhone个人热点进行共享上网

    出处:qiuyi21.cnblogs.com 1.iPhone开启个人热点 在iPhone中打开蓝牙,然后进入“个人热点”并打开开关,如果提示热点发射方式请选择蓝牙那项,然后停留在“个人热点”界面并且 ...

  7. Linux 用户和用户组管理

    Linux 用户和用户组管理 Linux系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号,然后以这个账号的身份进入系统. 用户的账号一方面可以帮助 ...

  8. DataTable转List<dynamic>

    DataTable转List<dynamic> 最近做的一个项目,MVC+Ado.net.没有ORM很不习惯.找到一个办法,DataTable转List<dynamic>,这样 ...

  9. WebViewJavascriptBridge详细使用（转载）

    WebViewJavascriptBridge是支持到iOS6之前的版本的,用于支持native的iOS与javascript交互.如果需要支持到iOS6之前的app,使用它是很不错的.本篇讲讲Web ...

  10. VMware中装Win2012并配置Hyper-v

    VMware中装配Win2012再配置Hyper-v,解决虚拟机监控程序已经在运行中的方法 找到虚拟机存放的位置,用记事本打开Windows Server 2012.vmx,在最后添加两行并保存: h ...