javascript - 在 For 循环中创建数组而不运行数组

Question

我正在尝试做一个大学元素。 我应该创建“注释”，将它们添加到数组中并将它们保存在我的本地存储中。 现在应该使用 CSS3 创建具有淡入淡出效果(过渡)的注释。 一切都很完美，直到我创建第二个音符，此时我的整个数组再次运行，这使得所有音符都淡入淡出。

CSS:

.note_input {
    height:255px;
    width:200px;
    background-image:url('../img/notebg.png');
    padding-top:25px;
    padding-left:10px;
    display:inline-block;
    animation: fadein 0.3s; 
    -webkit-animation: fadein 0.3s;
}
    @keyframes fadein {
        from {
            opacity:0;
        }
        to {
            opacity:1;
        }
    }
    @-webkit-keyframes fadein { 
        from {
            opacity:0;
        }
        to {
            opacity:1;
        }
    }

这是我创建数组 + Note 本身的 JS:

function AddNote (){
    var input = document.getElementById("txt").value;
    var date = d.getDate() + " " + months[d.getMonth()] + " " + d.getFullYear();
    var time = d.getHours() + ":" + d.getMinutes();
    var n = new NoteCrt(input,time,date);
    notes.push(n);
    Note();
}
function Note(){
    var note_d = "<div>";
    for (var i = 0 ; i < notes.length ; i++) {
        note_d += "<span id='fade' class='note_input'>" + "<div class='flow' ><p>"+notes[i].input+"</p></div></br>" + "</br>" +"Time:  "+ notes[i].time + "</br>" +"Date:  "+ notes[i].date;
        note_d +=  "</span>";
    }
    note_d += "</div>";
    document.getElementById("note_div").innerHTML = note_d;
    notes_j = JSON.stringify(notes, null, " ");
    localStorage.setItem("NOTE",notes_j);
    notes_p = JSON.parse(notes_j);
    console.log(notes_p);
}

发生的情况是，所有存在的音符每次都会以淡入淡出的效果重新创建...... 有什么帮助吗？

Answer 1

没有真正需要将此功能拆分为多个功能。

您所需要做的就是创建新注释并将其附加到 DOM，而不是每次都重新创建所有 HTML。

function AddNote (){
    var input = document.getElementById("txt").value;
    var date = d.getDate() + " " + months[d.getMonth()] + " " + d.getFullYear();
    var time = d.getHours() + ":" + d.getMinutes();
    var n = new NoteCrt(input,time,date);
    notes.push(n);

    // store
    notes_j = JSON.stringify(notes, null, " ");
    localStorage.setItem("NOTE",notes_j);
    notes_p = JSON.parse(notes_j);
    console.log(notes_p);

    // show
    for (var i = 0 ; i < notes.length ; i++) {
       var new_note = document.createElement("span");
       new_note.id="fade"; new_note.class="note_input";
       new_note.innerHTML += "<div class='flow' ><p>"+notes[i].input+"</p></div></br>" + "</br>" +"Time:  "+ notes[i].time + "</br>" +"Date:  "+ notes[i].date;
    }
    document.getElementById("note_div").appendChild(new_note);
}