<!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. LeetCode 169. Majority Element

    Given an array of size n, find the majority element. The majority element is the element that appear ...

  2. yii-basic-app-2.0.5/basic/config/web.php

    <?php $params = require(__DIR__ . '/params.php'); $config = [ 'id' => 'basic', 'basePath' => ...

  3. 在ANSYS WORKBENCH中使用APDL命令的例子

    如何在workbench中使用command? 如何在ansys workbench中插入apdl? 如何在ansys workbench中使用复杂载荷? 答案在APDL,他可以实现函数化的载荷,如岁 ...

  4. excel导出字符串

     "style", "vnd.ms-excel.numberformat: @;" 

  5. spring mvc使用@InitBinder 标签对表单数据绑定

    在SpringMVC中,bean中定义了Date,double等类型,如果没有做任何处理的话,日期以及double都无法绑定. 解决的办法就是使用spring mvc提供的@InitBinder标签 ...

  6. URL Regex expression

    转载: http://blog.csdn.net/weasleyqi/article/details/7912647 首先,正则表达式: String check = @"((http|ft ...

  7. mysql下将分隔字符串转换为数组

    MySQL存储过程可以用于分割字符串,下面就为您详细介绍这种MySQL存储过程的用法,供您参考学习之用. 现有一段字符串,如apple,banana,orange,pears,grape,要把它按照逗 ...

  8. Java Socket编程

    Java最初是作为网络编程语言出现的,其对网络提供了高度的支持,使得客户端和服务器的沟通变成了现实,而在网络编程中,使用最多的就是Socket.像大家熟悉的QQ.MSN都使用了Socket相关的技术. ...

  9. oracle数据库中的基本语句

    下面的都是最基本的oracle数据库的数据查询语句,这是我在网上整理的一份文档,方便以后自己的查看,当然,能把这些记下来就是最好的. 说明:查询表中的数据 1. select * from emp; ...

  10. 解决vs2008无法切换设计视图的问题

    在 Visual Studio 2008的编辑一个web页面的时候,“源视图”(Source View), 你可以自定义设计视图(Design View)为默认视图. 方法如下: 菜单:工具+选项+h ...