Trifulcas – Página 168 – Equipo de diseño y programación web

Calendario equipos

 <p>Inicio campeonato:</p>
        <input type="text" id="fecha">
        <ul id="equipos">
            <li>Logroñés</li>
            <li>Alcoyano</li>
            <li>Numancia</li>
            <li>Albacete</li>
            <li>Huelva</li>
            <li>Osasuna</li>
        </ul>
        <input type="button" class="btn btn-success" id="partidos" value="Partidos">
        <input type="button" class="btn btn-success" id="aleatorio" value="Aleatorio">
        <div id="res"></div>
        <script>
            $(function () {

                $.datepicker.regional['es'] = {
                    closeText: 'Cerrar',
                    prevText: '< Ant',
                    nextText: 'Sig >',
                    currentText: 'Hoy',
                    monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                    monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
                    dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
                    dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Juv', 'Vie', 'Sáb'],
                    dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sá'],
                    weekHeader: 'Sm',
                    dateFormat: 'dd/mm/yy',
                    firstDay: 1,
                    isRTL: false,
                    showMonthAfterYear: false,
                    yearSuffix: ''
                };
                $.datepicker.setDefaults($.datepicker.regional['es']);
                $('#fecha').datepicker();
                $('#equipos').sortable();
                $('#partidos').click(function () {
                    var equipos = $('#equipos li');
                    var f = $('#fecha').val().split("/");
                    var fecha = new Date(f[2], f[1] - 1, f[0]);
                    $('#res').empty();
                    for (var i = 0; i < equipos.length; i += 2) {
                        $('#res').append("<p>" + fecha.toLocaleDateString() + " : " + equipos[i].innerText + " - " +
                                equipos[i + 1].innerText + "</p>");
                        fecha.setDate(fecha.getDate() + 1);
                    }
                });
                $('#aleatorio').click(function () {
                    $('#mensaje').dialog();
                    var equipos = $('#equipos li');
                    equipos.sort(function () {
                        return Math.random() - .5
                    });
                    $('#equipos').empty();
                    for (var i = 0; i < equipos.length; i++) {
                        $('#equipos').append(equipos[i]);
                    }
                });


            });
        </script>

Datepicker

 <input type="text" id="fecha">
 $.datepicker.regional['es'] = {
                    closeText: 'Cerrar',
                    prevText: '< Ant',
                    nextText: 'Sig >',
                    currentText: 'Hoy',
                    monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                    monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
                    dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
                    dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Juv', 'Vie', 'Sáb'],
                    dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sá'],
                    weekHeader: 'Sm',
                    dateFormat: 'dd/mm/yy',
                    firstDay: 1,
                    isRTL: false,
                    showMonthAfterYear: false,
                    yearSuffix: ''
                };
                $.datepicker.setDefaults($.datepicker.regional['es']);
                $('#fecha').datepicker();

Catalá:

 $.datepicker.regional['ca'] = {
  closeText: 'Tancar',
  prevText: 'Prv',
        nextText: 'Seg;',
  currentText: 'Avui',
  monthNames:['Gener','Febrer','Març','Abril','Maig','Juny','Juliol','Agost','Setembre','Octubre','Novembre','Desembre'],
  monthNamesShort: ['Gen','Feb','Mar','Abr','Mai','Jun','Jul','Ago','Set','Oct','Nov','Des'],
  dayNames: ['Diumenge','Dilluns','Dimarts','Dimecres','Dijous','Divendres','Dissabte'],
  dayNamesShort: ['Dug','Dln','Dmt','Dmc','Djs','Dvn','Dsb'],
  dayNamesMin: ['Dg','Dl','Dt','Dc','Dj','Dv','Ds'],
  weekHeader: 'Sm',
  dateFormat: 'dd/mm/yy',
  firstDay: 1,
  isRTL: false,
  changeMonth: true,
  changeYear: true,
  showMonthAfterYear: false,
  yearSuffix: ''};
  $.datepicker.setDefaults($.datepicker.regional['ca']);

Cabecera jquery + jquery ui (cdn)

 <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>

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">&nbsp;</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("");
    });
});