在循环中显示图标的JavaScript代码

Question

我有这个脚本，应该在一个循环中显示这7个图标。我想让它看起来像手机正在充电，但它不起作用。如何将最后一个图标(assets/icons/ic_battery_charging_full_48px.svg)添加到循环中。

$(document).ready(function(){
        var icons = [2,3,5,6,8,9];

        function displayIcons() {
            var i;
            for (i = 0; i < icons.length; i++) {
                show(i);
            }
        }
        function show(i) {

            setTimeout(function() {

                    $('div span').html('<img src="assets/icons/ic_battery_charging_'+ icons[i] + '0_48px.svg">');

            }, 1000 + i * 1000);

        }

            displayIcons();

    });

这些是图标。

<div class="container2">
        <img src="assets/icons/ic_battery_charging_20_48px.svg">
        <img src="assets/icons/ic_battery_charging_30_48px.svg">
        <img src="assets/icons/ic_battery_charging_50_48px.svg">
        <img src="assets/icons/ic_battery_charging_60_48px.svg">
        <img src="assets/icons/ic_battery_charging_80_48px.svg">
        <img src="assets/icons/ic_battery_charging_90_48px.svg">
        <img src="assets/icons/ic_battery_charging_full_48px.svg">
</div>

​

​

Answer 1

只需将最后一个添加到数组中，如下所示

$(document).ready(function () {

    var icons = [20, 30, 50, 60, 80, 90, 'full'];

    function displayIcons() {
        for (var i = 0; i < icons.length; i++) {
            show(i);
        }
    }

    function show(i) {

        setTimeout(function () {

            $('div span').html('<img src="assets/icons/ic_battery_charging_' + icons[i] + '_48px.svg">');

        }, 1000 + i * 1000);

    }

    displayIcons();
});

Answer 2

尝尝这个。在您的情况下，您可以使用setInterval()而不是setTimeout()

var icons = [2,3,5,6,8,9];
var iconsLength = icons.length;
var i=0;
function displayIcons() {
    var myVar = setInterval(function(){
        if(i < iconsLength){
            $('div span').html('<img src="assets/icons/ic_battery_charging_'+ icons[i] + '0_48px.svg">');
            i++;
        }else{
            $('div span').html('<img src="assets/iconsic_battery_charging_full_48px.svg">'); //For your last image which is not in your array list
            clearInterval(myVar);
        }
    }, 1000);
}
displayIcons();

Answer 3

你更有可能想要这样的东西(没有测试)

​

$(document).ready(function(){
  var tId=setInterval(function() {
    var $imgs $(".charging");
    var $active = $(".active");
    if ($active.length==0) $imgs.first().addClass("active").show();
    else {
      if ($active.next().length=0) {
        clearInterval(tId);
      }
      else {
        $active.removeClass("active).hide();
        $next.addClass("active").show();                    
      }                          
    }
  },500);
});

.charging { display:none }

<div class="container2">
        <img class="charging" src="assets/icons/ic_battery_charging_20_48px.svg">
        <img class="charging" src="assets/icons/ic_battery_charging_30_48px.svg">
        <img class="charging" src="assets/icons/ic_battery_charging_50_48px.svg">
        <img class="charging" src="assets/icons/ic_battery_charging_60_48px.svg">
        <img class="charging" src="assets/icons/ic_battery_charging_80_48px.svg">
        <img class="charging" src="assets/icons/ic_battery_charging_90_48px.svg">
        <img class="charging" src="assets/icons/ic_battery_charging_full_48px.svg">
</div>

​