实现营销号生成器

最新推荐文章于 2022-12-25 21:56:10 发布

符华-

最新推荐文章于 2022-12-25 21:56:10 发布

阅读量1.9k

点赞数 2

文章标签： html jquery javascript

本文链接：https://blog.csdn.net/weixin_43165220/article/details/106075297

版权

营销号生成器的原理其实很简单，写个营销号文案模板，然后把主体、事件、另一种说法给拼接到模板上得到最终结果并显示出来就可以了。
代码：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>营销号生成器</title>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <style>
	*{
		margin: 0 auto;
	}
	body{
		background-color: #343a40;
	}
	.container{
		position: relative;
		top: 50px;
		bottom:100px;
	}
	h1{
		color: #007bff;
		font-size: 45px;
		font-family: Kaiti;
		text-align: center;
	}
	.modal-dialog{
		max-width: 100% !important;
	}
	.modal-content{
		background:rgba(0,0,0,0.3);
		width: 700px;
	}
	.loginForm{
		width: 600px;
		text-align: center;
	}
	label{
		color:#fff;
		font-size:22px;
		font-family: Kaiti;
	}
	.loginForm .form-group{
		margin: 30px 0;
	}
	.loginForm .form-group .form-control{
		height: 40px;
		font-size: 15px;
		width:400px;
		padding-left:10px;
		border-radius: 8px;
	}
	.btn-primary{
		background-color: #3e4963; 
		border: 0px solid transparent;
		width: 550px;
		height: 50px;
		font-size: 24px;
		font-family: STKaiti;
	}
	textarea{
		margin-bottom:30px;
		width: 540px;
		height: 200px;
		font-size:18px;
	}
  </style>
 </head>
 <body>
	<div class="container">
		<div class="modal-dialog" id="login_form">
			<div class="modal-content">
				<div class="modal-title">
					 <h1 style="text-align: center;font-family: STKaiti;font-weight: bold;">营销号生成器</h1>
				</div>
				<div class="modal-body index-news-list" id="index-news-list-1">
					<form action="javascript:void(0);" class="loginForm" id="">
						  <div class="form-group">
							  <label>主&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;体：</label>
							  <input class="form-control required" id="subject" type="text" placeholder="营销号" required>
						  </div>
						  <div class="form-group">
							  <label>事&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;件：</label>
							  <input class="form-control required" id="event" type="text" placeholder="自动生成" required>
						  </div>
						  <div class="form-group">
							<div class="form-group">
								<label>另一种说法：</label>
								<input class="form-control required" id="another" type="text" placeholder="营销号文案自动生成器" required>
							</div>
						  </div>
						  <div class="form-group">
							  <button class="btn btn-primary" type="submit" onclick="submitForm()">生成</button>
						  </div>
					 </form>
				</div>
				
				<div class="modal-body index-news-list loginForm" id="index-news-list-1">
					<textarea id="result"></textarea>
				</div>
				
			</div>
			<div id="bdtts_div_id">
				<audio id="tts_autio_id" autoplay="autoplay"></audio>
			</div>
		</div>
	</div>

	<script> 
		function submitForm(){
			subject = $("#subject").val();	//主体
			event = $("#event").val();		//事件
			another = $("#another").val();	//另一种说法
			if(subject.length==0 || event.length==0 || another.length==0){
				return;
			}
			//最终结果
			result = '　　小伙伴们，大家好呀，今天小编来跟大家聊聊'+subject+event+'。说起'+subject+'相信大家都很熟悉，'+subject+'是我们经常都会遇到的，但是'+subject+event+'是怎么回事呢，下面就让小编带大家一起了解吧。\r\n　　'+subject+event+'其实就是'+another+'，大家可能会非常惊讶，'+subject+'怎么会'+event+'呢？但事实就是这样，小编也感到非常惊讶。\r\n　　好了，以上就是关于'+subject+event+'的事情了，不知道大家有什么想法呢，欢迎在评论区留言，和小编一起讨论哟~'
			//显示最终结果
			document.getElementById("result").value = result;
			
			var ttsDiv = document.getElementById('bdtts_div_id');
            var ttsAudio = document.getElementById('tts_autio_id');
			//实现语音播报
			ttsDiv.removeChild(ttsAudio);
            var au1 = '<audio id="tts_autio_id" autoplay="autoplay">';
            //调用百度语音接口，朗读最终结果
            var sss = '<source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&pre=0&spd=7&text='+result+'" type="audio/mpeg">';
            var eee = '<embed id="tts_embed_id" height="0" width="0" src="">';
            var au2 = '</audio>';
            ttsDiv.innerHTML = au1 + sss + eee + au2;
            ttsAudio = document.getElementById('tts_autio_id');
            ttsAudio.play();
		}
	</script>
 </body>
</html>

效果：
在这里插入图片描述

符华-

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
实现营销号生成器

营销号生成器的原理其实很简单，写个营销号文案模板，然后把主体、事件、另一种说法给拼接到模板上得到最终结果并显示出来就可以了。代码：<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>营销号生成器</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"&
复制链接

扫一扫