Question

我正在尝试做一个大学项目。我应该创建'Notes'将它们添加到一个数组中并将它们保存在我的本地存储中。现在应该使用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;
        }
    }

这是我创建Array + 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);
}

Answer 2

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);

  var notes = JSON.parse(localStorage.getItem("NOTE")) || [];
  notes.push(n);
  console.log(notes);
  localStorage.setItem("NOTE", JSON.stringify(notes, null, " "));

  var node_div = document.getElementById("note_div");
  var el = document.createElement('span');

  el.id = "fade";
  el.classList.add('note_input');
  el.innerHTML =
    "<div class='flow'>" +
      "<p>" + n.input + "</p>" +
    "</div>" +
    "</br>" +
    "</br>" +
    "Time:  " + n.time +
    "</br>" +
    "Date:  " + n.date;
  node_div.appendChild(el);
}

您应该注意，您似乎正在为多个范围分配ID fade。如果是这种情况，你应该考虑把它变成一个类。

在For循环中创建一个数组而不运行数组

2 个答案: