Diferència entre revisions de la pàgina «Solucio botons celestials»

De wikiserver
Dreceres ràpides: navegació, cerca
(→‎solució 3)
 
(Hi ha 7 revisions intermèdies del mateix usuari que no es mostren)
Línia 1: Línia 1:
 +
'''SOLUCIÓ 1'''
 
HTML:
 
HTML:
 
<source lang="java">
 
<source lang="java">
Línia 65: Línia 66:
  
  
−
opció 2
 
  
 +
<!--
 +
opció 3
 +
 +
<source lang="javascript">
 +
window.onload = function () {
 +
            var cont = 1;
 +
            document.getElementById("creator").onclick = generarBotones;
 +
            document.getElementById("eliminar").onclick = eliminarBotones;
 +
 +
            function generarBotones() {
 +
 +
                var resul = Math.floor((Math.random() * 10) + 1);
 +
                var angelDemonio = Math.floor((Math.random() * 2)+0);
 +
 +
                if (angelDemonio) {
 +
                    for (i = 0; i < resul; i++) {
 +
 +
                        var btn = document.createElement("button");
 +
                        var contenido = document.createTextNode("angelet");
 +
                        cont++;
 +
                        btn.appendChild(contenido);
 +
                        btn.id =  cont;
 +
                        btn.addEventListener('click', function () {
 +
                            this.onclick = generarBotones();
 +
                        }, false);
 +
                        document.body.appendChild(btn);
 +
                    }
 +
                } else {
 +
                    for (i = 0; i < resul; i++) {
 +
 +
                        var btn = document.createElement("button");
 +
                        var contenido = document.createTextNode("diablet");
 +
                        cont++;
 +
                        btn.appendChild(contenido);
 +
                        btn.id = cont;
 +
                        btn.addEventListener('click', function () {
 +
                                    var resul = Math.floor((Math.random() * 10) + 1);
 +
                                    for (i = 0; i < resul; i ++) {
 +
                                        cont--;
 +
                                        var parrafo = document.getElementById(cont);
 +
                                        this.parentNode.removeChild(parrafo);
 +
                            }
 +
                        }, false);
 +
                        document.body.appendChild(btn);
 +
                    }
 +
                }
 +
 +
            }
 +
 +
        }
 +
</source>
 +
 +
<source lang="html">
 +
<body>
 +
<button id='creator'>Crear</button>
 +
<br>
 +
<button id='eliminar'>Eliminar</button>
 +
<br>
 +
</body>
 +
 +
</source>
 +
 +
-->
 +
SOLUCIÓ 2
 
<source lang="java">
 
<source lang="java">
−
var i = 1;
+
 
−
document.getElementById('creator').addEventListener('click',function(){
+
<!DOCTYPE html>
−
  var div = document.createElement('div');
+
<!--
−
  var text = document.createTextNode('New Div ' + i);
+
To change this license header, choose License Headers in Project Properties.
−
  div.appendChild(text);
+
To change this template file, choose Tools | Templates
−
  document.body.appendChild(div);
+
and open the template in the editor.
−
  i++;
+
-->
−
});
+
<html>
−
document.addEventListener('click',function(e){
+
    <head>
−
    // Fixed
+
        <title>TODO supply a title</title>
−
    if(e.target.tagName.toLowerCase() === 'div'){
+
        <meta charset="UTF-8">
−
        console.log(e.target);
+
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
−
     }
+
        <script type="text/javascript">
−
  })
+
 
−
<div>
+
            function crearBotones() {
−
  Div actual
+
                //Numero random de botones a crear
 +
                var max = Math.floor((Math.random() * 10) + 1);
 +
                for (var i = 0; i < max; i++) {
 +
                    //Numero random para crear Angel o Demonio
 +
                    var x = Math.floor((Math.random() * 2) + 1);
 +
                    if (x === 1){
 +
                        crearAngel();
 +
                    } else {
 +
                        crearDemonio()
 +
                    }   
 +
                }
 +
            }
 +
           
 +
            function borrarBotones() {
 +
                var max = Math.floor((Math.random() * 5) + 1);
 +
                var content = document.getElementById("content");
 +
                for (var i = 0; i < max; i++) {  
 +
                    //Creamos una array con todos los elementos button.
 +
                    var but = document.getElementsByTagName("button");
 +
                    //Generamos un numero aleatorio entre 1 y el max de botones que hay creados.
 +
                    var del = Math.floor((Math.random() * but.length) + 1) - 1;
 +
                    //Eliminamos el boton.
 +
                    content.removeChild(but[del]);  
 +
                }
 +
            }
 +
           
 +
            function crearAngel(){
 +
                var btn = document.createElement("button");
 +
                var contenido = document.createTextNode("Angel");
 +
                btn.appendChild(contenido);
 +
                btn.addEventListener('click', crearBotones, false);
 +
                document.getElementById("content").appendChild(btn);
 +
            }
 +
           
 +
            function crearDemonio(){
 +
                var btn = document.createElement("button");
 +
                var contenido = document.createTextNode("Demonio");
 +
                btn.appendChild(contenido);
 +
                btn.addEventListener('click', borrarBotones, false);
 +
                document.getElementById("content").appendChild(btn);
 +
            }
 +
 
 +
        </script>
 +
    </head>
 +
     <body>
 +
  <div id="content">
 +
<button onclick="crearBotones()">Angel</button>
 +
<button onclick="borrarBotones()">Demonio</button>
 
</div>
 
</div>
−
<button id='creator'>Crear</button>
+
    </body>
 +
</html>
 +
 
 +
</source>
 +
 
 +
== solució 3==
 +
 
 +
<source lang="java">
 +
<!DOCTYPE html>
 +
<html>
 +
<head><meta charset="utf-8">
 +
<title>Botons Celestials</title>
 +
