SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF - 8">
  <meta name="viewport" content="width=device - width, initial - scale = 1.0">
  <title>表单功能</title>
  <style>
    #运行效果 {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: fit-content;
    }

 .form-row {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 3px;
    }

    label {
      width: 120px;
      text-align: left;  /* 将这里修改为left，实现左对齐 */
      margin-right: 10px;
      padding: 3px 0;  /* 给标签上下增加5px的内边距，视觉上更协调 */
      border: 1px solid #ccc;  /* 添加边框，这里是1px宽的灰色实线边框，你可以按需调整颜色、样式和宽度 */
    }

    input {
      width: 170px;
      padding: 5px;  /* 文本框内部四周增加5px留白，显得不那么局促 */
      margin-right: 10px; /* 给每个input元素添加右边距 */
    }

    button {
      align-self: center; /* 修改这行，让按钮自身在水平方向上居中 */
      margin-top: 5px;
    }
 
  </style>
</head>

<body>
  <div id="运行效果">
    <div class="form-row">
      <label for="location">地名:</label>
      <input type="text" id="location" value="浙江">
      <label for="companyType">公司类型:</label>
      <input type="text" id="companyType" value="互联网公司">
    </div>
    <div class="form-row">
      <label for="companyName">公司名称:</label>
      <input type="text" id="companyName" value="大大大大">
      <label for="bossName">老板姓名:</label>
      <input type="text" id="bossName" value="牛风">
    </div>
    <div class="form-row">
      <label for="money">money:</label>
      <input type="text" id="money" value="一万">
      <label for="product">产品:</label>
      <input type="text" id="product" value="贴膜">
    </div>
    <div class="form-row">
      <label for="priceUnit">价格计算单位:</label>
      <input type="text" id="priceUnit" value="百">
    </div>
    <button onclick="generateText()">生成</button>
  </div>
  <div id="result"></div>

  <script>
    function generateText() {
      var location = document.getElementById('location').value;
      var companyType = document.getElementById('companyType').value;
      var companyName = document.getElementById('companyName').value;  // 修正这行代码
      var bossName = document.getElementById('bossName').value;
      var money = document.getElementById('money').value;
      var product = document.getElementById('product').value;
      var priceUnit = document.getElementById('priceUnit').value;

      var text = location + "最大互联网公司" + companyName + "倒闭了，" + bossName + "老板" + bossName + "吃喝嫖赌，欠下了" + money + "个亿，带着他的小姨子跑了!我们没有办法，拿着" + product + "抵工资!原价都是" + priceUnit + "多、两百多、三百多的" + product + "，现在全部只卖二十块，统统只要二十块!" + bossName + "王八蛋，你不是人!我们辛辛苦苦给你干了大半年，你不发工资，你还我血汗钱，还我血汗钱!";

      document.getElementById('result').innerHTML = text;
    }
  </script>
</body>

</html>