Echo in dem Rang

habe ich eine Leaderboard mit Codes unter:Echo in dem Rang

/*-------------------- 
 
Body 
 
--------------------*/ 
 
*, 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    min-height: 450px; 
 
    height: 100vh; 
 
    margin: 0; 
 
    background: radial-gradient(ellipse farthest-corner at center top, #f39264 0%, #f2606f 100%); 
 
    color: #fff; 
 
    font-family: 'Open Sans', sans-serif; 
 
} 
 

 

 
/*-------------------- 
 
Leaderboard 
 
--------------------*/ 
 
.leaderboard { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    width: 285px; 
 
    height: 308px; 
 
    background: linear-gradient(to bottom, #3a404d, #181c26); 
 
    border-radius: 10px; 
 
    box-shadow: 0 7px 30px rgba(62, 9, 11, .3); 
 

 
    h1 { 
 
    font-size: 18px; 
 
    color: #e1e1e1; 
 
    padding: 12px 13px 18px; 
 

 
    & svg { 
 
     width: 25px; 
 
     height: 26px; 
 
     position: relative; 
 
     top: 3px; 
 
     margin-right: 6px; 
 
     vertical-align: baseline; 
 
    } 
 

 
    } 
 

 
    ol { 
 
    counter-reset: leaderboard; 
 

 
    li { 
 
     position: relative; 
 
     z-index: 1; 
 
     font-size: 14px; 
 
     counter-increment: leaderboard; 
 
     padding: 18px 10px 18px 50px; 
 
     cursor: pointer; 
 
     backface-visibility: hidden; 
 
     transform: translateZ(0) scale(1.0, 1.0); 
 

 

 
     &::before { 
 
     content: counter(leaderboard); 
 
     position: absolute; 
 
     z-index: 2; 
 
     top: 15px; 
 
     left: 15px; 
 
     width: 20px; 
 
     height: 20px; 
 
     line-height: 20px; 
 
     color: #c24448; 
 
     background: #fff; 
 
     border-radius: 20px; 
 
     text-align: center; 
 
     } 
 

 
     mark { 
 
     position: absolute; 
 
     z-index: 2; 
 
     top: 0; 
 
     left: 0; 
 
     width: 100%; 
 
     height: 100%; 
 
     padding: 18px 10px 18px 50px; 
 
     margin: 0; 
 
     background: none; 
 
     color: #fff; 
 

 
     &::before, &::after { 
 
      content: ''; 
 
      position: absolute; 
 
      z-index: 1; 
 
      bottom: -11px; 
 
      left: -9px; 
 
      border-top: 10px solid #c24448; 
 
      border-left: 10px solid transparent; 
 
      transition: all .1s ease-in-out; 
 
      opacity: 0; 
 
     } 
 

 
     &::after { 
 
      left: auto; 
 
      right: -9px; 
 
      border-left: none; 
 
      border-right: 10px solid transparent; 
 
     } 
 
     } 
 

 
     small { 
 
     position: relative; 
 
     z-index: 2; 
 
     display: block; 
 
     text-align: right; 
 
     } 
 

 
     &::after { 
 
     content: ''; 
 
     position: absolute; 
 
     z-index: 1; 
 
     top: 0; 
 
     left: 0; 
 
     width: 100%; 
 
     height: 100%; 
 
     background: #fa6855; 
 
     box-shadow: 0 3px 0 rgba(0, 0, 0, .08); 
 
     // transform: scaleX(1.06) scaleY(1.03); 
 
     transition: all .3s ease-in-out; 
 
     opacity: 0; 
 
     } 
 

 
     &:nth-child(1) { 
 
     background: #fa6855; 
 
     &::after { 
 
      background: #fa6855; 
 
     } 
 
     } 
 

 
     &:nth-child(2) { 
 
     background: #e0574f; 
 
     &::after { 
 
      background: #e0574f; 
 
      box-shadow: 0 2px 0 rgba(0, 0, 0, .08); 
 
     } 
 

 
     & mark { 
 
      &::before, &::after { 
 
      border-top: 6px solid #ba4741; 
 
      bottom: -7px; 
 
      } 
 
     } 
 
     } 
 

 
     &:nth-child(3) { 
 
     background: #d7514d; 
 
     &::after { 
 
      background: #d7514d; 
 
      box-shadow: 0 1px 0 rgba(0, 0, 0, .11); 
 
     } 
 

 
     & mark { 
 
      &::before, &::after { 
 
      border-top: 2px solid #b0433f; 
 
      bottom: -3px; 
 
      } 
 
     } 
 
     } 
 

 
     &:nth-child(4) { 
 
     background: #cd4b4b; 
 
     &::after { 
 
      background: #cd4b4b; 
 
      box-shadow: 0 -1px 0 rgba(0, 0, 0, .15); 
 
     } 
 

 
     & mark { 
 
      &::before, &::after { 
 
      top: -7px; 
 
      bottom: auto; 
 
      border-top: none; 
 
      border-bottom: 6px solid #a63d3d;; 
 
      } 
 
     } 
 
     } 
 

 
     &:nth-child(5) { 
 
     background: #c24448; 
 
     border-radius: 0 0 10px 10px; 
 
     &::after { 
 
      background: #c24448; 
 
      box-shadow: 0 -2.5px 0 rgba(0, 0, 0, .12); 
 
      border-radius: 0 0 10px 10px; 
 
     } 
 

 
     & mark { 
 
      &::before, &::after { 
 
      top: -9px; 
 
      bottom: auto; 
 
      border-top: none; 
 
      border-bottom: 8px solid #993639; 
 
      } 
 
     } 
 
     } 
 

 
    } 
 

 
    // hover 
 
    li:hover { 
 
     z-index: 2; 
 
     overflow: visible; 
 

 
     &::after { 
 
     opacity: 1; 
 
     transform: scaleX(1.06) scaleY(1.03); 
 
     } 
 

 
     & mark { 
 
     &::before, &::after { 
 
      opacity: 1; 
 
      transition: all .35s ease-in-out; 
 
     } 
 
     } 
 
    } 
 

 
    } 
 
} 
 

 
* { 
 
    //display: none; 
 
}

<div class="leaderboard"> 
 
    <h1> 
 
    <svg class="ico-cup"> 
 
     <use xlink:href="#cup"></use> 
 
    </svg> 
 
    Most active Players 
 
    </h1> 
 
    <ol> 
 
    <li> 
 
     <mark>Jerry Wood</mark> 
 
     <small>315</small> 
 
    </li> 
 
    <li> 
 
     <mark>Brandon Barnes</mark> 
 
     <small>301</small> 
 
    </li> 
 
    <li> 
 
     <mark>Raymond Knight</mark> 
 
     <small>292</small> 
 
    </li> 
 
    <li> 
 
     <mark>Trevor McCormick</mark> 
 
     <small>245</small> 
 
    </li> 
 
    <li> 
 
     <mark>Andrew Fox</mark> 
 
     <small>203</small> 
 
    </li> 
 
    </ol> 
 
</div> 
 

 

 
<svg style="display: none;"> 
 
    <symbol id="cup" x="0px" y="0px" 
 
\t width="25px" height="26px" viewBox="0 0 25 26" enable-background="new 0 0 25 26" xml:space="preserve"> 
 
<path fill="#F26856" d="M21.215,1.428c-0.744,0-1.438,0.213-2.024,0.579V0.865c0-0.478-0.394-0.865-0.88-0.865H6.69 
 
\t C6.204,0,5.81,0.387,5.81,0.865v1.142C5.224,1.641,4.53,1.428,3.785,1.428C1.698,1.428,0,3.097,0,5.148 
 
\t C0,7.2,1.698,8.869,3.785,8.869h1.453c0.315,0,0.572,0.252,0.572,0.562c0,0.311-0.257,0.563-0.572,0.563 
 
\t c-0.486,0-0.88,0.388-0.88,0.865c0,0.478,0.395,0.865,0.88,0.865c0.421,0,0.816-0.111,1.158-0.303 
 
\t c0.318,0.865,0.761,1.647,1.318,2.31c0.686,0.814,1.515,1.425,2.433,1.808c-0.04,0.487-0.154,1.349-0.481,2.191 
 
\t c-0.591,1.519-1.564,2.257-2.975,2.257H5.238c-0.486,0-0.88,0.388-0.88,0.865v4.283c0,0.478,0.395,0.865,0.88,0.865h14.525 
 
\t c0.485,0,0.88-0.388,0.88-0.865v-4.283c0-0.478-0.395-0.865-0.88-0.865h-1.452c-1.411,0-2.385-0.738-2.975-2.257 
 
\t c-0.328-0.843-0.441-1.704-0.482-2.191c0.918-0.383,1.748-0.993,2.434-1.808c0.557-0.663,1-1.445,1.318-2.31 
 
\t c0.342,0.192,0.736,0.303,1.157,0.303c0.486,0,0.88-0.387,0.88-0.865c0-0.478-0.394-0.865-0.88-0.865 
 
\t c-0.315,0-0.572-0.252-0.572-0.563c0-0.31,0.257-0.562,0.572-0.562h1.452C23.303,8.869,25,7.2,25,5.148 
 
\t C25,3.097,23.303,1.428,21.215,1.428z M5.238,7.138H3.785c-1.116,0-2.024-0.893-2.024-1.99c0-1.097,0.908-1.99,2.024-1.99 
 
\t c1.117,0,2.025,0.893,2.025,1.99v2.06C5.627,7.163,5.435,7.138,5.238,7.138z M18.883,21.717v2.553H6.118v-2.553H18.883 
 
\t L18.883,21.717z M13.673,18.301c0.248,0.65,0.566,1.214,0.947,1.686h-4.24c0.381-0.472,0.699-1.035,0.947-1.686 
 
\t c0.33-0.865,0.479-1.723,0.545-2.327c0.207,0.021,0.416,0.033,0.627,0.033c0.211,0,0.42-0.013,0.627-0.033 
 
\t C13.195,16.578,13.344,17.436,13.673,18.301z M12.5,14.276c-2.856,0-4.93-2.638-4.93-6.273V1.73h9.859v6.273 
 
\t C17.43,11.638,15.357,14.276,12.5,14.276z M21.215,7.138h-1.452c-0.197,0-0.39,0.024-0.572,0.07v-2.06 
 
\t c0-1.097,0.908-1.99,2.024-1.99c1.117,0,2.025,0.893,2.025,1.99C23.241,6.246,22.333,7.138,21.215,7.138z"/> 
 
     </symbol> 
 
</svg>

ich die PHP geschrieben und durch eine Abfrage abgerufen die Top 10 Performer.

Ich habe das Abfrageergebnis in eine Variable geholt. Jetzt möchte ich die Variable der Top 10 in der oben genannten Rangliste Echo.

In der html ist es eine geordnete Liste. Wo genau die Variable speichern soll, die top10 speichert.

Was zu ändern in der HTML, wenn überhaupt?

Bitte helfen.

Quelle

2016-10-19 Shivam Sharma

Sie wollen einfach nur, um sie von PHP-Variablen Echo? –

ja, echo nur die Variable, die das Top10 Ergebnis enthält –

Sie haben durch das Ergebnis, so etwas wiederholen:

<ol> 
<?php foreach ($leaderboard as $key => $value) {?> 
<li> 
    <mark><?php echo $value['name']?></mark> 
    <small><?php echo $value['score']?></small> 
</li> 
<?php }?> 
</ol>

dies ist nur ein Beispiel. Ich kenne die Struktur Ihrer Daten nicht. Wenn Sie uns die von der Abfrage zurückgegebenen Daten bereitstellen, wird es besser.

Andere Varianten, die nur ein einfaches Echo in dem HTML-Code (wenig hässlich, aber in Betrieb) werden mit werden erreicht sein:

<?php 
$leaderboardHtml = ''; 
foreach ($leaderboard as $key => $value) { 
    $leaderboardHtml .= ' 
    <li> 
     <mark>'.$value['name'].'</mark> 
     <small>'.$value['score'].'</small> 
    </li>'; 
} 
?> 

<ol> 
<?php echo $leaderboardHtml;?> 
</ol>

Quelle

2016-10-19 09:09:47 krasipenkov

Ich habe eine Variable holen Top10 Darsteller und ich möchte nur, dass nur echo.echo echo, sollte mir das Ergebnis in der Seite.Ich möchte nicht separat für separate Mitglieder Echo wie du sagst: –

Du musst foreach (oder eine andere Schleife) benutzen oder du wirst eine sehr lange Echo-Anweisung schreiben müssen. Glauben Sie mir, dieser von krasipenkov gezeigte ist gut. –

Echo in dem Rang

Antwort

Verwandte Themen