Categoría: Sin categoría

Ejemplo de cabecera

<head>
 <title>TODO supply a title</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <!--Bootstrap (incluye jquery)
 -->
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

 <!-- jquery UI (incluye js y tema)
 -->
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

 <!-- mis estilos y mi js
 -->
 <link href="estilos.css" rel="stylesheet" type="text/css"/>
 <script src="codigo.js" type="text/javascript"></script>

 </head>

Juego Ovni

 

$(function () {
 $('#comenzar').click(function(){
 $('#ufo').remove();
 ponOvni();
 });
 function ponOvni() {
 var tipo = Math.round(Math.random() * 2) + 1;
 $('#tablero').append('<img src="ufo' + tipo + '.png" id="ufo">');
 animaOvni();
 $('#ufo').click(function () {
 $('#ufo').stop(true);
 $(this).remove();
 if (confirm("Me has cazado\n¿Otra partida?")) {
 ponOvni();
 }
 });
 $('#ufo').mouseover(function () {
 $('#ufo').css('background-color', 'red');
 });
 $('#ufo').mouseout(function () {
 $('#ufo').css('background-color', '');
 });

 }
 function animaOvni() {
 var y = Math.round(Math.random() * 600);
 var x = 0;
 $('#ufo').css('top', y + "px");
 for (var i = 0; i < 6; i++) {
 y = Math.round(Math.random() * 600);
 x += 200;
 console.log($('#velocidad').val());
 $('#ufo').animate({top: y + "px", left: x + "px"}, parseInt($('#velocidad').val()));
 }
 $('#ufo').animate({top: y + "px", left: (x + 100) + "px"},
 function () {
 if (confirm("Has perdido\n¿Otra partida?")) {
 $('#ufo').remove();
 ponOvni();
 }
 });
 }
});

codigo
 index 
estilos 
 ufo2 ufo1 space

Cookies usuario y fecha

<!DOCTYPE html>
<html>
 <head>
 <title>TODO supply a title</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <script>
 var cookies = {};

 function leerCookies() {
 var c = document.cookie;
 c = c.split(";");
 for (var i = 0; i < c.length; i++) {
 var t = c[i].split("=");
 cookies[t[0].trim()] = t[1];
 }
 }
 function checkCookies() {
 leerCookies();
 if (cookies.usuario != undefined) {
 document.getElementById("usuario").value = cookies.usuario;
 }
 if (cookies.fecha != undefined) {
 document.getElementById("acceso").innerHTML = "Último acceso: " + cookies.fecha;
 }
 }
 function guardar() {
 var c = document.getElementById("usuario").value;
 var f = new Date().toLocaleString();
 document.cookie = "usuario=" + c + "; expires=tue, 09 february 2016 9:40:00 UTC;path=/";
 document.cookie = "fecha=" + f + "; expires=tue, 09 february 2016 9:40:00 UTC;path=/";
 }
 </script>
 </head>
 <body onload="checkCookies()">
 <form action="index.html" method="POST">
 <input type="text" id="usuario">
 <input type="password" name="pass">
 <input type="submit" onclick="guardar()">
 <div id="acceso"></div>

 </form>
 </body>
</html>

Ejemplo cronómetro

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
 <head>
 <title>TODO supply a title</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <script>
 var contador=0;
 var crono;
 function empezar(){
 clearInterval(crono);
 crono=setInterval(cronometro,10);
 document.getElementById("pausar").style.display="";
 document.getElementById("empezar").style.display="none";
 }
 function parar(){
 clearInterval(crono);
 document.getElementById("pausar").style.display="none";
 document.getElementById("empezar").style.display="";
 document.getElementById("empezar").value="Reanudar";
 }
 function cronometro(){
 contador++;
 document.getElementById("cronometro").innerHTML=contador/100;
 }
 
 </script>
 </head>
 <body>
 <h1 id="cronometro">Pulsa para empezar</h1>
 <input type="button" id="empezar" value="Empezar" onclick="empezar()">
 <input type="button" id="pausar" value="Pausar" style="display:none" onclick="parar()">
 
 </body>
</html>

Algunos ejercicios de programación

Función que le pasemos tres números y nos diga el mayor
Función que devuelva la suma de los cuadrados
Función que nos devuelva el número de apariciones de un caracter en una cadena. Ejemplo:
contarCaracteres(“Hola que tal”,”a”)–> 2
Calcular el factorial de un número: factorial(5)=5*4*3*2*1 = 120
Triángulo de asteríscos triangulo(5)->
*
**
***
****
*****
Función que nos devuelva el número de apariciones de un caracter en un array de cadenas. Ejemplo:
var lista=[“hola”,”que”,”tal”]
contarCaracteresArray(lista,”a”)–> 2

Función que nos diga si una cadena es un palíndromo (capicua)

palindromo(“anna”)->true

(Para nota: que no tenga en cuenta espacios: palindromo(‘isaac no ronca asi’)->true)

Función que convierta las ‘a’ en ‘4’ y las ‘e’ en ‘3’

conversion((‘hola que tal’)->’hol4 qu3 t4l’

Función que simule el lanzamiento de un dado:

dado()->valores aleatorios entre 1 y 6

Función que genere una contraseña aleatoria de 6 caracteres:

password()->’A44erS’