Índice
Atribuciones
Miembro desde
Localización
- Código:
<div class="hpost">Pruebas De Local Storage</div><div class="clear"></div>
<a href="#" id="establecer-nombre-visitante">Introduce Tu Nombre</a>
<a href="#" class="openBox">Cambiar Fondo</a>
<div id="box-overlay"><div id="box-config">
<a href="#" class="closeBox"><img src="http://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/32x32/DeleteRed.png" /></a>
Color de fondo: <input type="color" id="colorFondoEstablecer" maxlength="7" value="#" style="width:100px"><input type="submit" value="Establecer" id="ponerColorFondo">
<br><br>
<!-- Imagen de fondo: <input type="color" id="imagenFondoEstablecer" value="www." style="width:100px"><input type="submit" value="Establecer" id="ponerImagenFondo">
<br><br> -->
<script type="text/javascript">
document.write('Imagen de fondo: <input type="color" id="imagenFondoEstablecer" value="' + localStorage['fondoPaginaImagen'] + '" style="width:100px"><input type="submit" value="Establecer" id="ponerImagenFondo">');
</script>
</div></div>
<br><br>
<a href="#" id="restablecer-fondo">Restablecer Fondo</a><br><br>
<style type="text/css">
#box-overlay { display: none; background: rgba(0, 0, 0, 0.70); width: 100%; height: 100%; position: fixed; top: 0; left: 0;}
#box-config{ position: fixed ; width: 50%; height: 50%; margin: 25%; background: #fff; border: 1px dashed #333; color: #333; padding: 3px; }
.closeBox { position: absolute; right: -3% ; top: -7%; }
</style>
<script>
$('a#establecer-nombre-visitante').click(function() {
var nombre = prompt("Cual es tu nombre","");
localStorage['nombreVisitante'] = nombre;
alert(localStorage['nombreVisitante']);
});
// INICIO DE BOX
$('a.openBox').click(function() {
$('#box-overlay').fadeIn('slow', '');
});
$('a.closeBox').click(function() {
$('#box-overlay').fadeOut('slow', '');
});
// FIN DE BOX
document.write('Hola ' + localStorage['nombreVisitante'] + ' que tal?'); // SALUDA VISITANTE
// TODO ESTO ES PARA LO DE EL COLOR DE FONDO
$("#ponerColorFondo").click(function () {
var fondo = document.getElementById('colorFondoEstablecer').value; // establece el contenido como variable
localStorage['fondoPagina'] = fondo; // convierte la variable a local storgae
location.reload();
});
document.write('<style type="text/css">body { background: ' + localStorage['fondoPagina'] + ' ; } </style>');
// FIN DEL COLOR DE FONDO
// TODO ESTO ES PARA LO DE LA IMAGEN
$("#ponerImagenFondo").click(function () {
var fondo = document.getElementById('imagenFondoEstablecer').value; // establece el contenido como variable
localStorage['fondoPaginaImagen'] = fondo; // convierte la variable a local storgae
location.reload();
});
document.write('<style type="text/css">body { background-image: url(' + localStorage['fondoPaginaImagen'] + ') ; } </style>');
// FIN DE LA IMAGEN
$("a#restablecer-fondo").click(function () { // REESTABLECER
localStorage.removeItem('fondoPagina'); // BORRA COLOR DE FONDO
localStorage.removeItem('fondoPaginaImagen'); // BORRA IMAGEN DE FONDO
location.reload();
});
</script>
Pues esto es lo utlimo que he hecho, para poder cambiar el fondo de una web con LS
