Mostrar un container con un layout vertical con 2 textos y un pictograma y 2 botones y otros 2 botones's game

Click here for free DL of the app version that can save data.

No:32109

726

←

Prev Next

→

Mostrar un container con un layout vertical con 2 ..ALL
Developer User15149｜Date and time 23/12/30 2:39:56
Build time 12.395 sec｜Game capacity 6.801KB｜

Script

Toca 'Crear publicación' para crear tu primera publicación.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
<title>Facebook</title>
  <style>
    .container {
      display: flex;
    }

.horizontal-layout {
      display: none;
      flex-direction: row;
      position: relative;
      top: 10px;
    }
    
    .horizontal-layout2 {
      display: none;
      flex-direction: row;
      position: relative;
      top: 20px;
    }

.layout-center {
      display: none;
    }

.scroller {
      overflow-y: scroll;
      height: 500px;
    }

.button {
      width: 200px;
      height: 30px;
    }
</style>
<body>
<div class="container">
<div class="layout-center" id="center">
    <p id="text">Toca 'Crear publicación' para crear tu primera publicación.</p>
</div>
  <div class="scroller" id="scroll"></div>
    <div class="horizontal-layout" id="layout1">
      <button class="button" onclick="createPublic()">Crear publicación</button>
      <button class="button" onclick="select()">Seleccionar</button>
    </div>
    <div class="horizontal-layout" id="layout2">
      <button class="button" onclick="cancel()">Cancelar</button>
      <button class="button" id="deleteButton" onclick="eliminar()">Eliminar (0)</button>
    </div>
</div>
<script>

var c = 0;
 var n = 0;
 var scr = document.getElementById( "scroll" );
 var lay1 = document.getElementById( "layout1" );
 var lay2 = document.getElementById( "layout2" );
 var deleteBut = document.getElementById( "deleteButton" );
 var user = prompt( "¿Cómo te llamas?" );
 var mylogo = prompt( "Tu logo es este", "emozi_apple.png" );
 
 start();

function start()
 {
   for( var i=1; i<=5; i++ )
   {
     public( "HisashiApp", "emozi-hamuster.png", "Esto es un ejemplo de una publicación de Facebook.", "pictograma.png" );
   }
 }

function public( user, logo, pub, pic )
 {
   var date = new Date();
   var day = date.getDate();
   var month = date.getMonth();
   var year = date.getFullYear();
   var hour = date.getHours();
   var min = date.getMinutes();
   var seg = date.getSeconds();

var months = ["ene", "feb", "mar", "abr", "may", "jun", "jul", "ago", "sep", "oct", "nov", "dic"];

var time = day+" "+months[month]+". "+year+" "+(hour<9?"0"+hour:hour)+":"+(min<9?"0"+min:min)+":"+(seg<9?"0"+seg:seg);

var vert = document.createElement( "div" );
   vert.className = "publication";
   vert.style.marginBottom = "30px";
   scr.appendChild( vert );

var hor = document.createElement( "div" );
   hor.style.display = "flex";
   hor.style.flexDirection = "row";
   vert.appendChild( hor );

var loggo = document.createElement( "img" );
   loggo.src = logo;
   loggo.style.width = "80px";
   loggo.style.height = "80px";
   hor.appendChild( loggo );

var vert2 = document.createElement( "div" );
   vert2.style.display = "flex";
   vert2.style.flexDirection = "column";
   vert2.style.position = "relative";
   vert2.style.left = "5px";
   vert2.style.top = "5px";
   hor.appendChild( vert2 );
  
   var text = document.createElement( "h1" );
   text.align = "left";
   text.innerHTML = user;
   text.style.fontSize = "18px";
   vert2.appendChild( text );

var text2 = document.createElement( "p" );
   text2.align = "left"
   text2.innerHTML = time;
   text2.style.fontSize = "14px";
   text2.style.position = "relative";
   text2.style.bottom = "20px";
   vert2.appendChild( text2 );

var checkbox = document.createElement( "input" );
   checkbox.className = "checkbox";
   checkbox.type = "checkbox";
   checkbox.style.display = "none";
   checkbox.style.position = "relative";
   checkbox.style.left = "120px";
   checkbox.style.bottom = "10px";
   checkbox.addEventListener( "click", count );
   hor.appendChild( checkbox );

var contPub = document.createElement( "p" );
   contPub.align = "left";
   contPub.innerHTML = pub;
   vert.appendChild( contPub );

var picto = document.createElement( "img" );
   picto.src = pic;
   vert.appendChild( picto );

var hor2 = document.createElement( "div" );
   hor2.style.display = "flex";
   hor2.style.flexDirection = "row";
   hor2.style.position = "relative";
   hor2.style.top = "10px";
   vert.appendChild( hor2 );

var btn1 = document.createElement( "button" );
   btn1.innerHTML = "Enviar mensaje";
   btn1.style.width = "200px";
   btn1.style.height = "30px";
   hor2.appendChild( btn1 );

var btn2 = document.createElement( "button" );
   btn2.className = "button2";
   btn2.innerHTML = "Borrar publicación";
   btn2.style.width = "200px";
   btn2.style.height = "30px";
   btn2.addEventListener( "click", function()
   {
     vert.remove();
     n--;
     if( n == 0 ) show_text();
   });
   hor2.appendChild( btn2 );

var lay1 = document.getElementById( "layout1" );
   lay1.style.display = "flex";

n++;

if( n > 0 ) hide_text();
 }

function createPublic()
 {
   var mypub = prompt( "Ingrese algo en la publicación" );
   var mypic = prompt( "Ingrese el nombre del pictograma que quieres añadir, Por ejemplo: pictograma.png" );
   public( user, mylogo, mypub, mypic );
 }

function select()
 {
   var layouts = document.getElementsByClassName( "publication" );

for( i=0; i<layouts.length; i++ )
   {
     var checkbox = layouts[i].getElementsByClassName( "checkbox" )[0];
   
     checkbox.style.display = "flex";
   }

lay1.style.display = "none";
   lay2.style.display = "flex";
 }

function cancel()
 {
   var layouts = document.getElementsByClassName( "publication" );

for( i=0; i<layouts.length; i++ )
   {
     var checkbox = layouts[i].getElementsByClassName( "checkbox" )[0];
     checkbox.style.display = "none";
     checkbox.checked = false;
   }

lay1.style.display = "flex";
   lay2.style.display = "none";
 
   c = 0;
   deleteBut.innerHTML = "Eliminar (0)";
 }

function count()
 {
   if( this.checked ) c++;
   else c--;
  
   deleteBut.innerHTML = "Eliminar ("+c+")";
 }

function eliminar()
 {
   var text = "¿Estás seguro que quieres eliminar "+c+" publicaci"+(c==1?"ón":"ones")+"?";
   alert( text );

var layouts = document.getElementsByClassName( "publication" );

for( i=0; i<layouts.length; i++ )
   {
     var checkbox = layouts[i].getElementsByClassName( "checkbox" )[0];

if( checkbox.checked )
     { 
       layouts[i].remove();

n--;
     }
   }

cancel();

if( n == 0 ) show_text();
 }

function show_text()
 {
   var lay = document.getElementById( "center" );
   lay.style.display = "flex";
 }

function hide_text()
 {
   var lay = document.getElementById( "center" );
   lay.style.display = "none";
 }

</script>
</body>
</head>
</html>