JS实现的随机显示图片

时间：2024-05-26 15:37:32
 <!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>

相关文章