JavaScript实现满天星效果图:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>满天星</title>
<style>
@import url(https://at.alicdn.com/t/c/font_3830565_ggfjhclw6wh.css);
body {
background-color: rgb(0, 0, 0);
overflow: hidden;
}
</style>
</head>
<body>
<script>
// 随机函数 生成随机数
function getRandom(x, y) {
return Math.random() * (y -x ) + x;
}
//生成星星函数 实现颜色随机,大小随机的星星
function drawStar(num) {
for(var i=0; i<num; i++){
var div = document.createElement('div');
div.className = 'iconfont icon-star1';
// 设置样式
// 1.字体大小
div.style.fontSize = getRandom(20, 30) + 'px';
// 2.颜色随机
div.style.color = 'rgb(' + getRandom(0, 256) + ',' + getRandom(0, 256) + ',' + getRandom(0, 256) + ')';
// 3. 位置随机(可视区域位置)
div.style.position = 'absolute';
div.style.left = getRandom(0, window.innerWidth) + 'px';
div.style.top = getRandom(0, window.innerHeight) + 'px';
// 4. body中添加div
document.body.appendChild(div);
}
}
// 调用函数
drawStar(300);
</script>
</body>
</html>