完整代码在最后，先看成果（填入信息点击按钮生成文本）：
1.首先先把界面部分大致搞出来，我用到的是一些 span,button,input,textarea。如果css布局不太清楚可以参考css布局_无忧#的博客-CSDN博客,在此不在赘述。界面（无内容交互）代码如下：
<style type="text/css">
span{
display: inline-block;
border: 1px solid coral;
width: 150px;
margin-bottom:5px ;
}
#t{
width: 645px;
height: 120px;
border: 1px, solid burlywood;
}
</style>
<body>
<span id="s1">地区名：</span><input type="text" id="i1" value="中国" />
<span id="s2">公司类型：</span><input type="text" id="i2" value="手机公司" />
<br />
<span id="s3">公司名称：</span><input type="text" id="i3" value="大米" />
<span id="s4">老板姓名：</span><input type="text" id="i4" value="雪浑" />
<br />
<span id="s5">欠款金额：</span><input type="text" id="i5" value="100万" />
<span id="s6">产品:</span><input type="text" id="i6" value="智能老年手机" />
<br />
<span id="s7">价格单位</span><input type="text" id="i7" value="千元" />
<button id="b" >点击生成</button>
<br />
<textarea id="t"></textarea>
</body>2.内容交互部分：本例中用到的是从文本框中获取值并且组合输入到textarea中,为了实现这两个功能我们使用两个函数（function）和按钮事件监听来实现，函数1（get(id)，返回该id的值），函数2（hanshu（）用来将函数1获取来的值进行组合形成文本，并把组合后的文本作为textarea的值）。我们编辑完内容后需要点击按钮生成，所以我们函数的调用就应该是按钮点击后。
function get(id){
var idvalue=document.getElementById(id).value;
return idvalue;
}function hanshu(){
var dm=get("i1");
var gslx=get("i2");
var gsmc=get("i3");
var lbmc=get("i4");
var qkje=get("i5");
var cp=get("i6");
var jgdw=get("i7");
var wenben=dm +"最大"+gslx+gsmc+"倒闭了，王八蛋老板"+lbmc+"吃喝嫖赌，欠下了"+qkje+"个亿，"
+ "带着他的小姨子跑了!我们没有办法，拿着"+cp+"抵工资!原价都是一"+jgdw+"多、两"+jgdw+"多、三"+jgdw+"多的"+cp+"，"
+ "现在全部只卖二十块，统统只要二十块!"+lbmc+"王八蛋，你不是人!我们辛辛苦苦给你干了大半年，"
+ "你不发工资，你还我血汗钱，还我血汗钱!";
document.getElementById("t").value=wenben;
}<button id="b" onclick="hanshu()" >点击生成</button>为了方便学习参考，完整代码附上：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>练习</title>
</head>
<style type="text/css">
span{
display: inline-block;
border: 1px solid coral;
width: 150px;
margin-bottom:5px ;
}
#t{
width: 645px;
height: 120px;
border: 1px, solid burlywood;
}
</style>
<script type="text/javascript">
function get(id){
var idvalue=document.getElementById(id).value;
return idvalue;
}
function hanshu(){
var dm=get("i1");
var gslx=get("i2");
var gsmc=get("i3");
var lbmc=get("i4");
var qkje=get("i5");
var cp=get("i6");
var jgdw=get("i7");
var wenben=dm +"最大"+gslx+gsmc+"倒闭了，王八蛋老板"+lbmc+"吃喝嫖赌，欠下了"+qkje+"个亿，"
+ "带着他的小姨子跑了!我们没有办法，拿着"+cp+"抵工资!原价都是一"+jgdw+"多、两"+jgdw+"多、三"+jgdw+"多的"+cp+"，"
+ "现在全部只卖二十块，统统只要二十块!"+lbmc+"王八蛋，你不是人!我们辛辛苦苦给你干了大半年，"
+ "你不发工资，你还我血汗钱，还我血汗钱!";
document.getElementById("t").value=wenben;
}
</script>
<body>
<span id="s1">地区名：</span><input type="text" id="i1" value="中国" />
<span id="s2">公司类型：</span><input type="text" id="i2" value="手机公司" />
<br />
<span id="s3">公司名称：</span><input type="text" id="i3" value="大米" />
<span id="s4">老板姓名：</span><input type="text" id="i4" value="雪浑" />
<br />
<span id="s5">欠款金额：</span><input type="text" id="i5" value="100万" />
<span id="s6">产品:</span><input type="text" id="i6" value="智能老年手机" />
<br />
<span id="s7">价格单位</span><input type="text" id="i7" value="千元" />
<button id="b" onclick="hanshu()" >点击生成</button>
<br />
<textarea id="t"></textarea>
</body>
</html>