的Javascript：这个词被点击5次时，一个字显示在下面

-4

我试图进行一个脚本，我想工作如下：每次的Javascript：这个词被点击5次时，一个字显示在下面

一句话显示出来，并在用户点击句子，另一句话出现。有五个句子选项，每次用户点击一个“随机”句子显示的句子。然后点击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>

来源

2015-03-30 Jamie Theophilos

您可以跟踪点击事件中的点击次数，然后在第五次点击或甚至点击时做一些特殊的事情，将它们均匀地分成5次。 – lintmouse 2015-03-30 20:33:53

您遇到的问题是......？ – j08691 2015-03-30 20:34:05

最简单的方法很可能是使用拼接从容器它的随机选择，并显示每个时间删除元素。

之后，您可以检查容器是否为空（或具有“完整的-5”元素数量），然后显示链接。

像这样的东西（试图把它清理干净了一下，仍然需要大量的 - 就像在JS做的CSS规则的东西应该在CSS来实现）：

var container = ["random sentence1", "random sentence2", "random sentence3", "random sentence4", "random sentence5", "random sentence6"]; 
 
var con = document.getElementById("container"); 
 
var count = container.length - 5; 
 

 
function dieroll() { 
 
    if (container.length == count) { 
 
    con.appendChild(text1); 
 
    $(text1).fadeIn(3000);  
 
    } else {  
 
    var chance = Math.floor(Math.random() * container.length); 
 
    con.innerHTML = container[chance]; 
 
    container.splice(chance, 1);  
 
    } 
 
} 
 

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

 
con.addEventListener('click', dieroll); 
 
dieroll();

#container { 
 
    background: #eeeeee; 
 
    width: 330px; 
 
    height: 220px; 
 
    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; 
 
    cursor: pointer; 
 
    font-size: 8px; 
 
} 
 
#container div { 
 
    font-size: 10px; 
 
    display: none; 
 
} 
 
a:link { 
 
    color: #0000e6; 
 
    background-color: transparent 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="container"></div>

来源

2015-03-30 20:38:25 Shomz

我做类似的东西回来了。基本上，我在按钮上创建了一个data-元素，并在每次单击时减少它。在JS（把我的头顶部）

<div id="btnCount" data-count="5"></div>

然后：所以在HTML我有这个

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]); 
});

希望有所帮助。

来源

2015-03-30 20:46:05

的Javascript：这个词被点击5次时，一个字显示在下面

回答

相关问题