<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 980px;
margin: 0 auto;
}
.box_input {
width: 100%;
height: 100px;
}
.box_input textarea {
width: 100%;
height: 100%;
/* 禁止拖拽 */
resize: none;
padding-left: 20px;
padding-top: 20px;
box-sizing: border-box;
}
.btn {
float: right;
height: 60px;
}
.btn a {
display: inline-block;
width: 80px;
height: 40px;
background-color: skyblue;
text-align: center;
line-height: 40px;
text-decoration: none;
}
.content {
width: 100%;
margin-top: 60px;
}
.item {
width: 100%;
height: 100px;
border-bottom: 1px solid #ccc;
}
.leftBox {
float: left;
}
.leftBox img {
vertical-align: middle;
}
.rightBox {
float: left;
margin-left: 10px;
line-height: 30px;
}
</style>
</head>
<body>
<div class="box">
<div class="box_input">
<textarea maxlength="200"></textarea>
</div>
<div class="btn">
<span class="num">0</span>/<span>200</span>
<a href="javavascript:;">发布</a>
</div>
<!-- 内容区域 -->
<div class="content"></div>
</div>
<script>
//1. 功能1,显示用户输入的文字个数
var textarea = document.querySelector('textarea');
var span_num = document.querySelector('.num');
textarea.oninput = function() {
//获取当前输入的内容
var v = this.value;
// 获取内容长度
var lg = v.length;
// 将长度赋值给span标签
span_num.innerHTML = lg;
}
//2. 功能2,点击发布按钮,动态创建元素
var btn = document.querySelector('a');
var content = document.querySelector('.content');
btn.onclick = function() {
//获取用户输入的内容信息
var text = textarea.value;
//动态创建元素
var div_item = document.createElement('div');
div_item.className = 'item';
//将该元素添加的父元素的开始位置
content.insertBefore(div_item, content.firstElementChild);
// 创建左侧显示图片的div
var div_img = document.createElement('div');
div_img.className = 'leftBox';
div_img.innerHTML = '<img src="img/01.jpg" alt="">';
div_item.appendChild(div_img);
// 创建右侧显示文字的div
var div_text = document.createElement('div');
div_text.className = 'rightBox';
div_text.innerHTML = '<h5>极品女士</h5> <p>2020-11-25 11:47:10</p> <p>'+ text +'</p>';
div_item.appendChild(div_text);
}
</script>
</body>
</html>
js 发布留言案例
最新推荐文章于 2023-11-01 22:28:13 发布