html随机出现一张图片,html随机出现笑脸图片代码

特效描述：html 随机出现笑脸图片。html随机出现笑脸图片代码

代码结构

1. HTML代码

/* 1、网页加载完成，开始笑脸

2、网页背景为黑色

3、定时器

节点

5、图片随机大小

6、图片随机定位坐标(x，y)

7、笑脸显示的范围，跟窗口一样(0，window.innerWidth)

8、点击笑脸，笑脸消失

*/

//网页加载完成

window.οnlοad=function()

{

//更改网页背景色

document.body.bgColor="#000000";

//定时器:2秒出现一个笑脸

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

}

//动画主函数

function star()

{

//创建img节点

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

//添加节点属性

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

imgObj.setAttribute("title","小星星");

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

var width=getRandom(15,85);

imgObj.setAttribute("width",width);

//创建style属性(行内样式)

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

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

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

//添加onclick事件属性,点击图片消失

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

下

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);

}