<div class="contenedor">
  <input type="button" class="boton" id="btn_fondo" value="Cambiar Fondo" onclick="cambiarFondo()"/><input type="button" class="boton" id="btn_html" value="Cambiar HTML" onclick="cambiarHtml()"/><input type="button" class="boton" id="btn_mostrar" value="Ocultar Capa" onclick="ocultarMostrar()"/>
  <div id="caja1" style="opacity: 1;"><i>Lorem Ipsum</i></div>
</div>

body {
  margin:0;
}
a {
  color:#ff3;
}
.contenedor {
  font-family:Arial, Helvetica, San-serif;
  float:left;
  color:#666666;
  padding:10px;
  width:96%;
  margin:1%;
  height:auto;
}
#caja1 {
  color:white;
  background:orange;
  height:270px;  
  padding:10px;
  text-align:center;
  display:block;
  opacity:1;
}
.boton {
  width:32.6%;
  margin:1% 1% 1% 0;
  background:#212222;
  color:#fff;
  border:none;
  padding:7px;
  font:normal 16px Arial ;
  border-radius:3px;
  box-shadow:2px 2px 5px -3px #000;
}
.boton:hover {
  background:#4477CC;
  box-shadow:0px 0px 5px -2px #000;
  cursor:pointer;
}
.boton_off,.boton_off:hover  {
  box-shadow:none;
  cursor:default;
  background:#bababa;
  color:lightgray;
}
input + input + input {
  margin-right:0px !important;
}

function cambiarFondo(){
  //variable que almacena un numero aleatorio de 6 cifras
  var x = Math.floor((Math.random() * 999998) + 1);
  //cambiamos el color de fondo del elemento #caja1 por un valor hexadecimal
  document.getElementById("caja1").style.backgroundColor = "#"+x;
}

function cambiarHtml(){
  //variable que almacena el contenido html del elemento #caja1
  var x = document.getElementById("caja1").innerHTML;
  //si x es igual a esto...
  if(x == "<i>Lorem Ipsum</i>"){
    //cambia el contenido por el siguiente
    document.getElementById("caja1").innerHTML = "<a href=&quot;#&quot;>Enlace</a>";
  } else {
    // si no, cambialo por esto...
    document.getElementById("caja1").innerHTML = "<i>Lorem Ipsum</i>";
  }
}

function ocultarMostrar(){
  //variable para el valor de la propiedad opacity del elemento #caja1
  var x = document.getElementById("caja1").style.opacity;
  //si la variable es igual a 1...
  if(x == "1"){
    //cambiamos la propiedad opacity del elemento #caja1 a 0
    document.getElementById("caja1").style.opacity = "0";
    //cambiamos la propiedad value del boton 
    document.getElementById("btn_mostrar").value = "Mostrar Capa";
    //añadimos la clase .btn_off a los otros botones para apagarlos
    document.getElementById("btn_html").className = "boton boton_off";
    document.getElementById("btn_fondo").className = "boton boton_off";
  // si no, todo lo contrario...
  } else {
    document.getElementById("caja1").style.opacity = "1";
    document.getElementById("btn_mostrar").value = "Ocultar Capa";
    document.getElementById("btn_html").className = "boton";
    document.getElementById("btn_fondo").className = "boton";
  }
}