提示：文章寫完后，目錄可以自動生成，如何生成可參考右邊的幫助檔案
文章目錄
- 一、效果展示
- 二、實作程序
- 1.案例分析
- 2.代碼展示
提示：以下是本篇文章正文內容，下面案例可供參考
一、效果展示
二、實作程序
1.案例分析
- 布局分析： 以body 為框在里面動態的添加圖片
- 效果分析： 每隔1秒鐘自動生成一顆星星，點擊星星把本顆星移除節點，
注意： 點擊的時候是點擊的圖片 ，移除的節點是圖片的父節點，
2.代碼展示
代碼如下（示例）：
<style>
body {
background-color: #000;
overflow: hidden;
}
.box {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 80px;
}
.box img {
width: 100%;
height: 100%;
}
</style>
<script>
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
Xing();
function Xing() {
var newbox = document.createElement('div');
newbox.className = 'box';
var img = document.createElement('img');
img.src = 'images/xingxing.gif';
newbox.appendChild(img);
document.body.appendChild(newbox);
var w = getRandom(10, 80) + 'px';
newbox.style.width = w;
newbox.style.height = w;
newbox.style.top = getRandom(0, 680) + 'px';
newbox.style.left = getRandom(0, document.body.clientWidth) + 'px';
document.body.appendChild(newbox);
}
var box = document.querySelector('.box');
var timer = setInterval(Xing, 1000);
document.addEventListener('click', function(e) {
document.body.removeChild(e.target.parentNode);
})
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/392137.html
標籤：其他