<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
Autor: Juan Pablo Fuentes
Formador de programación y bases de datos
Ejemplos funciones
function masLarga(tabla) {
var res = "";
for (var i = 0; i < tabla.length; i++) {
if (res.length<tabla[i].length){
res=tabla[i];
}
}
return res;
}
function masLargaWhile(tabla) {
var res = "";
var i=0;
while(i<tabla.length){
if (res.length<tabla[i].length){
res=tabla[i];
}
i++;
}
return res;
}
function masLargaSort(tabla){
tabla.sort(function(a,b){return b.length-a.length;});
return tabla[0];
}
function password(longitud){
var caracteres="ABCDEFGGHIJKLMNÑOPQRSTUVWXYZ1234567890;:_-.,!·$%&/()";
var pass="";
for(var i=0;i<longitud;i++){
pass+=caracteres.charAt(aleatorio(0,caracteres.length));
}
return pass;
}
function aleatorio(min,max){
return Math.floor(Math.random()*(max-min))+min;
}
jQuery dinámico
<input type="button" class="btn btn-info" id="nuevo" value="+">
<div id="contenido">
<ul>
<li>1</li>
</ul>
</div>
#contenido{
background-color: lightblue;
min-height: 300px;
display:flex;
}
#contenido ul{
background-color: lightpink;
}
$(function () {
var cont=2;
enlazar();
$('#nuevo').click(function () {
$('#contenido').append("<ul><li>"+(cont++)+"</li></ul>");
enlazar();
dobleclick()
});
function enlazar() {
$('li').off("click");
$('li').click(function () {
$(this).after("<li>"+(cont++)+"</li>");
enlazar();
dobleclick()
});
}
function dobleclick(){
$('li').dblclick(function () {
$(this).remove();
});
}
})
Traversing
<body>
<div>
<h1>hola</h1>
<h2>Ejemplos</h2>
<ul>
<li>uno</li>
<li>dos</li>
<li>tres</li>
</ul>
</div>
<div>
<h1>adios</h1>
<h2>Ejemplos</h2>
<ul>
<li>cuatro</li>
<li>cinco</li>
<li>seis</li>
</ul>
</div>
<div>
<h1>hola</h1>
<h2>Ejemplos</h2>
<ul>
<li>uno</li>
<li>dos</li>
<li>tres</li>
</ul>
</div>
<script>
$(function () {
$('li').click(function () {
//Cambio el color del elemento clicado a rojo
$(this).css("color", "red");
//Cambio el color de los hermanos a azul
$(this).siblings().css("color", "blue");
//Cambiar el color del hermano del padre h1
$(this).parent().siblings("h1").css("color", "green");
//Cambiar el color de los otros li's a gris
$(this).parents("div").siblings().find("li").css("color", "grey");
//Cambiar el color de los otros h1 a negro
$(this).parents("div").siblings().find("h1").css("color", "black");
});
});
</script>
</body>
Tamaño y pelota
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
#contenedor{
background-color: lightblue;
width:500px;
height:600px;
padding:10px;
border:10px solid blue;
position:relative;
}
.elemento{
background-color: red;
border: solid 1px black;
display:inline-block;
box-sizing: border-box;
}
.pelota{
background-color: red;
border: solid 1px black;
position:absolute;
top:0;
left:0;
box-sizing: border-box;
border-radius: 50%;
width:50px;
height:50px;
}
</style>
</head>
<body style="background-color:lightgrey">
<input type="number" id="incremento" value="10">
<input class="btn btn-info boton" type="button" id="cambiar" value="Cambiar">
<input class="btn btn-info boton" type="button" id="pelota" value="Pelota">
<div id="contenedor">
</div>
<script>
$(function () {
var incX=10;
var incY=10;
$('#cambiar').click(function () {
var incremento = Number($('#incremento').val());
$('#contenedor').width($('#contenedor').width() + incremento)
.height($('#contenedor').height() + incremento);
});
$("#contenedor").mouseover(function (e) {
console.log(e);
});
$('#pelota').click(function(){
$("#contenedor").append("<div class='pelota'></div>");
setTimeout(moverPelota,100);
})
function moverPelota(){
$(".pelota").css("top","+="+incY+"px");
$(".pelota").css("left","+="+incX+"px");
var top=parseInt($(".pelota").css("top"));
var left=parseInt($(".pelota").css("left"));
var ancho=$('#contenedor').width()-$(".pelota").outerWidth()/2;
var alto=$('#contenedor').height()-$(".pelota").outerHeight()/2;
if (top>alto || top<0){
incY=-incY;
}
if (left>ancho || left<0){
incX=-incX;
}
setTimeout(moverPelota,100);
}
});
</script>
</body>
</html>
Div dinámicos
<style>
#contenedor{
background-color: lightblue;
width:500px;
height:500px;
padding:10px;
border:10px solid blue;
}
.elemento{
background-color: red;
border: solid 1px black;
display:inline-block;
box-sizing: border-box;
}
</style>
</head>
<body style="background-color:lightgrey">
<input type="number" id="dimensiones" value="500">
<input type="number" id="ancho" value="3">x<input type="number" id="alto" value="3">
<input class="btn btn-info boton" type="button" id="crear" value="Crear">
<div id="contenedor">
</div>
<script>
$(function () {
$('#crear').click(function () {
var dimensiones = Number($('#dimensiones').val());
var ancho = Number($('#ancho').val());
var alto = Number($('#alto').val());
$('#contenedor').width(dimensiones).height(dimensiones);
$('#contenedor').empty();
for (var i = 0; i < ancho * alto; i++) {
$('#contenedor').append('<div class="elemento"> </div>');
}
$('.elemento').outerWidth($('#contenedor').width() / ancho);
$('.elemento').outerHeight($('#contenedor').height() / alto);
});
});
</script>
Cajas dinámicas
<h2>Cajas dinámicas</h2>
<input type="number" class="form-control" id="cajas" min="1" max="10" value="2">
<input class="btn btn-info boton" type="button" id="crear" value="Crear">
<div id="res">
</div>
<input class="btn btn-info boton" type="button" id="sumar" value="Sumar">
$(function () {
$('#crear').click(function () {
var n = Number($('#cajas').val());
$('#res').empty();
for (var i = 0; i < n; i++) {
$('#res').append('<input type="number" id="valor' + i + '" value="1" ><br/>');
// $('#res').append("<input type=\"number\" id=\"valor" + i + "\" value=\"1\" ><br/>");
}
});
$('#sumar').click(function () {
var n = Number($('#cajas').val());
var suma = 0;
for (var i = 0; i < n; i++) {
suma += Number($('#valor' + i).val());
}
$('#res p').remove();
$('#res').append("<p>La suma es: "+suma+"</p>");
});
});
Calculadora jquery 2.0
<div class="container">
<h2>Calculadora <b>poco científica</b></h2>
<input type="text" class="form-control" id="num1" value="4">
<input class="btn btn-info boton" type="button" id="suma" value="+">
<input class="btn btn-info boton" type="button" id="resta" value="-">
<input class="btn btn-info boton" type="button" id="multi" value="*">
<input class="btn btn-info boton" type="button" id="divi" value="/">
<input class="btn btn-info" type="button" id="reset" value="Borrar campos">
<input type="text" class="form-control" id="num2" value="5">
<h3>=</h3>
<input type="text" class="form-control" id="res">
</div>
$(function () {
$(".boton").click(function () {
var n1 = Number($('#num1').val());
var n2 = Number($('#num2').val());
var operacion = $(this).val();
$('#res').val(eval(n1 + operacion + n2));
$('#res').after("<p>"+n1 + " " + operacion + " " +
n2 + " = " + $('#res').val()+"</p>");
});
$("#reset").click(function () {
$(':text').val("");
});
});
Calculadora
<h2>Calculadora</h2>
<input type="text" class="form-control" id="num1" value="4">
<input class="btn btn-info" type="button" id="sumar" value="+">
<input class="btn btn-info" type="button" id="restar" value="-">
<input class="btn btn-info" type="button" id="multiplicar" value="*">
<input class="btn btn-info" type="button" id="dividir" value="/">
<input type="text" class="form-control" id="num2" value="5">
<h3>=</h3>
<input type="text" class="form-control" id="res">
$(function () {
$("#sumar").click(function () {
var n1 = Number($('#num1').val());
var n2 = Number($('#num2').val());
$('#res').val(n1 + n2);
});
$("#restar").click(function () {
var n1 = Number($('#num1').val());
var n2 = Number($('#num2').val());
$('#res').val(n1 - n2);
});
$("#multiplicar").click(function () {
var n1 = Number($('#num1').val());
var n2 = Number($('#num2').val());
$('#res').val(n1 * n2);
});
$("#dividir").click(function () {
var n1 = Number($('#num1').val());
var n2 = Number($('#num2').val());
$('#res').val(n1 / n2);
});
});
Dados con jquery
<h1 >Tirada de dados</h1>
<input type="button" id="botontirar" value="Tirar">
<div id="resultado"></div>
<img id="dado" src="img/dado1.png">
$(function () {
$("#botontirar").click(function () {
var dado = tiradaDado();
$("#resultado").html("Ha salido el " + dado);
$("#dado").attr("src", "img/dado" + dado + ".png");
});
function tiradaDado() {
return Math.floor(Math.random() * 6) + 1;
}
});