Fatal编程技术网
  • javascript/
  • Javascript：当该单词被点击5次时，另一个单词显示在下面

Javascript：当该单词被点击5次时，另一个单词显示在下面

javascript jquery

Javascript：当该单词被点击5次时，另一个单词显示在下面,javascript,jquery,Javascript,Jquery,我正在尝试执行一个脚本，我希望如下所示： 出现一个句子，用户每次单击该句子，就会出现另一个句子。共有五个句子选项，每次用户单击该句子时，都会显示一个“随机”句子。单击5次后，下面会出现一个链接。我希望所有这些都是一个容器/分区的一部分 这是我的密码 <html> <head> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery

我正在尝试执行一个脚本，我希望如下所示：

出现一个句子，用户每次单击该句子，就会出现另一个句子。共有五个句子选项，每次用户单击该句子时，都会显示一个“随机”句子。单击5次后，下面会出现一个链接。我希望所有这些都是一个容器/分区的一部分

这是我的密码

    <html>
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

<style>

#container{
        background: #eeeeee;
        width:330px;
        height:220px;
        margin-top:350px;
        margin-left:700px;
        border:1px solid #000000;
        border-top: 5px solid #000000;
        border-top-left-radius:.5em;
        border-top-right-radius:.5em;
        opacity: .7;
        text-align: center;
        z-index:4;
        position: fixed;
        box-shadow: 8px 8px 2px;
        overflow: hidden;
        font-family: 'Courier New', Courier, monospace;
    }


a:link    {color:#0000e6; background-color:transparent}

</style>
</head>

<body>

<div id="container"> </div>

<script>


 var container=["random sentence1", "random sentence2", "random sentence3", "random sentence4", "random sentence5", "random sentence6"];

function dieroll() {
    var chance=Math.floor(Math.random()* container.length);

    var roll=document.getElementById("container");
        roll.innerHTML= container[chance];
        roll.style.fontSize="8px";
        roll.style.cursor="pointer";

}
 var text1 =document.createElement('div');
    text1.innerHTML = '<a href="#">the link that would show up beneath the random sentences above';
    text1.style.padding ="10px";
    text1.style.display ="none";



    console.log("array at:"+i);
     var numClicks = 0;
        var x = 5;
    if (numClicks == x) {
        con.innerHTML+=list[i];
        i++;
    } else {
        con.appendChild(text1);
        $(text1).fadeIn(3000);



//console.log(chance)

window.onload=function(){
dieroll();

};



</script>
</body>
</html>


#容器{
背景：#eeeeee；
宽度：330px；
高度：220px；
利润上限：350px；
左边距：700px；
边框：1px实心#000000；
边框顶部：5px实心#000000；
边框左上半径：.5em；
边框右上角半径：.5em；
不透明度：.7；
文本对齐：居中；
z指数：4；
位置：固定；
盒影：8px 8px 2px；
溢出：隐藏；
字体系列：“Courier New”，Courier，monospace；
}
a:链接{color:#0000e6；背景色：透明}
var container=[“随机句子1”、“随机句子2”、“随机句子3”、“随机句子4”、“随机句子5”、“随机句子6”]；
函数dieroll（）{
var chance=Math.floor（Math.random（）*container.length）；
var roll=document.getElementById（“容器”）；
roll.innerHTML=container[chance]；
roll.style.fontSize=“8px”；
roll.style.cursor=“指针”；
}
var text1=document.createElement（'div'）；
text1.innerHTML='将显示在上面随机句子下面的链接'；
text1.style.padding=“10px”；
text1.style.display=“无”；
log（“数组位于：+i”）；
var numClicks=0；
var x=5；
if（numClicks==x）{
con.innerHTML+=列表[i]；
i++；
}否则{
con.appendChild（text1）；
$（text1）.fadeIn（3000）；
//console.log（偶然性）
window.onload=function（）{
dieroll（）；
};
最简单的方法可能是每次随机选择并显示元素时，使用splice从容器中移除元素

之后，您可以检查容器是否为空（或者有“full-5”个元素），然后显示链接

类似这样的事情（试图清理一下，仍然需要很多东西，比如JS中的CSS规则应该在CSS中完成）：

var container=[“随机句子1”、“随机句子2”、“随机句子3”、“随机句子4”、“随机句子5”、“随机句子6”]；
var con=document.getElementById（“容器”）；
var count=container.length-5；
函数dieroll（）{
if（container.length==计数）{
con.appendChild（text1）；
$（text1）.fadeIn（3000）；
}否则{
var chance=Math.floor（Math.random（）*container.length）；
con.innerHTML=容器[chance]；
容器。拼接（机会，1）；
}
}
var text1=document.createElement（'div'）；
text1.innerHTML='将显示在上面随机句子下面的链接'；
con.addEventListener（“点击”，滚动）；
dieroll（）；
#容器{
背景：#eeeeee；
宽度：330px；
高度：220px；
边框：1px实心#000000；
边框顶部：5px实心#000000；
边框左上半径：.5em；
边框右上角半径：.5em；
不透明度：.7；
文本对齐：居中；
z指数：4；
位置：固定；
盒影：8px 8px 2px；
溢出：隐藏；
字体系列：“Courier New”，Courier，monospace；
光标：指针；
字号：8px；
}
#货柜组{
字体大小：10px；
显示：无；
}
a:链接{
颜色：#0000e6；
背景色：透明
}
不久前，我做了类似的事情。基本上，我在按钮上创建了一个
数据-
元素，并在每次单击时将其递减。因此，在HTML中，我有以下内容：

<div id="btnCount" data-count="5"></div>
然后在JS中（在我的头顶上）：

var语句=[
“第1句”、“第2句”、“等等”
];
$（'#btnCount'）。在（'单击'，函数（）上）{
var$t=$（本）；
var count=$t.data（'count'）-1；
$t.data（'count'）=计数；
如果（！计数）{
$t.prop（'disabled'，true）；
}
$t.append（“
”+句子[count]）；
});
希望这会有所帮助。

您可以跟踪单击事件中的单击次数，然后在第五次单击时，甚至在平均分为5次的单击时，执行一些特殊操作。您遇到的问题是。。。？ 
var sentences = [
  'sentence 1','sentence 2', // etc
];

$('#btnCount').on( 'click', function() {
  var $t = $(this); 
  var count = $t.data('count') - 1;
  $t.data('count') = count;

  if ( !count ) {
    $t.prop( 'disabled', true ); 
  }
  $t.append( '<br/>'+ sentences[count] );
});