星空网 > 软件开发 > Java

js 随机星星 document.createElement(); setAttribute()

js 随机星星 document.createElement(); setAttribute()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript">//实例:随机显示的小星星/*  (1)网页背景是黑的  (2)星星随机大小:min=15,max=80  (3)星星的坐标是随机的:x_left=0,x_right=(浏览器宽-星星宽)              y_top=0,y_bottom=?  (4)单击某个星星,星星消失  (5)网页加载完成,开始显示星星  (6)定时器:每隔一个周期,插入一个星星*///定义全局变量var img_width_min = 15;var img_width_max = 80;var x_left = 0;var x_right = 0;var y_top = 0;var y_bottom = 0;//定义初始化的函数function init(){  document.body.bgColor = "#000";  x_right = window.innerWidth - img_width_max;  y_bottom = window.innerHeight - img_width_max;  //定时器  setInterval("showStar()",1000);}//显示星星function showStar(){  //创建一个图片  var node_img = document.createElement("img");  //随机图片大小和随机坐标  var width = getRandom(img_width_min,img_width_max);  var x = getRandom(x_left,x_right);  var y = getRandom(y_top,y_bottom);  //增加src的属性  node_img.setAttribute("src","images/xingxing.gif");  //增加style属性  var style = "position:absolute;left:"+x+"px;top:"+y+"px;";  style += "width:"+width+"px;";  node_img.setAttribute("style",style);  //增加一个onclick事件属性  node_img.setAttribute("onclick","removeImg(this)");  //将图片追加到<body>元素下  document.body.appendChild(node_img);}function removeImg(obj){  document.body.removeChild(obj);}function getRandom(min,max){  return Math.floor(Math.random()*(max-min)+min);}</script></head><body onload="init()"></body></html>

 




原标题:js 随机星星 document.createElement(); setAttribute()

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

谷歌广告类型:https://www.goluckyvip.com/tag/15040.html
Topgus Da:https://www.goluckyvip.com/tag/15041.html
Google AdWo:https://www.goluckyvip.com/tag/15042.html
策略吗|盘点:https://www.goluckyvip.com/tag/15043.html
年已失效的:https://www.goluckyvip.com/tag/15044.html
Feed:https://www.goluckyvip.com/tag/15045.html
洛阳市涧西区有啥好玩的地方 洛阳涧西区附近景点:https://www.vstour.cn/a/408256.html
九月初新疆旅游服装搭配(新疆游玩必备衣服清单):https://www.vstour.cn/a/408257.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流