Javascript 如何在一次点击按钮时制作一个选框循环？

我试图实现的是，当我点击按钮时，字幕播放一次。我的问题是，如果我将循环设置为1，那么它只播放一次，然后什么也不做。我的另一个问题是，如果我松开鼠标左键，它会在我当前代码的中途停止。或者它停在原来的地方。有没有办法让它在按下按钮时播放一次，然后在再次按下按钮时再次播放，并让它完全完成循环。下面是代码，我愿意使用java脚本而不是html。这是我目前的代码：

+一,

您可以使用CSS和JQuery（或Javascript）来实现这一点

在下面的示例中，我使用CSS规则来实现动画效果，并使用JQuery从te DOM中添加/删除span元素

代码示例：

var marquee='+1'；
$（'.btn'）。单击（函数（）{
$（'.anim'）.remove（）；//如果节点在那里，则删除该节点
$（'.marquee'）.append（marquee）；//追加节点
});
.marquee{
宽度：20px；
高度：20px；
溢出：隐藏；
}
.marquee>span{
位置：相对位置；
前-100%；
左：0；
}
.阿尼姆{
动画名称：示例；
动画持续时间：2秒；
}
@关键帧示例{
0%,100% {
不透明度：0；
最高：100%；
}
50% {
不透明度：1；
排名：0；
}
}

点击这里您愿意使用纯CSS吗

似乎您需要单击一个“+1”计数器。您可以使用CSS转换来实现这一点。我将使用锚点而不是输入，因为您可以更好地控制它的样式

你可能想给它添加一些运动，改变时间，或者交换线性来放松，但这是一个起点。请将其视为概念证明。

HTML:


a.play{
填充：6px 8px；
边界半径：4px；
背景：#ccc；
边框：1px实心#bbb；
文字装饰：无；
颜色：#111；
位置：相对位置；
}
a、 游戏：聚焦：之前，
a、 播放：活动：之前{
内容：“+1”；
位置：绝对位置；
顶部：-16px；
左：6px；
颜色：#006699；
字体大小：粗体；
-webkit动画：fadeinout 1.3s线性向前；
动画：FadeInOut1.3s线性向前；
}
@-webkit关键帧淡出{
0%，100%{不透明度：0；}
10%{不透明度：1；}
}
@关键帧淡入淡出{
0%，100%{不透明度：0；}
10%{不透明度：1；}
}

您为什么要使用“”选框标记？fbid，非常感谢。我还没有太多的经验，所以我真的不知道从哪里开始。你给了一个很好的答案。杰森，这是一个选择，但我认为fbid的答案更好，不是针对个人的。谢谢你的回答！