Categoría: 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;
                }
            });

<div class="container">
            <h1>Animación ejemplos</h1>
            <div id="caja1">
            </div>
            <div id="caja2">
            </div>
            <div id="caja3">
            </div>
            
            <input type="button" id="anima1" value="Animación 1 (jquery)">
            <input type="button" id="anima3" value="Animación 3 (jquery+CSS3)">
        </div>
        <script src="js/codigo.js" type="text/javascript"></script>

#caja1,#caja2,#caja3{
    background-color: red;
    height:150px;
    width:150px;
    margin:10px;
}

@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* The element to apply the animation to */
#caja2, .animacion {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

$(function () {
    $("#anima1").click(function () {

        $("#caja1").animate({
            left: '250px',
            opacity: '0.5',
            height: '200px',
            width: '200px'
        });
    });
    $('#anima3').click(function () {
        $("#caja3").addClass("animacion");
    })
});

<div class="container">
            <h1>Página con jquery</h1>
            <p class="parrafo">Hola</p>
            <p class="parrafo">que</p>
            <p class="parrafo">tal</p>
            <div id="contenido">
                <h3>Contenido muy interesante</h3>
                <p>Bla bla blabla bláblala</p>
                <p>Bla bla blabla bláblala</p>
                <p>Bla bla blabla bláblala</p>
            </div>
            <input type="button" id="boton" value="Pinchamé">
        </div>
        <script src="js/codigo.js" type="text/javascript"></script>

$(function () {
    $("h1").after("<p>La página se ha cargado</p>");
    $(".parrafo").after("@@@");
    $('#boton').click(function () {
        $('#contenido').toggle();
    });
    $("#contenido p").on({
        mouseenter: function () {
            $(this).css("background-color", "lightgray");
        },
        mouseleave: function () {
            $(this).css("background-color", "lightblue");
        },
        click: function () {
            $(this).css("background-color", "yellow");
        }
    });

});

tabla.php

if (empty($_GET[‘numero’])) $num=1; else $num=$_GET[‘numero’];

for ($i=1;$i<=10;$i++){
echo “$i x $num=”.($i*$num).”<br/>”;
}

test.html

$(document).ready(function(){ $.get(“tablas.php”,{numero:5}, function(data, status){ console.log(“Datos: ” + data + “\nStatus: ” + status); }); });

 

Nueva versión:

$(document).ready(function(){ $(“#ver”).click(function(){

var num=$(“#numero”).val();

$.get(“tablas.php”,{numero:num}, function(data, status){

$(“#resultado”).html(data);

console.log(“Datos: ” + data + “\nStatus: ” + status); }); }); });