的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次時，一個字顯示在下面

回答

相關問題