首页 » 技术分享 » JS鼠标点击功能

JS鼠标点击功能

 

JS鼠标点击功能

(撰写时间:2019年8月7日)
下面我们使用Visual Studio这个软件来写一个小案例,我们可以用写一个简单的方法,就是实现一个鼠标点击a链接标签的时候出现在另外一个div里面显示的功能效果。
那么这个代码要怎么写呢,首先我们需要先在界面上写一下的Html的代码,我们来看一下界面的代码是什么。
我们先看一下Html页面的截图:

在这里插入图片描述

在截图中我们可以看到界面的代码就是,很简单的直接给他一个div包裹着一个div然后div里面还嵌套的一个ul的列表,里面还写了3个a标签的嵌套内容。然后接下来看一下属性代码的截图:

在这里插入图片描述

从上面可以看到,给这个标签写了3个属性的代码,设置一些他的属性值的高度和宽度,还有一些颜色等。接着定义好界面的属性代码我们接着就需要写一下代码。然后实现出鼠标点击a链接标签的时候出现在另外一个div里面显示的功能效果,见截图:

在这里插入图片描述

首先,我们看一下这个代码很短,但是也是基础的。我们先写一个window.onload的方法,这个方法是什么意思呢。onload的意思是事件会在页面或者图像加载完成后立即发生的事件,
那么window.onload的意思就是加载的问题由于HTML加载时由上往下的,在HTML加载的时候,遇到function关键字,声明一个函数的时候,就会在内存中开辟一个新的空间来对函数进行存储,方便以后进行调用。所以,当将function()写到window.onload()=function(){}内部的时候,需要整个页面加载完成的之后,才声明这个函数,也就意味着,当HTML加载到DIV”的时候,window.οnlοad=function(){}里面的函数div还没有被声明,这时候内存中就找不到function(),于是就会报错。
接着我们看一下46到48行,getElementById的意思是方法可以返回对拥有指定ID的第一个对象的引用,也就是获取到ID为demo的数据,getElementsByTagName的意思就是返回元素的顺序,就是他们在li里面的顺序。
接着我们看一下第49行,写了一个for的循环语句。这个for的循环语句的意思就是循环开始之前设置了一个变量(var i = 0)定义好循环的条件。(i必须小于oto2)。然后最后就是每次执行之后对值进行递增(i++)。然后里面循环的内容就是oto的index内容等于i,然后当他点击的时候就进行对应的数据。
最后他的功能效果就做出来了,接下来我们看一下实现的效果:

在这里插入图片描述

最后就实现出鼠标点击a链接标签的时候出现在另外一个div里面显示的功能效果。

转载自原文链接, 如需删除请联系管理员。

原文链接:JS鼠标点击功能,转载请注明来源!

0