微博发布案例

推荐在写动态生成标签数据的时候，提前写一遍html+css的结构，方便提供写照模板

<div class="box">
		<!-- 顶部搜索框 -->
		<div class="inputBox">
			<textarea maxlength="200"></textarea>
		</div>
		<!-- 按钮区域 -->
		<div class="btn">
			<div class="btns">
				<span class="num1">0</span>
				<span class="num2">/200</span>
				<input type="button" value="发布">
			</div>
		</div>
		<!-- 内容区域 -->
		<div class="content">
			<!--<div class="item">
				<div class="leftIMg">
					<img src="img/01.jpg" alt="">
				</div>
				<div class="rightImg">
					<p>阿道夫</p>
					<p>2022-03-15</p>
					<p>不错哦</p>
				</div>
			</div> -->
		</div>
	</div>

	<style>
		* {
			margin: 0;
			padding: 0;
			border: 0 none;
		}
		.box {
			width: 980px;
			margin: 50px auto;
		}

		.inputBox {
			width: 100%;
			height: 80px;
		}

		.inputBox textarea {
			border: 1px solid #ccc;
			outline-style: none;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			resize: none;
			border-radius: 10px;
			padding: 20px;
		}
		.btn {
			overflow: hidden;
		}
		.btns {
			float: right;
			margin: 10px 0;
			height: 40px;
		}

		.btns input {
			width: 240px;
			height: 40px;
			color: #fff;
			background-color: skyblue;
			outline-style: none;
			cursor: pointer;
		}

		.content {
			width: 100%;
		}

		.item {
			width: 100%;
			border-bottom: 1px solid #ccc;
			padding-top: 10px;
			padding-bottom: 10px;
			overflow: hidden;
		}

		.leftIMg {
			float: left;
			width: 100px;
		}

		.leftIMg img {
			width: 100%;
		}

		.rightImg {
			float: left;
			margin-left: 10px;
			line-height: 30px;
		}
	</style>

	<script type="text/javascript">
		
		//1.获取用户输入字数
		var input = document.querySelector('.inputBox textarea');
		var num = document.querySelector('.num1');
		input.oninput = function() {
			num.innerHTML = this.value.length;
		}

		//2.点击发布按钮
		var btn = document.querySelector('.btns input');
		btn.onclick = function() {
			//3. 动态创建div 类名叫item
			var div_1 = document.createElement('div');
				div_1.className = 'item';

			//4. 动态创建左侧图片
			var div2 = document.createElement('div');
			    div2.className = 'leftIMg';
				//将图片的随机获取函数添加到div2中
				div2.innerHTML = '<img src='+getImg()+'>';

			//5. 动态创建右侧内容
			var div3 = document.createElement('div');
				div3.className = 'rightImg';
				//将姓名随机函数、时间函数添加到创建的div3中，并同时加上表单中的value内容
				div3.innerHTML = '<p>'+getName()+'</p><p>'+getTime()+'</p><p>'+input.value+'</p>';
			
			//6. 添加到div_1

			div_1.appendChild(div2);
			div_1.appendChild(div3);

			//7.添加到第一个
			var content = document.querySelector('.content');
			content.insertBefore(div_1, content.firstElementChild);
		}

		//设置两个数组，一个保存姓名，一个保存图片
		var names = ['阿甘', '特朗普', '萌妹子', '屌丝男士', '*女士', '二狗子', '鸡腿子', '肉肉'];

		var imgs = ['img/01.jpg', 'img/02.jpg', 'img/04.jpg', 'img/06.jpg', 'img/09.jpg', 'img/14.jpg', 'img/17.jpg'];
		
		//设置一个随机数字的函数
		function getRandom(n, m) {
			//随机数字的函数结构：
			return Math.floor(Math.random() * (m - n + 1) + n);
		}

		//设置一个图片获取的随机函数
		function getImg() {
			//此处调用随机数的函数，并赋值实参
			return imgs[getRandom(0, imgs.length-1)]; //0到数组的长度减1
		}
		//设置一个姓名获取的随机函数	
		function getName () {
			//此处调用随机数的函数，并赋值实参
			return  names[getRandom(0, names.length-1)];//0到数组的长度减1
		}

		//设置一个时间函数
		function getTime() {
			var d = new Date();
			var y = d.getFullYear();
			var m = d.getMonth() + 1;
				m = m >= 10 ? m : '0' +m;
			var d1 = d.getDate();

				d1 = d1 >= 10? d1 : '0' + d1;

			var h = d.getHours();

				h = h >= 10 ? h : '0' + h;
			var m1 = d.getMinutes();
				m1 = m1 >= 10? m1 : '0' + m1;
			var s1 = d.getSeconds();
			   s1 = s1 >= 10? s1 : '0' + s1;

			return y + '-' + m + '-' + d1 + ' ' + h + ':' + m1 + ':' + s1;
		}
	</script>

实现的效果：