Calificación:
  • 1 voto(s) - 5 Media
  • 1
  • 2
  • 3
  • 4
  • 5
[Javascript]Probador HTML
#1
"Probador html" es un nombre que se la ha venido dando a esta herrmienta, pero en realidad no lo prueba, realmente ejecuta el codigo que escribamos, eso fue solo una pequeña aclaracion, ahora el codigo. Hare dos tipos de Probadores:

El primero se pondra en una pagina normal, como cualquier otro
El segundo se abrira desde un "Pop-up" sin necesidad de vistar otra pagina.

Primero

Código PHP:
<script>
    function 
interpretar(valor) {
    
interprete window.open('''Interprete de Codigo''');
    
interprete.document.write(valor);
    }
    </
script>
    <
textarea id="contenedor" cols="40" rows="8"></textarea><br>
    <
button onclick="interpretar(document.getElementById('contenedor').value)" >Visualisar</button

´

Este probador es muy muy pero muy utlizado por otras webs, tanto asi que utilizan los mismo nombres de variables.
Quise ser original por eso pondre el Segundo tipo de probador "Pop-up"
Probador en Pop-up

Código PHP:
<style>
    
div#interpretecodigo{
    
z-index:3;
    
opacity:0;
    
display:none;
    
background-colorrgba(1441441440.350);
    
padding:10px;
    
border:1px solid #ccc;
    
width:450px;
    
height:500px;
    
position:absolute;
    
top:23px;left:31%;
    
border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;
    }
    
div#interpretecodigo textarea#contenedor{
    
margin:auto;
    
width:451px;
    
height:400px;
    }
    
div#interpretecodigo input#visualizar{
    
padding:12px;}
    
div#interpretecodigo #cerrar{
    
background-imageurl("http://img.webme.com/pic/a/adan-2994/cerrar.png");
    
background-repeatno-repeat;
    
cursorpointer;
    
height20px;
    
margin-bottom12px;
    
width20px;
    }
    </
style>
    <
script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <
script>$(document).ready(function(){
    $(
'div#interpretecodigo input#visualizar').click(function(){
    var 
pop=window.open('','Interptrete','');
    
pop.document.write($('div#interpretecodigo textarea#contenedor').val());
    });
    $(
'#probadorhtml').click(function(e){e.preventDefault();$('div#interpretecodigo').css("display","block").animate({"opacity":1},500);$('div#interpretecodigo textarea#contenedor').focus()});
    $(
'div#interpretecodigo #cerrar').click(function(){$('div#interpretecodigo').animate({"opacity":0},500,function(){$('div#interpretecodigo').css("display","none")});});
    });</
script>
    <
div id="interpretecodigo"><div id="cerrar"></div>
    <
textarea id="contenedor"></textarea>
    <
p><input type="button" id="visualizar" value="Visualizar"></div

Ahora necesitaras un enlace o boton que al hacer click aparezca el probador, para esto necesitas colocarle el id="probadorhtml"
Código PHP:
<a href="#top" id="probadorhtml">Probador HTML</a


AL FINAL OS QUEDARA ASI:

[Imagen: 034BC11A326PNG.html]
#2
El siguiente codigo permite refrescar una pagina o bien redireccionarla en un intervalo de diempo determinado.

Refrescar: url= Misma url que la pagina que esta siendo visitada

Redireccionar: url= nueva url a la que vamos a redireccionar.

Para el intervalo de tiempo debemos modificar refresh:2 por el valor en segundo que queramos



Código PHP:
<?
header('refresh:2; url=http://google.com');
?>


El Codigo Funciona a La Perfeccion Si No Pudes Pide Soporte
#3
buen post Sonrisa


Moderador en @Socialphy

WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  PRIMER PAGINA WEB HTML DEL MUNDO Smithcanal 18 235 13-08-2017, 08:30 PM
Último mensaje: c42016
  Plantillas HTML Responsive Free Profesionales gassip 16 308 13-06-2017, 03:45 AM
Último mensaje: gassip
Música [Aporte] Reproductor de audio html djsmokingcr 11 259 02-05-2017, 03:04 AM
Último mensaje: gassip
  [Tutorial] Métodos para redireccionar URLs (HTML, PHP y Javascript wiston3 1 127 01-12-2016, 11:12 PM
Último mensaje: zeuz
  Expandir etiquetas HTML en documento .php con EMMET gassip 2 145 18-11-2016, 07:28 PM
Último mensaje: DaveNPlay
  Linux Foundation respalda JavaScript Kiichi 3 138 03-11-2016, 03:43 AM
Último mensaje: habacuc78
  [Aporte] PcTag: Información HTML KesiaMuller 0 127 28-10-2016, 05:42 AM
Último mensaje: KesiaMuller
  [Tutorial] Curso de PSD a HTML a WP habacuc78 14 575 31-08-2016, 09:33 PM
Último mensaje: ServiRemate
  [Aporte] Curso básico de Javascript habacuc78 22 801 05-07-2016, 03:53 PM
Último mensaje: escuelasegura
  Trucos y efectos de Javascript para tu página web CarlosAlberto 0 377 05-01-2016, 03:51 PM
Último mensaje: CarlosAlberto



Usuarios navegando en este tema: 1 invitado(s)