天天看点

JavaScript编写一个简单的辣鸡营销号文章生成页面

营销号文章自动生成是怎么回事呢?营销号文章相信大家都很熟悉,

但是营销号文章自动生成是怎么回事呢?下面就让小编带大家一起了解吧。营销号文章自动生成,其实就是营销号文章自动生成了。那么营销号文章为什么会自动生成,相信大家都很好奇是怎么回事。大家可能会感到很惊讶,营销号文章怎么会自动生成呢?但事实就是这样,小编也感到非常惊讶。那么这就是关于营销号文章自动生成的事情了,大家有没有觉得很神奇呢?看了今天的内容,大家有什么想法呢?欢迎在评论区告诉小编一起讨论哦

其实只要知道了主语谓语就可以利用字符串的拼凑,很快的生成一篇这样的段子,我们今天利用JavaScript代码来实现它

比如【伍兹不行】这个语句,

subj(主语)

就是伍兹,而

verb(谓语)

就是不行,而

text是整个句子

,也就是“伍兹不行“,那么利用字符串的拼接很快能够生成,看如下代码

关键代码:

var outputText = text + "是怎么回事呢?" + 
				 subj + "相信大家都很熟悉, 但是" +
				 text + "是怎么回事呢?下面就让小编带大家一起了解吧。" +
				 text + ",其实就是" + text + "了。那么" +
				 subj + "为什么会" + verb + ",相信大家都很好奇是怎么回事。大家可能会感到很惊讶," +
				 subj + "怎么会" + verb + "呢?但事实就是这样,小编也感到非常惊讶。那么这就是关于" +
				 text + "的事情了,大家有没有觉得很神奇呢?看了今天的内容,大家有什么想法呢?欢迎在评论区告诉小编一起讨论哦";
           

而编写一个页面,我们需要从html的textarea标签中得到输入的主语谓语,然后利用字符串拼接,将处理后的文字显示在文字框内(同样通过修改value属性实现),html页面的实现如下

JavaScript编写一个简单的辣鸡营销号文章生成页面
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<!-- http://localhost:8081/YXHgenerator -->
<link rel="stylesheet" type="text/css" href="sty.css">
<head>
	<title>老营销号了</title>
</head>
<body>
	<h2>小编生成器</h2>
	<div>
		<h3>输入主语</h3>
		<textarea id='input1' class='inp'></textarea>
	</div>
	<div>
		<h3>输入谓语</h3>
		<textarea id='input2' class='inp'></textarea>
	</div>
	<div>
		<button id='button1'>点我生成</button>
	</div>
	<div>
		<textarea id="output1"></textarea>
	</div>
	<script type="text/javascript">
		var chButton = document.getElementById('button1');
		function generate(inputText) {
			var inputArea1 = document.getElementById('input1');
			var inputArea2 = document.getElementById('input2');
			var outputArea = document.getElementById('output1');
			var subj = inputArea1.value;
			var verb = inputArea2.value;
			var text = subj + verb;
			var outputText = text + "是怎么回事呢?" + 
							 subj + "相信大家都很熟悉, 但是" +
							 text + "是怎么回事呢?下面就让小编带大家一起了解吧。" +
							 text + ",其实就是" + text + "了。那么" +
							 subj + "为什么会" + verb + ",相信大家都很好奇是怎么回事。大家可能会感到很惊讶," +
							 subj + "怎么会" + verb + "呢?但事实就是这样,小编也感到非常惊讶。那么这就是关于" +
							 text + "的事情了,大家有没有觉得很神奇呢?看了今天的内容,大家有什么想法呢?欢迎在评论区告诉小编一起讨论哦";
			outputArea.value = outputText;
		}
		chButton.onclick = generate;
	</script>
</body>
</html>
           

通过简单的css样式可以实现居中,css代码如下

textarea {
    display: block;
    width: 40%;
    height: 100px;
    margin: 0 auto;
}

.inp {
    display: block;
    width: 20%;
    height: 50px;
    margin: 0 auto;
}

div {
    margin: 0;
    text-align: center;
}

h2 {
    text-align: center;
}
           

继续阅读