<!-- 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>补全
时间: 2024-02-14 20:04:37 浏览: 81
可以使用 animate 函数来实现消息的动画效果。具体实现步骤如下:
1. 定义一个计数器变量,用于记录消息发送的次数,以便确定消息元素的位置。
2. 在 send 函数中,创建一个新的消息元素,将其添加到消息框中,并计算消息元素的位置。
3. 使用 animate 函数实现消息元素的动画效果。
4. 在动画完成后,将消息元素从消息框中移除,并将计数器加 1。
下面是完整的代码:
```html
<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。
这样,就可以实现每个消息从右边往左边移动的效果了。同时,每次发送消息后,消息框会自动清空,等待下一次输入消息。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)