前端新手记录自己在网络上找到的前端练习项目。
项目简介
黑色背景的网页上随机分布着一个个闪烁的星星，星星闪烁的效果的是由一个有7个不同时刻星星的图片通过定时器循环显示来实现。
星星闪烁.gif
star.png
html部分
此项目的html和CSS都比较简单，放在了一起。
<body style="background:#000">
<div id="stars"></div>
</body>
可以在html中直接使用style属性来添加CSS，本项目直接将背景设为黑色。
javascript部分
<script>
var stars = document.getElementById('stars');
var Obj = function() {} //创建一个对象
Obj.prototype.drawStar = function() {
var odiv = document.createElement('div');//创建div元素
odiv.style.width = "7px";//设置元素宽度
odiv.style.height = "7px";//设置元素高度
odiv.style.position = 'relative';//设置元素定位使用的类型
odiv.style.left = Math.floor(document.body.clientWidth * Math.random()) + "px";//随机生成一个左侧位置
odiv.style.top = Math.floor(document.body.clientHeight * Math.random()) + "px";//随即生成一个顶部位置
odiv.style.overflow = "hidden";//溢出部分隐藏
stars.appendChild(odiv);//将元素放在stars元素里面
var ostar = document.createElement('img');//创建img元素（图像）
ostar.style.width = '49px';//设置元素宽度
ostar.style.height = '7px';//设置元素高度
ostar.src = 'imgs/star.png';//图片引用位置
ostar.style.position = 'absolute';//设置元素定位使用的类型
ostar.style.top = '0px';//顶部位置
odiv.appendChild(ostar);//将元素放在div元素里
Play(ostar);
}
//实现闪烁
function Play(ele) {
var i = Math.floor(Math.random() * 7);
var timer = setInterval(function() { //定时器，7个图片循环显示
if(i < 7) {
ele.style.left = -i * 7 + 'px';
i++;
}
else {
i = 0;
}
}, 100);
}
//创建30个星星
for(var i = 0; i < 30; i++) {
var obj = new Obj();
obj.drawStar();
}
</script>
style属性
在javascript中可以通过style属性来获取或者改变DOM元素的样式。
prototype属性
prototype 属性用来向对象添加属性和方法。
setInterval()
setInterval(code,interval)方法按照指定的周期执行来执行一段程序；周期是以毫秒为单位的。
参数列表：
| 参数 | 说明 |
|---|---|
| code | 必需。要周期执行的程序。 |
| interval | 必需。周期的时间跨度，以毫秒计算。 |
CSS部分
本项目没有单独的CSS，但有个CSS知识点需要记录一下。
position属性
position用来指定元素的定位类型，常用的值为relative和absolute。使用absolute时，生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定；使用relative时，生成相对定位的元素，相对于其正常位置进行定位，因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
结束语
一闪一闪亮晶晶，满天都是小星星，简单又漂亮的一个小项目。源码查看请点击https://github.com/yunkai123/WebProjectStudy。
网友评论