JavaScript.












// IF ELSE

const color = 'yellow';

if(color === 'red'){

  console.log('Color is red');

} else if(color === 'blue'){

  console.log('Color is blue');

} else {

  console.log('Color is not red or blue');

}


---------------------------------------------------------------------------------


 // LOGICAL OPERATORS

const name = 'Steve';

const age = 70;


// AND &&

if(age > 0 && age < 12){

  console.log(`${name} is a child`);

} else if(age >= 13 && age <= 19){

  console.log(`${name} is a teenager`);

} else {

  console.log(`${name} is an adult`);

}

// OR ||

if(age < 16 || age > 65){

  console.log(`${name} can not run in race`);

} else {

  console.log(`${name} is registered for the race`);

}

---------------------------------------------------------------------------------
 
// CASE

const color = 'yellow';


switch(color){

  case 'red':

    console.log('Color is red');

    break;

  case 'blue':

    console.log('Color is blue');

    break;

  default:

    console.log('Color is not red or blue');

    break;

}

---------------------------------------------------------------------------------
 
// // Change styling
 const taskTitle = document.getElementById('task-title');

// // Change styling
taskTitle.style.background = '#333';
taskTitle.style.color = '#fff';
taskTitle.style.padding = '5px';
// taskTitle.style.display = 'none';

// // Change content
taskTitle.textContent = 'Task List';
taskTitle.innerText = 'My Tasks';

 
[ Nota: Debes encontrar primero en nombre de la clase en este ejemplo se llama 'task-title' y posteriormente podras modificar todo ]


 ---------------------------------------------------------------------------------

/// Colores

//Crear una variable o constante

const Bitwise1 = document.getElementById('page-top'); // Afecta toda la Hoja (el nombre tiene que llamarse igual en este caso el id="page-top")
const Bitwise = document.querySelector('.navbar'); // Afecta solo una class (solo afecta a la class="navbar" )

// Mousemove se crea el evento

Bitwise1.addEventListener('mousemove', runEvent);
Bitwise.addEventListener('mousemove', runEvent);

// Event Handler
function runEvent(e) {
document.body.style.backgroundColor = `rgb(${e.offsetX}, ${e.offsetY}, 120)`;
}



 ---------------------------------------------------------------------------------



//// Alerta Bootstrap y Js
// CSS

<style type="text/css">
    .alert {
       width:30%;  
    }
    .Coloralert {
       background:#DEEAF6;  
    }
     </style>

//.aspx
  
     <div class="container">
   <hr>
    <div class="row justify-content-end">
        <div class="col-4">
        </div>
        <div class="col-4 alert Coloralert alert ">
            <strong >ยกBienvenido! &nbsp;</strong>   
                  
            <span></span>
                <span id="diasSemana"> </span>,
                <span id="date"></span>  de
                <span id="month"></span>
                <span id="year"></span> &nbsp;&nbsp;
                <span id="hora"></span>:
                <span id="minutos"></span>
        </div>
    </div>
</div>
  
//JS  
    <script>
        var f=new Date();
        var meses = new Array ("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
        var diasSemana = new Array("Domingo","Lunes","Martes","Miรฉrcoles","Jueves","Viernes","Sรกbado");

        $('#year').text( f.getFullYear() );
        $('#date').text(f.getDate());
        $('#month').text( meses[f.getMonth()]);
        $('#diasSemana').text(diasSemana[f.getDay()]);
        $('#hora').text(f.getHours());
        $('#minutos').text(f.getMinutes());

 window.setTimeout(function() {
 $(".alert").fadeTo(500, 0).slideUp(500, function(){
 $(this).remove();
 });
}, 2000);
 
        </script> 


 ---------------------------------------------------------------------------------






Ejemplo



   ---------------------------------------------------------------------------------










Ejemplo

   ---------------------------------------------------------------------------------




Comentarios

Entradas populares de este blog