<script type="text/javascript">
 +
        window.onload = function() {
 +
function borra() {
 +
let n = Math.floor((Math.random() * 20) +1);
 +
for (let i = 0; i < n; i++) {
 +
 +
                        document.body.removeChild(document.body.lastChild);
 +
}
 +
}
 +
function crea() {
 +
let n = Math.floor((Math.random() * 10) +1);
 +
for (let i = 0; i < n; i++) {
 +
let new_button = document.createElement('button');
 +
let m = Math.floor((Math.random() * 2) +1);
 +
var text;
 +
 +
                        if (m == 1) {
 +
    text = document.createTextNode('Angelet');
 +
    new_button.addEventListener('click', crea);
 +
        } else {
 +
    text = document.createTextNode('Diablet');
 +
    new_button.addEventListener('click', borra);
 +
}
 +
    new_button.appendChild(text);
 +
 +
document.body.appendChild(new_button);
 +
}
 +
}
 +
 +
document.getElementById('ang').addEventListener('click', crea);
 +
 
 +
document.getElementById('dem').addEventListener('click', borra);
 +
}
 +
</script>
 +
</head>
 +
<body>
 +
<button id="ang">Angelet</button>
 +
<button id="dem">Diablet</button>
 +
<br>
 +
 
 +
</body>
 +
</html>
 
</source>
 
</source>

Revisió de 18:42, 16 feb 2021

SOLUCIÓ 1 HTML: 

<html>
    <head>
        <script type="text/javascript" src="bceles.js"></script>
    </head>
    <body></body>
    
</html>

Javascript: 

window.listId = [];
window.numButton = -1;

function init(){
    createButton("func0");
    createButton("func1");
}

function func0(){
    //angelet
    var maxb = Math.floor(Math.random()*10);
    for(i=0;i<maxb;i++){
        createButton();
    }
        
}


function func1(){
    //diablet
    var maxelements = Math.min(20,window.listId.length);
    var numbuttondeleted = Math.floor(Math.random()*maxelements);
    for(i=0;i<numbuttondeleted;i++){
        deleteNode();
    }
    
    function deleteNode(){
        var index =  Math.floor(Math.random()*window.listId.length);
        var delboton = document.getElementById(window.listId[index]+"");
        delboton.parentNode.removeChild(delboton);
        window.listId.splice(index,1);
    }
    
}

function createButton(func){
    var div = document.createElement("span");
    div.setAttribute("id", window.numButton)
    var b = document.createElement("button"); 
    func = (func)? func : "func"+Math.floor(Math.random()*2);
    b.onclick = function(){eval(func +"()");};
    var t = document.createTextNode("b" + window.numButton);
    b.appendChild(t);
    div.appendChild(b);
    document.body.appendChild(div);  
    window.listId.push(window.numButton);
    window.numButton++;
}

window.onload = function(){init();};


SOLUCIÓ 2 

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript">

            function crearBotones() {
                //Numero random de botones a crear
                var max = Math.floor((Math.random() * 10) + 1);
                for (var i = 0; i < max; i++) {
                    //Numero random para crear Angel o Demonio
                    var x = Math.floor((Math.random() * 2) + 1);
                    if (x === 1){
                        crearAngel();
                    } else {
                        crearDemonio()
                    }     
                }
            }
            
            function borrarBotones() {
                var max = Math.floor((Math.random() * 5) + 1);
                var content = document.getElementById("content");
                for (var i = 0; i < max; i++) { 
                    //Creamos una array con todos los elementos button.
                    var but = document.getElementsByTagName("button");
                    //Generamos un numero aleatorio entre 1 y el max de botones que hay creados.
                    var del = Math.floor((Math.random() * but.length) + 1) - 1;
                    //Eliminamos el boton.
                    content.removeChild(but[del]); 
                }
            }
            
            function crearAngel(){
                var btn = document.createElement("button");
                var contenido = document.createTextNode("Angel");
                btn.appendChild(contenido);
                btn.addEventListener('click', crearBotones, false);
                document.getElementById("content").appendChild(btn);
            }
            
            function crearDemonio(){
                var btn = document.createElement("button");
                var contenido = document.createTextNode("Demonio");
                btn.appendChild(contenido);
                btn.addEventListener('click', borrarBotones, false);
                document.getElementById("content").appendChild(btn);
            }

        </script>
    </head>
    <body>
 <div id="content">
<button onclick="crearBotones()">Angel</button>
<button onclick="borrarBotones()">Demonio</button>
</div>
    </body>
</html>

solució 3

<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
	<title>Botons Celestials</title>
	<script type="text/javascript">
         window.onload = function() {
		function borra() {
			let n = Math.floor((Math.random() * 20) +1);
			for (let i = 0; i < n; i++) {
					 
                        document.body.removeChild(document.body.lastChild);
				}
			}
		function crea() {
			let n = Math.floor((Math.random() * 10) +1);
			for (let i = 0; i < n; i++) {
			let new_button = document.createElement('button');
			let m = Math.floor((Math.random() * 2) +1);
			var text;
			
                         if (m == 1) {
			    text = document.createTextNode('Angelet');
			    new_button.addEventListener('click', crea);
		         } else {
			    text = document.createTextNode('Diablet');
			     new_button.addEventListener('click', borra);
				 }
			     new_button.appendChild(text);
					
			 document.body.appendChild(new_button);
				}
			}
			
			document.getElementById('ang').addEventListener('click', crea);

			document.getElementById('dem').addEventListener('click', borra);
		}
	</script>
</head>
<body>
	<button id="ang">Angelet</button>
	<button id="dem">Diablet</button>
	<br>

</body>
</html>
Obtingut de «http://wikiserver.infomerce.es/index.php?title=Solucio_botons_celestials&oldid=15134»