你如何在最后一个子节点上放置一个点击计数器来计算你点击最后一个节点的次数

     2023-02-19     302

关键词:

【中文标题】你如何在最后一个子节点上放置一个点击计数器来计算你点击最后一个节点的次数【英文标题】:how do you put a click counter on a last child node to count how many times you click on the last node 【发布时间】:2021-11-05 18:39:52 【问题描述】:

我正在制作一个面部匹配游戏,并想计算出你在警报消息中正确选择了多少次我会将计数代码信息放入游戏中的功能还是我会创建一个新功能来放入它只有左边的最后一个孩子?

<body onload='generateFaces()'>
  <h1>'Matching Game'</h1>
  <p>'Click on the extra face on the left.'<p>
  <div id='leftSide'></div>
  <div id='rightSide'></div>
  <script>
      let numberOfFaces = 5;
      const theLeftSide= document.getElementById('leftSide');
      const theRightSide= document.getElementById('rightSide');
  

      function generateFaces()
          for (let i=0; i < numberOfFaces; i++) 
            const face= document.createElement('img');
            face.src= 'image/smile.png';
            const randomTop = Math.floor(Math.random()*400) +1;
            const randomLeft = Math.floor(Math.random()*400) +1;
            face.style.top = randomTop + 'px';
            face.style.left = randomLeft + 'px';
            theLeftSide.appendChild(face);
          

          const leftSideImages = theLeftSide.cloneNode(true);
          leftSideImages.removeChild(leftSideImages.lastChild);
          theRightSide.appendChild(leftSideImages);
          theLeftSide.lastChild.addEventListener('click', nextLevel);
          document.body.addEventListener('click', gameOver);
      

      function nextLevel() 
          event.stopPropagation();
          numberOfFaces += 5;
          while (theLeftSide.lastChild) 
              theLeftSide.removeChild(theLeftSide.lastChild);
          
          while (theRightSide.lastChild)
              theRightSide.removeChild(theRightSide.lastChild);
          
          generateFaces();
      

      function gameOver() 
          alert('GaMe OvEr! !\n Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum.');
          document.body.removeEventListener('click', gameOver);
          theLeftSide.lastChild.removeEventListener('click', nextLevel);
      
  </script>
</body>

【问题讨论】:

【参考方案1】:

您需要声明一个变量来存储用户单击最后一个节点的次数。例如let num = 0; 然后在您的 nextLevel() 函数中添加少量内容,即 num = num + 1;。要在屏幕上显示它,您必须声明单独的 HTML 标记。然后你可以使用document.getElementById('clicked').innerText = num + ' times user has clicked';。它会正常工作。

【讨论】:

Seaborn FacetGrid - 在最后一个子图之后放置单个颜色条

】SeabornFacetGrid-在最后一个子图之后放置单个颜色条【英文标题】:SeabornFacetGrid-Placesinglecolorbarafterlastsubplot【发布时间】:2018-09-2706:43:10【问题描述】:我正在尝试将颜色条添加到3个seaborn地块的网格中。我可以将颜色条添加到3... 查看详情

jsjquery获取当前元素的兄弟级上一个下一个元素jquery如何获取第一个或最后一个子元素

varchils=s.childNodes; //得到s的全部子节点varpar=s.parentNode;  //得到s的父节点varns=s.nextSbiling;  //获得s的下一个兄弟节点varps=s.previousSbiling; //得到s的上一个兄弟节点varfc=s.firstChild;  / 查看详情

c#treeview是一个代码,用于将子节点安排为其父节点的最后一个子节点(代码片段)

