首页 > 代码库 > JS对象实现随机满天小星星实例
JS对象实现随机满天小星星实例
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>满天小星星</title> 6 <meta name="keywords" content="关键字列表" /> 7 <meta name="description" content="网页描述" /> 8 <link rel="stylesheet" type="text/css" href="" /> 9 <style type="text/css"></style> 10 <script type="text/javascript"> 11 12 window.onload = function(){ 13 //1.要开启定时器 14 setInterval("createImg()",4000); 15 } 16 17 //表示图片的最大与最小值 18 var img_min_width = 15; 19 var img_max_width = 90; 20 //控制图片出现的范围 21 var x_left = 0; 22 var x_right = window.innerWidth-img_max_width; 23 var y_top = 0; 24 var y_bottom = window.innerHeight-img_max_width; 25 26 27 //定时器函数 28 function createImg(){ 29 //2.创建图片标签对象 30 var img_node = document.createElement("img"); 31 // 然后给这个标签对象添加src属性 32 img_node.setAttribute("src","images/xingxing.gif"); 33 //并且把创建好的img标签追加到body标签里面去 34 document.body.appendChild(img_node); 35 //图片大小随机出现 36 img_node.setAttribute("width",getRandom(img_max_width,img_min_width)); 37 //4图片出现的位置也是进行随机出现！ 38 var x = getRandom(x_right,x_left); 39 var y = getRandom(y_bottom,y_top); 40 img_node.setAttribute("style","position:absolute;left:"+x+"px;top:"+y+"px;"); 41 //5、当鼠标点击当前的这个星星时 就将当前这个星星移除掉 42 img_node.setAttribute("onclick","removeImg(this)"); 43 } 44 45 function getRandom(max,min){ 46 return Math.floor(Math.random()*(max-min+1)+min); 47 } 48 49 50 //这个函数的功能是要移除当前的星星 其实就是将img这个标签删除掉 51 function removeImg(obj){ 52 //当前要移除的标签对象的父元素.removeChild(要移除的标签对象) 53 obj.parentNode.removeChild(obj); 54 } 55 56 </script> 57 </head> 58 <body> 59 60 </body> 61 </html>
效果图:
JS对象实现随机满天小星星实例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。