<!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. c# 进程间的通信实现之一简单字符串收发

       使用Windows API实现两个进程间(含窗体)的通信在Windows下的两个进程之间通信通常有多种实现方式,在.NET中,有如命名管道.消息队列.共享内存等实现方式,这篇文章要讲的是使用Wi ...

  2. CRM 启用或禁用自定义代码执行

    启用自定义代码执行 1.打开 Windows PowerShell 命令窗口. 2.添加 Microsoft Dynamics 365 PowerShell 管理单元: Add-PSSnapin Mi ...

  3. Python爬虫学习1

    #coding=utf-8 from urllib2 import urlopen from bs4 import BeautifulSoup import urllib2 url="htt ...

  4. 一键配置openvpn

    页面:https://github.com/Nyr/openvpn-install openvpn-install OpenVPN road warrior installer for Debian, ...

  5. sed字符串替换

    把drivers目录下的所有pr_log替换成:pr_snd sed -i "s/pr_log/pr_snd/g" `grep pr_log -rl drivers/` 把driv ...

  6. vc6.0运用mysql数据库中的编码所导致的乱码问题（接收和输出的编码必须要一致）

    [编译中遇见的问题]       ①在用vc 6.0去调用MySQL中的数据时,出现中文乱码       ②不明白mysql中的码制 [开始解决问题]      ①打开mysql控制台         ...

  7. jquery的blur之后,focus获取不到焦点的解决办法

    一:很多童鞋可能会遇到这种情况: jquery的blur之后,focus获取不到焦点. 二:使用场景: 用户填写信息的时候,若邮箱为空,则提示 请填写邮箱,并将光标置于填写邮箱的文本框里,方便用户的再 ...

  8. delphi.指针.应用

    注:初稿...有点乱,可能增删改... 因为指针应用,感觉不好写,请大家指出错误,谢谢. 注意: 本文着重点讲的是指针的各类型的应用或使用,而不是说这种方法不应该+不安全+危险+不提倡使用. 其它:本 ...

  9. 【转载】快速收索并更新sid 方法

    利用Google的搜索功能,可以获得不少SAS各个版本的SID号,试过之后你会异常惊喜.1．打开谷歌: http://google.com.hk2．输入或复制这个段文字:"SID_heade ...

  10. PHP5.6.15连接Sql Server 2008配置方案

    php5.6的如果想连接Sql Server 2008数据库,需要手动配置扩展和安装一个驱动. 下载SQL Server Driver for PHP的扩展包,64位系统的官方不支持,找到一个非官方的 ...