Skocz do zawartości


 

Zdjęcie

Losowanie elementów JavaScript

Losowanie elementów JavaScript losowanie JavaScript JS HTML CSS function reload

  • Proszę się zalogować aby odpowiedzieć
1 odpowiedzi na ten temat

Losowanie elementów JavaScript

#1 t9omek

t9omek

    Regularny użytkownik

  • Użytkownicy
  • 93 postów
  • Imię:Tomek

Napisany 20 grudzień 2017 - 12:32

Cześć, chciałbym napisać program w JS który by losował liczby z przedziału 1-49 (to już mam). Liczby powinny być losowane po kliknięciu przycisku losuj, po każdym kliknięciu powinny pokazywać się nowe liczby. Nie wiem jak sobie z tym poradzić, próbowałem wykorzystać reload jednak on przeładowuje całą stronę i nie wykonuje się następna funkcja. 

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>losowanie
    </title>
    
    
    <style>
        
       html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
} 
        
        
        html {
            font-family: arial;
        }
        
        button1 {
            display: block;
            margin: 0 auto;
            background-color: #fff;
            border: 3px solid black;
            padding: 10px 20px;
            font-size: 20px;
            font-family: arial;  
            transition: .3s;
             width: 60px;
            height: 60px;
        }    
        button1:hover{
            background-color: #000;
            color: white;
        }
        
        button2 {
            display: block;
            margin: 0 auto;
            background-color: #fff;
            border: 3px solid black;
            padding: 10px 20px;
            font-size: 20px;
            font-family: arial;  
            transition: .3s;
             width: 60px;
            height: 60px;
        }    
        button2:hover{
            background-color: #000;
            color: white;
        }
        
        
        
        div {
            float: left;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: crimson;
            margin: 10px;
            line-height: 60px;
            text-align: center;
            font-weight: bold;
            color: white;
         
        }
    </style>
    
</head>

<body>
  
    <button2>losuj</button2>
   
   <!-- <div>23</div> -->
    
    
    <script>
        const result = [];
        let kbutton = 0;
        
        const reload = function(){
            
            javascript:location.reload()
            
              
          
        }
        
      
        
        const KBF = function(){
            kbutton++;
            spr();
            
        }
        
        
        
  const spr = function(){
            
            if(result.length === 6 && kbutton > 0){
               
                
                reload();
                losowanie();
            
            }
            else{
                losowanie();
               
            }
                
            
            
        }
        
        
        
        
        //tworzymy element div
        const losowanie = function(){
            
        for( let i = 0; i < 6; i++){    
        
        if(result.length === 6) return;   
            
        const div = document.createElement("div");
        const wynikLosowania = Math.floor(Math.random() *49 + 1); 
            
            
        for(let i = 0; i < result.length; i++){
            
            if(wynikLosowania === result[i]){
                return losowanie();
            }
        } 
            
         div.textContent = wynikLosowania;
            document.body.appendChild(div);
            result.push(wynikLosowania); // dodajemy do tablicy wyniku
          
        }
        }
        
       
        
        const button2 = document.querySelector("button2");
        
        //nasłuchiwanie na zdarzenie
    button2.addEventListener("click", KBF);
    
    
    </script>
</body>
</html>


  • 0

#2 t9omek

t9omek

    Regularny użytkownik

  • Użytkownicy
  • 93 postów
  • Imię:Tomek

Napisany 21 grudzień 2017 - 23:53

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>losowanie
    </title>
    
    
    <style>
        
       html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
} 
        
        
        html {
            font-family: arial;
        }
        
        button1 {
            display: block;
            margin: 0 auto;
            background-color: #fff;
            border: 3px solid black;
            padding: 10px 20px;
            font-size: 20px;
            font-family: arial;  
            transition: .3s;
             width: 60px;
            height: 60px;
        }    
        button1:hover{
            background-color: #000;
            color: white;
        }
        
        button2 {
            display: block;
            margin: 0 auto;
            background-color: #fff;
            border: 3px solid black;
            padding: 10px 20px;
            font-size: 20px;
            font-family: arial;  
            transition: .3s;
             width: 60px;
            height: 60px;
        }    
        button2:hover{
            background-color: #000;
            color: white;
        }
        
        
        
        div {
            float: left;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: crimson;
            margin: 10px;
            line-height: 60px;
            text-align: center;
            font-weight: bold;
            color: white;
         
        }
    </style>
    
</head>

<body>
  
    <button2>losuj</button2>
 
    
 
    
    
    <script>
        let result = [];
        let kbutton = 0;
        
        
        const reload = function(){
          
            
         for( let i = 0; i < 6; i++){    
         let x = document.getElementById("blo");
             x.remove(); 
         }
            
  result.length = 0;
          
        }
        
      
        
        const KBF = function(){
            kbutton++;
            spr();
            
        }
        
        
        
  const spr = function(){
            
            if(result.length === 6 && kbutton > 0){
               
                
               reload();
               losowanie();
            
            }
            else{
                losowanie();
               
            }
                
            
            
        }
        
        
        
        
        //tworzymy element div
        const losowanie = function(){
            
        for( let i = 0; i < 6; i++){    
        
        if(result.length === 6) return;   
       
        const div = document.createElement("div");
            div.id = 'blo';
        const wynikLosowania = Math.floor(Math.random() *49 + 1); 
            
            
        for(let i = 0; i < result.length; i++){
            
            if(wynikLosowania === result[i]){
                return losowanie();
            }
        } 
            
         div.textContent = wynikLosowania;
            document.body.appendChild(div);
            result.push(wynikLosowania); // dodajemy do tablicy wyniku
          
        }
        }
        
       
        
        const button2 = document.querySelector("button2");
        
        //nasłuchiwanie na zdarzenie
    button2.addEventListener("click", KBF);
    
    
    </script>
</body>
</html>


działa


  • 0






Także otagowane jednym lub więcej z tych słów kluczowych: losowanie, JavaScript, JS, HTML, CSS, function, reload

0 użytkowników czyta ten temat

0 użytkowników, 0 gości, 0 anonimowych użytkowników