<!-- 4 使用animate完成下午的sendMess.html的消息发送，要求每个div消息从右边往左边移动最后消息 --> <script> function send(){ var mess = document.getElementById('mess').value; var top = 20; var divString = "<div style='position: relative;top:"+top+"px;'"; console.log(divString) document.getElementsByTagName('div')[0].innerHTML = document.getElementsByTagName('div')[0].innerHTML+ divString+">"+mess+"</div>"; console.log(document.getElementsByTagName('div')[0].innerHTML) top = top + 50; } //点击回车发送消息 window.onload = function(){ console.log("test") //给输入框添加keyup/keydown事件 document.getElementById('mess').onkeydown = function(e){ console.log(e.keyCode) console.log(e.target) if(e.keyCode == 13){ //回车 send(); } } } </script>补全

可以使用 animate 函数来实现消息的动画效果。具体实现步骤如下：

1. 定义一个计数器变量，用于记录消息发送的次数，以便确定消息元素的位置。
2. 在 send 函数中，创建一个新的消息元素，将其添加到消息框中，并计算消息元素的位置。
3. 使用 animate 函数实现消息元素的动画效果。
4. 在动画完成后，将消息元素从消息框中移除，并将计数器加 1。

下面是完整的代码：

<div id="message-box"></div>
<input type="text" id="mess" placeholder="请输入消息">
<button onclick="send()">发送</button>

<script>
  let count = 0;
  const messageBox = document.getElementById("message-box");

  function send() {
    const message = document.getElementById("mess").value;
    const newMessage = document.createElement("div");
    newMessage.innerHTML = message;
    newMessage.style.position = "absolute";
    newMessage.style.right = "-100px";
    newMessage.style.top = `${count * 50}px`;
    messageBox.appendChild(newMessage);

    const endX = 0;
    const endY = parseInt(newMessage.style.top);
    const duration = 1000 + count * 500;

    newMessage.animate([
      { transform: `translate(${endX}px, ${endY}px)` }
    ], {
      duration: duration,
      fill: "forwards"
    }).onfinish = () => {
      newMessage.remove();
    };

    document.getElementById("mess").value = "";
    count++;
  }
</script>

在这个代码中，我们定义了一个计数器变量 count，用于记录消息发送的次数。在 send 函数中，我们创建了一个新的消息元素，并将其添加到消息框中。我们计算了消息元素的 top 值，以便将其放置在消息框中正确的位置。然后，使用 animate 函数实现消息元素的动画效果。我们根据计数器变量 count 来调整动画持续时间，以便实现每个消息的动画效果不同。在动画完成后，我们将消息元素从消息框中移除，并将计数器加 1。

这样，就可以实现每个消息从右边往左边移动的效果了。同时，每次发送消息后，消息框会自动清空，等待下一次输入消息。