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! </strong>
<span></span>
<span id="diasSemana"> </span>,
<span id="date"></span> de
<span id="month"></span>
<span id="year"></span>
<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
Publicar un comentario