首页 > 其他 > 详细

发布留言

时间:2021-09-07 16:41:01      阅读:5      评论:0      收藏:0      [点我收藏+]


* {
margin: 0;
padding: 0;
}

body {
padding: 100px;
}

textarea {
width: 200px;
height: 100px;
border: 1px solid pink;
outline: none;
resize: none;
}

ul {
margin-top: 50px;
}

li {
width: 300px;
padding: 5px;
background-color: rgb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
}

<body>
<textarea name="" id="text"></textarea>
<button id="btn">发布</button>
<ul>

</ul>
<script>
// 获取文本域元素
var text = document.getElementById(‘text‘)
// 获取发布按钮
var btn = document.getElementById(‘btn‘)
// 获取ul标签
var ul = document.getElementsByTagName(‘ul‘)[0]
// 给发布按钮绑定点击事件
btn.onclick = function () {
// 判断用户输入的内容是否为空 => 获取用户输入的内容
if(text.value == ‘‘){
alert(‘请输入内容再发表 不然头给你打歪‘)
// 停止当前代码往下执行
return false
}
// 创建li标签
var li = document.createElement(‘li‘)
// 添加文本内容
li.innerHTML = text.value
// 将设置好的标签追加到页面的末尾
// ul.appendChild(li)
// 将设置好的标签追加到页面的最前面
ul.insertBefore(li, ul.children[0])
// 清空文本框
text.value = ‘‘
}
</script>


</body>

发布留言

原文:https://www.cnblogs.com/magnum-2077/p/15237581.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!