当前位置：首页 > news >正文

“打造个性化留言板：从页面搭建到功能实现“

news 2024/10/22 15:43:38

🙉专栏推荐:Java入门知识🙉

🐹今日诗词:红叶晚萧萧，长亭酒一瓢🐹

⛳️点赞 ☀️收藏⭐️关注💬卑微小博主🙏

预期效果

1. 页面搭建

2. 将内容显示到页面

3. 所有代码

美图分享

预期效果

1. 页面搭建

页面搭建很简单, 代码如下

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>留言板</title><style>.container {width: 350px;height: 300px;margin: 0 auto;/* border: 1px black solid; */text-align: center;}.grey {color: grey;}.container .row {width: 350px;height: 40px;display: flex;justify-content: space-between;align-items: center;}.container .row input {width: 260px;height: 30px;}#submit {width: 350px;height: 40px;background-color: orange;color: white;border: none;margin: 10px;border-radius: 5px;font-size: 20px;}</style>
</head><body><div class="container"><h1>留言板</h1><p class="grey">输入后点击提交, 会将信息显示下方空白处</p><div class="row"><span>谁:</span> <input type="text" name="" id="from"></div><div class="row"><span>对谁:</span> <input type="text" name="" id="to"></div><div class="row"><span>说什么:</span> <input type="text" name="" id="say"></div><input type="button" value="提交" id="submit" onclick="submit()"></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>function submit(){}</script>
</body></html>

2. 将内容显示到页面

首先要获取到用户输入的信息

 function submit(){let from = $("#from").val();let to = $("#to").val();let say = $("#say").val();let message = "<div>" + from + "对" + to + "说" + say + "</div>";$(".container").append(message);$("#from").val("");$("#to").val("");$("#say").val("");}

3. 所有代码

温馨提示: 如果复制所有代码到自己的电脑上运行失败

原因只有一个: 就是引入的JQuery库有问题, 这个跟你当前网络环境有关, 可以尝试将JQuery库下载到本地再引入

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>留言板</title><style>.container {width: 350px;height: 300px;margin: 0 auto;/* border: 1px black solid; */text-align: center;}.grey {color: grey;}.container .row {width: 350px;height: 40px;display: flex;justify-content: space-between;align-items: center;}.container .row input {width: 260px;height: 30px;}#submit {width: 350px;height: 40px;background-color: orange;color: white;border: none;margin: 10px;border-radius: 5px;font-size: 20px;}</style>
</head><body><div class="container"><h1>留言板</h1><p class="grey">输入后点击提交, 会将信息显示下方空白处</p><div class="row"><span>谁:</span> <input type="text" name="" id="from"></div><div class="row"><span>对谁:</span> <input type="text" name="" id="to"></div><div class="row"><span>说什么:</span> <input type="text" name="" id="say"></div><input type="button" value="提交" id="submit" onclick="submit()"></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><script>function submit(){let from = $("#from").val();let to = $("#to").val();let say = $("#say").val();if(from == "" || to == "" || say == "") {return;}let message = "<div>" + from + "对" + to + "说" + say + "</div>";$(".container").append(message);$("#from").val("");$("#to").val("");$("#say").val("");}</script>
</body></html>