標籤：document 返回結果 w3c 樣式表 style dtd position move return
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 2 "http://www.w3.org/TR/xhtml1/TDT/xhtml1-strit.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 6 <title>隨機顯示小星星</title> 7 <script type="text/javascript"> 8 //隨機顯示小星星: 9 /* 10 1,網頁背景色是黑色11 2,建立表徵圖節點,追加到<body>父節點12 3,圖片大小隨機13 4,圖片座標隨機14 5,定時器15 6,網頁載入完成,開始星星16 7,星星顯示的範圍,跟視窗的寬高一樣.(0,window.innerWidth)17 8,點擊星星,星星消失18 */19 //網頁載入完成 調用一個函數20 window.onload=function(){21 //更改網頁背景色22 document.body.bgColor="#000"23 //定時器 一秒鐘顯示一個星星 一秒鐘調用star一次24 window.setInterval("star()",1000);25 }26 //動畫主函數27 function star(){28 //建立圖片節點29 var imgObj = document.createElement("img");30 //添加src屬性31 imgObj.setAttribute("src","images/lele.jpg");32 //添加width屬性 getRandom()隨機數函數33 var width = getRandom(20,120);34 imgObj.setAttribute("width",width);35 36 //添加層疊樣式表屬性(style屬性 行內樣式)37 var x = getRandom(0,window.innerWidth);38 var y = getRandom(0,window.innerHeight);39 //設定座標 x y 為未知數40 imgObj.setAttribute("style","position:absolute;left:"+x+"px;top:"+y+"px;");41 42 //添加onclick事件屬性43 //this 代表當前對象,this是一個對象,只能在函數內使用44 imgObj.setAttribute("onclick","removeImg(this)");45 //將圖片節點,掛載到<body>的父節點下46 document.body.appendChild(imgObj);47 }48 49 //函數:求隨機數函數50 function getRandom(min,max){51 var random = Math.random()*(max-min)+min;52 //向下取整53 random = Math.floor(random);54 //返回結果55 return random;56 57 }58 //函數:刪除節點59 function removeImg(obj){60 document.body.removeChild(obj);61 62 }63 </script>64 65 <style type="text/css">66 67 </style>68 69 </head>70 <body>71 72 73 </body>74 </html>
JS實現的隨機顯示圖片
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