我正在使用treeView在表单上的treeView中显示序列目录及其子目录和文件,我使用以下方法加载树视图在表单加载:treeView1.Nodes.Clear();toolTip1.ShowAlways=true;LoadDirectory("C:\Windows\System32\"+inventedName);和以下3种方法来加载目录和子目录和文... 查看详情

altiumdesignerpcb板上如何添加文字

用了放置栏中的A(放置字符串图标),为什么放在PCB上颜色就变了,违反了什么规则么?怎么解决?谢谢在AltiumdesignerPCB板上文字需要在丝印层上添加,如果在铜箔层添加,就变成导线了。以下演示步骤以Altiumdesigner软件为例。1... 查看详情

最后一周作业

1、当初你是如何做出选择计算机专业的决定的?经过一个学期,你的看法改变了么,为什么?你觉得计算机是你喜欢的领域吗,它是你擅长的领域吗?为什么?当初选择计算机专业是由于个人喜欢物理,打算考研是跨考物理系... 查看详情

dom

核心DOM 属性 firstChild第一个子节点? lastChild最后一个子节点? parentNode父节点? childNodes子节点列表列表是通过数组的方式来进行访问就算子节点列表只有一个元素那么也需要使用数组的方式来访问? nodeName 节点名称? nodeValue 节点的... 查看详情

c语言最后一次作业--总结报告

1、当初你是如何做出选择计算机专业的决定的?经过一个学期,你的看法改变了么,为什么?你觉得计算机是你喜欢的领域吗,它是你擅长的领域吗?为什么?因为当今是一个计算机网络的时代,很多事情都要计算机来完成,... 查看详情

最后一周作业

1.当初你是如何做出选择计算机专业的决定的?经过一个学期你的想法改变了么,为什么?你觉得计算机是你喜欢的领域吗,它是你擅长的领域吗?为什么?回答:①说实话,我在报考前一直在思考要选择什么专业,我的语言表... 查看详情

最后一次作业

1、当初你是如何做出选择计算机专业的决定的?经过一个学期,你的看法改变了么,为什么?你觉得计算机是你喜欢的领域吗,它是你擅长的领域吗?为什么?  从小就喜欢玩电脑,对电脑很感兴趣,所以上了高中以后... 查看详情

拖放一个子节点

...03-1216:18:29【问题描述】:我在TreeView控件中填充了数据。如何使用JQUERY从父节点拖动特定子节点并将拖动的子节点拖放到DIV或任何部分?我知道在jquery中,有“可拖动”和“可放置”的方法使这成为可能。但我想拖动一个特定的... 查看详情

excel表格如何统计选中行的行数?

1,打开Excel表格程序,进入程序主界面中,打开一张要进行操作的表格。2,接着,在Excel表格中点击上方菜单中的“函数”,点击以下的函数。3,在对话框窗口中输入以下内容。4,接着,在第二行位置输入统计的区域。5,最后... 查看详情

最后一次作业

1、当初你是如何做出选择计算机专业的决定的?经过一个学期,你的看法改变了么,为什么?你觉得计算机是你喜欢的领域吗,它是你擅长的领域吗?为什么?当初是觉得在现在的社会发展来说,计算机领域已经成为一个非常... 查看详情

电脑虚拟机怎么弄呀?

...间,等系统配置完备后,在弹出的窗口中,你可点击”我如何确定哪些设备软件可以安全安装?”进行查看,确定完毕后,点击”安装“。8、安装过程中,可能会反复弹出”你是否需要安装“的窗口,你只需点击”安装“直到... 查看详情

vc6.0中的treecontrol控件,如何给有的节点设checkbox,而有的节点不设?具体代码如何实现?

1、如果使用Checkbox属性,那么要么全有,要么全无,不能单个设置。2、需要自定义控件,通过Item的图标来标识是否checkbox,或者你恰好将图标绘制的和复选方框一摸一样。鼠标点击的时候通过切换图片来达到视觉上复选、取消... 查看详情

c语言最后一次作业--总结报告

1、当初你是如何做出选择计算机专业的决定的?经过一个学期,你的看法改变了么,为什么?你觉得计算机是你喜欢的领域吗,它是你擅长的领域吗?为什么?当今时代计算机技术发展日新月异,通过查询也认为计算机专业前... 查看详情

块匹配游戏放置算法

...我有一个MxM网格的瓷砖,并且有N种不同的瓷砖类型,我如何计算瓷砖的“随机”放置,以使3个相同类型的瓷砖的组数 查看详情

保存每个项目的点击次数

...:30:56【问题描述】:目前我尝试为我的网页建立一个点赞计数器。您可以在下面看到点击计数器。它完全正常工作。可悲的是(但可以肯定)仅针对当前会话...是否有可能永久存储该值?最后一件事!在网站上喜欢的图片不止一... 查看详情

信号-计时器例子(代码片段)

...头惯例感谢godot开发者团队~~~~)计时器例子要查看信号是如何工作的,让我们尝试使用 Timer 节点。使用一个节点和两个子节点来创建一个新场景:一个是:Timer和一个 Sprite。您可以使用Godot图标作为Sprite的纹理,或者... 查看详情