JS星星发光
下面我们使用Visual Studio这个软件来写一个JS.的代码,我们可以用JS的代码写一个简单的方法,就是实现一个用gif图然后结合JS实现发光的效果。
那么这个代码要怎么写呢,首先我们需要先在界面上写一下的Html的代码,我们来看一下界面的代码是什么,看以下截图:
在截图中我们可以看到界面的代码就是非常的简单啦。就是直接用一个body里面直接给他写一个属性,这个属性是背景颜色为黑色的。
Html界面就这么简单了,然后我们来写一下script里面的代码。
代码的内容,见截图:
首先我们先写一个script的方法,然后在这个方法里面写上代码。
我们通过第24行写一个鼠标点击的方法。
这个onclick的意思就是该onclick属性返回当前元素的click事件处理程序代码。
注意:当使用该click事件触发某个动作时,还可以考虑将相同的动作添加到该keydown事件中,以允许不使用鼠标或触摸屏的人使用该动作
然后第25行就是let关键字,它跟var关键字的区别就是。
声明后未赋值,表现相同
使用未声明的变量,表现不同
重复声明同一个变量时,表现不同
变量作用范围,表现不同
然后他的意思就是创建一个img,接着26行的意思设置一个src的路径地址,他的路径就是你找的图片的位置。然后接着27行的意思就是设置图片的大小位置随机,然后29行的意思就是设置一下图片的位置,利用图片的style.potion属性给他设置一个“absoloute”绝对定位,然后在图片的属性X和Y轴上,clientX和clientY的意思就是在点击位置距离当前body可视区域的x,y坐标,然后最后再讲图片插入在body里面。
接着我们就可以实现出来这个方法,我们可以看一下实现的功能是怎么样子的
看以下截图代码:
接着我们就可以从页面上看到上面截图的效果,当你鼠标点击window窗口的时候,然后他会获取鼠标的位置,接着就实现代码的流程,首先先创建img的图片,然后给他设置图片的路径,接着就是设置图片的位置还有给图片进行定位,还有设置它的样式,接着就是图片的随机大小,最后就是插入在页面的body里面了。