PHPの書き方について

Question

前提・実現したいこと

PHPを使って「animation-delay」の値をランダムにしようとしています。
効率の良い書き方はありますでしょうか？

該当のソースコード

<style>
    .item img {
        animation: opacity 1s both;
    }
    @-webkit-keyframes opacity {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
</style>
<div class="box1">
    <div class="item"><img style="animation-delay:0.<?php echo mt_rand(1, 9).'s'?> ;" src="/img/img1.png"></div>
    <div class="item"><img style="animation-delay:0.<?php echo mt_rand(1, 9).'s'?> ;" src="/img/img2.png"></div>
    <div class="item"><img style="animation-delay:0.<?php echo mt_rand(1, 9).'s'?> ;" src="/img/img3.png"></div>
    <div class="item"><img style="animation-delay:0.<?php echo mt_rand(1, 9).'s'?> ;" src="/img/img4.png"></div>
</div>
<div class="box2">
    <div class="item"><img style="animation-delay:0.<?php echo mt_rand(1, 9).'s'?> ;" src="/img/img5.png"></div>
    <div class="item"><img style="animation-delay:0.<?php echo mt_rand(1, 9).'s'?> ;" src="/img/img6.png"></div>
    <div class="item"><img style="animation-delay:0.<?php echo mt_rand(1, 9).'s'?> ;" src="/img/img7.png"></div>
    <div class="item"><img style="animation-delay:0.<?php echo mt_rand(1, 9).'s'?> ;" src="/img/img8.png"></div>
</div>

Answer 1

サーバーサイド限定の処理でなくていいならjsでやるとか

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  [].forEach.call(document.querySelectorAll('.box1 img,.box2 img'),x=>{
    x.style.animationDelay=(parseInt(Math.random()*10)/10).toString()+'s';
  });
});
</script>
<div class="box1">
    <div class="item"><img src="/img/img1.png"></div>
    <div class="item"><img src="/img/img2.png"></div>
    <div class="item"><img src="/img/img3.png"></div>
    <div class="item"><img src="/img/img4.png"></div>
</div>
<div class="box2">
    <div class="item"><img src="/img/img5.png"></div>
    <div class="item"><img src="/img/img6.png"></div>
    <div class="item"><img src="/img/img7.png"></div>
    <div class="item"><img src="/img/img8.png"></div>
</div>

Comments

[kei344]

NodeList は forEach が使えると思いますよ。（少なくともアロー関数が使えるブラウザならほぼ確実だと思います）

【NodeList - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/NodeList#Methods

[yambejp]

たしかにそろそろIEを意識した書き方はやめても良さそうですね

Answer 2

効率が良いかは別としてパッと思いつきで以下のようなコードはいかがでしょうか？

for($i=1;$i<=2;$i++){
  echo '<div class="box'.$i.'">';
  for($j=1;$j<=4;$j++){
    echo '<div class="item"><img style="animation-delay:0.'.mt_rand(1, 9).'s ;" src="/img/img'.4*($i-1)+$j.'.png"></div>';
  }
  echo '</div>';
}

簡易的なテストしかしてないので、問題があったら教えていただけるとありがたいです。

Answer 3

mt_rand()をラッパーして短い関数名にするとかですかね。
ただ、提示内容くらいであればrand()でいい気がします。
いっそ、class="item"を持つdivから作る関数を用意すると全体記述は短くなると思います。