留言板小案例

留言板案例,如图:

                

 

首先新建一个html文件,写好我们需要的内容。

一个文本域,但是这个文本域里面没有内容,然后需要提前给它设置好id以方便后面获取。

一个按钮,这个按钮是很重要的,因为JS部分的内容大部分是写在它的点击事件里的,所有需要提前给它设置好id以方便后面获取。

一个无序列表,这个无序列表里面是没有内容的,但它会在后面起到至关重要的作用,所有需要提前给它设置好id以方便后面获取。

             

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的 JS 留言板案例HTML 代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS 留言板</title> </head> <body> <h1>JS 留言板</h1> <form> <input id="name" type="text" placeholder="姓名" required> <br> <textarea id="message" placeholder="留言" required></textarea> <br> <button type="submit">提交</button> </form> <hr> <ul id="messages"></ul> <script src="main.js"></script> </body> </html> ``` JS 代码: ```js const form = document.querySelector('form'); const nameInput = document.querySelector('#name'); const messageInput = document.querySelector('#message'); const messagesList = document.querySelector('#messages'); let messages = []; form.addEventListener('submit', function(event) { event.preventDefault(); const name = nameInput.value; const message = messageInput.value; const timestamp = Date.now(); const newMessage = { name, message, timestamp }; messages.push(newMessage); displayMessages(); form.reset(); }); function displayMessages() { messagesList.innerHTML = ''; for (const message of messages) { const li = document.createElement('li'); const date = new Date(message.timestamp); const dateString = date.toLocaleString(); li.innerHTML = `<strong>${message.name}:</strong> ${message.message} ${dateString}`; messagesList.appendChild(li); } } ``` 该案例使用了 HTMLCSSJavaScript 技术,实现了一个基本的留言板功能。用户可以输入姓名和留言,并提交到留言板上。留言板会显示所有已提交的留言,包括留言者姓名、留言内容和留言时间。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值