实现满天星效果——纯前端实现（纯小白也能看懂&CV直接拿走直接用&&源码分享）
Posted 孤寒者
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现满天星效果——纯前端实现（纯小白也能看懂&CV直接拿走直接用&&源码分享）相关的知识，希望对你有一定的参考价值。
实现效果：
满天星
| 分栏名称 | 传送门 |
|---|---|
| 🎐爬虫难，跟我一起入爬虫坑，爬虫一条龙服务！🎐 | 《入坑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>
（如果需要源码中图片的小伙伴们请点赞收藏评论之后私信我哦！）
以上是关于实现满天星效果——纯前端实现（纯小白也能看懂&CV直接拿走直接用&&源码分享）的主要内容，如果未能解决你的问题，请参考以下文章
网页钟表设计——纯前端实现（纯小白也能看懂&CV直接拿走直接用&&源码分享）
实现输入属性&&属性值更改标签属性——纯前端实现（纯小白也能看懂&CV直接拿走直接用&&源码分享）
猜数字游戏——纯前端实现（纯小白也能看懂&CV直接拿走直接玩）