实现效果:
留言板
源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板</title>
<style> #box{
width: 800px; margin: 50px auto; /*border: 1px solid red;*/ } #box textarea{
width: 100%; height: 300px; font-size: 30px; } li{
list-style: none; height: 40px; line-height: 40px; /*加个下划线*/ border-bottom: 1px solid grey; } </style>
</head>
<body>
<div id="box">
<textarea class="text" name="" id="" cols="30" rows="10"></textarea>
<button class="but">发布</button>
<ul class="list"></ul>
</div>
<script> var oText = document.getElementsByClassName("text")[0]; oBut = document.getElementsByClassName("but")[0]; oList = document.getElementsByClassName("list")[0]; oBut.onclick = function () {
val = oText.value; oText.value = ""; oList.innerHTML += "<li>" + val + "</li>" } </script>
</body>
</html>
👇🏻可通过点击下面——>关注本人运营
公众号👇🏻
【可以公众号里私聊并标明来自CSDN,会拉你进入技术交流群(群内涉及各个领域大佬级人物,任何问题都可讨论~)—>互相学习&&共同进步(非诚勿扰)】
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/8959.html