實作效果：

滿天星

分欄名稱	傳送門
🎐爬蟲難，跟我一起入爬蟲坑，爬蟲一條龍服務！🎐	《入坑Python爬蟲》
🐲Django框架難，跟我一起一條龍教學（附帶多個小型專案實戰！）🐲	《Django框架一條龍》
🐋Scrapy框架難，跟我一起一條龍教學（附帶多個小型專案實戰！）🐋	《Scrapy框架一條龍》
🐠Tornado框架難，跟我一起一條龍教學（附帶一個完整專案！）🐠	《Tornado框架一條龍》
🐝爬蟲——JS滲透；三大驗證碼（滑塊，點觸，圖形）；字體反爬；移動端！🐝	《爬蟲高級一條龍》

?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?

原始碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滿天星</title>
</head>
<body style="background-color: black">
<script>
    // 對于頁面視窗設定單擊事件
    window.onclick = function (n) {     //n代表滑鼠點擊視窗這個事件
        // 創建節點，即創建img標簽     <img src="" alt="">
        var img = document.createElement("img");
        // 為標簽添加src屬性
        img.setAttribute("src","star.gif");
        // 點擊視窗生成的星星大小是隨機的
        var size = Math.random()*100+50;
        // 為img影像設定屬性，改變大小
        img.setAttribute("width",size);
        // 設定圖片的位置                                獲取滑鼠點擊的位置    .clientX:獲取滑鼠點擊的x軸坐標的位置
        img.style.position = "absolute";             //絕對定位的參考物件是設定了定位的父級，此處沒有設定定位的父級，則為瀏覽器
        img.style.left = (n.clientX - size/2) + "px";       //因為圖片是以左上角為(0,0)點，所以要讓圖片中心移到左上角(0,0)處
        img.style.top = (n.clientY - size/2) + "px";

        document.body.appendChild(img);
    };
</script>
</body>
</html>

（如果需要原始碼中圖片的小伙伴們請點贊收藏評論之后私信我哦！）

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/292354.html

標籤：python

上一篇：那些讓你驚掉下巴到肚皮上的python冷知識(一)

下一篇：一位女性朋友和我PK別踩白塊兒，輸了私藏照片給我，冠希哥用Python輕松贏下

實作滿天星效果——純前端實作（純小白也能看懂&CV直接拿走直接用&&原始碼分享）

實作效果：

原始碼：