1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > html随机出现一张图片 html随机出现笑脸图片代码

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

时间:2021-08-01 23:40:57

相关推荐

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

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。