miércoles, 16 de septiembre de 2020

Párrafo con colores random

Con este código queremos tener un 50% de probabilidades de interaccionar con el párrafo. Si la suerte determina que no podemos interactuar con el párrafo al pasar el cursor por encima se nos cambiará a una señal de prohibido. En caso contrario al pasar el cursor encima cambiará para hacer click y al actuar cambiará el color del texto a un valor hexadecimal aleatorio.

El código en GitHub: https://github.com/magnitopic/edujs/tree/master/jQueryColorRandom

Mira el codigo ejecutandose en relp.it: https://repl.it/@valoro/ParrafoColorRandom#index.html

index.html
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <meta charset="UTF-8">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <title>Document</title>  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  
 </head>  
 <body>  
   <p>Lo importante es no dejar de hacer preguntas.</p>  
   <script src="script.js"></script>  
 </body>  
 </html>  

script.js
 $(function(){  
   'use strict'  
   function aleatorio(){  
     return Math.random();  
   }   
   if( aleatorio()<= 0.5){  
     $('p').hover(function(){  
       $("p").css("cursor", "not-allowed");  
     })  
   }else{  
     $('p').hover(function(){  
       $("p").css("cursor", "pointer");  
     })  
     $('p').click(function(){  
       $("p").css("color", '#'+(0x1000000+(aleatorio())*0xffffff).toString(16).substr(1,6));  
     })  
   }  
 });  

No hay comentarios:

Publicar un comentario