barcode.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>批量生成条码</title>
  <script src="JsBarcode.all.min.js"></script>
  <style>
    /* 设置整个页面占满浏览器高度和宽度 */
    body, html {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    /* 容器样式 */
    .container {
        display: flex;
        height: 96%;
    }

    /* 输入列样式 */
    .input-column {
        /* 设置宽度为屏幕宽度的百分比 */
        flex: 1;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        /* 方便与条码列对齐 */
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

    /* 条码输入框样式 */
    #barcode-input {
        /* 输入框占据整个列的高度 */
        flex: 1;
        /* 禁止输入框大小可调整 */
        resize: none;
    }

    /* 生成按钮样式 */
    button {
        width: 100%;
        color: white;
        background-color: grey;
        border: none;
        padding: 10px;
        cursor: pointer;
        margin-top: 10px;
    }

    /* 条码列样式 */
    .barcode-column {
        /* 设置宽度占据浏览器的一半 */
        flex: 8;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: flex-start;
        /* 设置高度占据浏览器的100%，与输入列对齐 */
        height: 100%;
        overflow: auto;
    }

    /* 条码样式 */
    .barcode {
        /* 设置三列等分 */
        width: calc(25% - 20px);
        margin-bottom: 30px;
    }

    /* 底部样式 */
    footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 3%;
        background-color: #f5f5f5;
        padding: 10px;
        text-align: center;
        border-top: 1px solid #ddd;
        color: black;
    }

    footer a {
        color: black;
    }

  </style>
</head>
<body>
<div class="container">
    <div class="input-column">
      <!-- 条码输入框 -->
      <textarea id="barcode-input" placeholder="在这里输入条码内容"></textarea>
      <!-- 生成按钮 -->
      <button onclick="generateBarcodes()">生成条码</button>
    </div>
    <div class="barcode-column" id="barcode-container"></div>
  </div>
  <!-- 底部信息 -->
  <footer>
    山归山 | <a href="https://snote.cn/">https://snote.cn/</a> . All rights reserved.
  </footer>

  <script>
function generateBarcodes() {
    // 获取输入框文字并按行切割成数组
    var inputText = document.getElementById("barcode-input").value;
    var barcodes = inputText.split("\n");
    var container = document.getElementById("barcode-container");
    container.innerHTML = "";

    // 遍历条码数组生成条码
    for (var i = 0; i < barcodes.length; i++) {
        // 去除首尾空白字符
        var barcode = barcodes[i].trim();

        // 忽略空行和包含中文的行
        if (barcode !== "" && !/[\u4E00-\u9FA5]/.test(barcode)) {
            var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
            svg.classList.add("barcode");
            container.appendChild(svg);
            // 使用JsBarcode库生成条码
            JsBarcode(svg, barcode, { width: 2, height: 80 });
        }
    }
}
  </script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

<!DOCTYPE html>

<html>

<head>

<title>批量生成条码</title>

<style>

/* 设置整个页面占满浏览器高度和宽度 */

body, html {

height: 100%;

margin: 0;

padding: 0;

}

/* 容器样式 */

.container {

display: flex;

height: 96%;

}

/* 输入列样式 */

.input-column {

/* 设置宽度为屏幕宽度的百分比 */

flex: 1;

padding: 20px;

box-sizing: border-box;

display: flex;

flex-direction: column;

/* 方便与条码列对齐 */

height: 100%;

width: 100%;

overflow: hidden;

}

/* 条码输入框样式 */

#barcode-input {

/* 输入框占据整个列的高度 */

flex: 1;

/* 禁止输入框大小可调整 */

resize: none;

}

/* 生成按钮样式 */

button {

width: 100%;

color: white;

background-color: grey;

border: none;

padding: 10px;

cursor: pointer;

margin-top: 10px;

}

/* 条码列样式 */

.barcode-column {

/* 设置宽度占据浏览器的一半 */

flex: 8;

padding: 20px;

box-sizing: border-box;

display: flex;

flex-direction: row;

flex-wrap: wrap;

justify-content: space-between;

align-content: flex-start;

/* 设置高度占据浏览器的100%，与输入列对齐 */

height: 100%;

overflow: auto;

}

/* 条码样式 */

.barcode {

/* 设置三列等分 */

width: calc(25% - 20px);

margin-bottom: 30px;

}

/* 底部样式 */

footer {

position: fixed;

left: 0;

bottom: 0;

width: 100%;

height: 3%;

background-color: #f5f5f5;

padding: 10px;

text-align: center;

border-top: 1px solid #ddd;

color: black;

}

footer a {

color: black;

}

</style>

</head>

<body>

</div>

</div>

</footer>

function generateBarcodes() {

// 获取输入框文字并按行切割成数组

var inputText = document.getElementById("barcode-input").value;

var barcodes = inputText.split("\n");

var container = document.getElementById("barcode-container");

container.innerHTML = "";

// 遍历条码数组生成条码

for (var i = 0; i < barcodes.length; i++) {

// 去除首尾空白字符

var barcode = barcodes[i].trim();

// 忽略空行和包含中文的行

if (barcode !== "" && !/[\u4E00-\u9FA5]/.test(barcode)) {

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

svg.classList.add("barcode");

container.appendChild(svg);

// 使用JsBarcode库生成条码

JsBarcode(svg, barcode, { width: 2, height: 80 });

}

</script>

</body>

</html>

<!DOCTYPE html> <!--声明文档类型为HTML-->
<html lang="en"> <!--指定页面语言为英文-->
<head>
  <meta charset="UTF-8"> <!--设置字符编码为UTF-8，支持中文等特殊字符-->
  <title>批量生成条码</title> <!--设置页面标题-->
  <script src="JsBarcode.all.min.js"></script> <!--引入条码生成的JavaScript库-->
  <style>
    /* 设置整个页面占满浏览器高度和宽度 */
    body, html {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    /* 容器样式 */
    .container {
      display: flex;
      height: 96%; /* 整个页面高度的96% */
    }

    /* 输入列样式 */
    .input-column {
      width: 300px; /* 设置输入列宽度为300px */
      padding: 20px;
      box-sizing: border-box; /* 包含内边距和边框在内的总宽度。*/
      display: flex;
      flex-direction: column;
      height: 100%; /* 输入列占据整个高度 */
      overflow: hidden;
      margin: 0 auto; /* 水平居中 */
    }

    /* 公共按钮样式 */
    button {
      cursor: pointer; /* 鼠标指针变为手型 */
      padding: 10px;
    }

    /* 条码输入框样式 */
    #barcode-input {
      flex: 1; /* 占据剩余空间 */
      resize: none; /* 禁止调整输入框大小 */
      width: 100%; /* 宽度100% */
    }

    /* 生成按钮样式 */
    .generate-button {
      width: 100%; /* 与输入框宽度一致 */
      color: white;
      background-color: grey;
      border: none;
      margin-top: 10px;
    }

    /* 条码列样式 */
    .barcode-column {
      flex: 8; /* 占据剩余空间 */
      padding: 20px;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap; /* 换行显示 */
      justify-content: space-between; /* 行内元素均匀分布在行里 */
      align-content: flex-start; /* 从上方开始对齐 */
      height: 100%; /* 高度100% */
      overflow: auto; /* 溢出显示滚动条 */
    }

    /* 条码样式 */
    .barcode {
      width: calc(33.33% - 20px); /* 计算每个条码的宽度，以便三栏布局 */
      margin-bottom: 30px;
    }

    /* 底部样式 */
    footer {
      position: fixed; /* 固定在底部 */
      left: 0;
      bottom: 0;
      width: 100%;
      height: 3%;
      background-color: #f5f5f5; /* 背景颜色 */
      padding: 10px;
      text-align: center; /* 文本居中 */
      border-top: 1px solid #ddd; /* 上边框 */
      color: black;
    }

    footer a {
      color: black;
    }

    /* 调整列数选择按钮样式 */
    .column-buttons {
      display: flex;
      justify-content: space-around; /* 子元素水平居中 */
      margin-top: 10px;
    }

    .column-buttons button {
      flex: 1; 
      cursor: pointer; /* 鼠标指针变为手型 */
      background-color: #f2f2f2; /* 背景颜色 */
    }

    .column-buttons button:hover {
      background-color: #d9d9d9; /* 鼠标悬停时的颜色 */
    }

  </style>
</head>
<body>
  <div class="container"> <!-- 主体内容容器 -->
    <div class="input-column"> <!-- 输入列 -->
      <textarea id="barcode-input" placeholder="在这里输入条码内容"></textarea> <!-- 输入框，提示有关条码内容的输入 -->
      <div class="column-buttons"> <!-- 列数选择按钮容器 -->
        <button onclick="setColumnCount(1)">1列</button>
        <button onclick="setColumnCount(2)">2列</button>
        <button onclick="setColumnCount(3)">3列</button>
        <button onclick="setColumnCount(4)">4列</button>
        <button onclick="setColumnCount(5)">5列</button>
      </div>
      <div id="column-select" style="display: none;"></div> <!-- 用于存储选择的列数信息，初始隐藏 -->
      <button class="generate-button" onclick="generateBarcodes()">生成条码</button> <!-- 生成条码按钮 -->
    </div>
    <div class="barcode-column" id="barcode-container"></div> <!-- 条码列容器 -->
  </div>
  <footer> <!-- 底部 -->
    山归山 | <a href="https://snote.cn/">https://snote.cn/</a> . All rights reserved.
  </footer>

  <script>
    function generateBarcodes() { // 定义生成条码的方法
      var inputText = document.getElementById("barcode-input").value; // 获取输入框的值
      var barcodes = inputText.split("\n"); // 根据换行符分割成多个条码
      var columnCount = parseInt(document.getElementById("column-select").getAttribute('data-column-count')); // 获取选中的列数
      var container = document.getElementById("barcode-container"); // 获取条码容器
      container.style.flex = columnCount; // 设置条码容器的布局方式

      var barcodeWidth = 100 / columnCount - 2.5; // 计算每个条码的宽度
      var barcodeStyle = ".barcode { width: calc(" + barcodeWidth + "% - 20px); margin-bottom: 30px; }"; // 根据列数动态计算每个条码的样式
      var styleElement = document.createElement("style"); // 创建style标签
      styleElement.appendChild(document.createTextNode(barcodeStyle)); // 添加计算后的样式
      document.head.appendChild(styleElement); // 将样式标签添加到head中

      container.innerHTML = ""; // 清空条码容器
      for (var i = 0; i < barcodes.length; i++) { // 遍历每个条码
        var barcode = barcodes[i].trim(); // 去除两端空格
        if (barcode !== "" && !/[\u4E00-\u9FA5]/.test(barcode)) { // 判断条码是否为空或者含有中文字符
          var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); // 创建<svg>元素
          svg.classList.add("barcode"); // 添加样式类
          container.appendChild(svg); // 将<svg>添加到条码容器中
          JsBarcode(svg, barcode, { width: 2, height: 80 }); // 使用JsBarcode库生成条码
        }
      }
    }

    function setColumnCount(count) {
      document.getElementById("column-select").setAttribute('data-column-count', count); // 设置选中的列数
      var buttons = document.getElementsByClassName("column-buttons")[0].getElementsByTagName("button"); // 获取列数选择按钮
      for (var i = 0; i < buttons.length; i++) { // 循环按钮
        if (i + 1 == count) { // 如果当前按钮对应的列数等于选中的列数
          buttons[i].style.backgroundColor = "#666666"; // 设置背景颜色为灰色
        } else {
          buttons[i].style.backgroundColor = "#f2f2f2"; // 否则设置为默认颜色
        }
      }
    }
  </script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

<!DOCTYPE html>

<head>

<title>批量生成条码</title>

<style>

/* 设置整个页面占满浏览器高度和宽度 */

body, html {

height: 100%;

margin: 0;

padding: 0;

}

/* 容器样式 */

.container {

display: flex;

height: 96%; /* 整个页面高度的96% */

}

/* 输入列样式 */

.input-column {

width: 300px; /* 设置输入列宽度为300px */

padding: 20px;

box-sizing: border-box; /* 包含内边距和边框在内的总宽度。*/

display: flex;

flex-direction: column;

height: 100%; /* 输入列占据整个高度 */

overflow: hidden;

margin: 0 auto; /* 水平居中 */

}

/* 公共按钮样式 */

button {

cursor: pointer; /* 鼠标指针变为手型 */

padding: 10px;

}

/* 条码输入框样式 */

#barcode-input {

flex: 1; /* 占据剩余空间 */

resize: none; /* 禁止调整输入框大小 */

width: 100%; /* 宽度100% */

}

/* 生成按钮样式 */

.generate-button {

width: 100%; /* 与输入框宽度一致 */

color: white;

background-color: grey;

border: none;

margin-top: 10px;

}

/* 条码列样式 */

.barcode-column {

flex: 8; /* 占据剩余空间 */

padding: 20px;

box-sizing: border-box;

display: flex;

flex-wrap: wrap; /* 换行显示 */

justify-content: space-between; /* 行内元素均匀分布在行里 */

align-content: flex-start; /* 从上方开始对齐 */

height: 100%; /* 高度100% */

overflow: auto; /* 溢出显示滚动条 */

}

/* 条码样式 */

.barcode {

width: calc(33.33% - 20px); /* 计算每个条码的宽度，以便三栏布局 */

margin-bottom: 30px;

}

/* 底部样式 */

footer {

position: fixed; /* 固定在底部 */

left: 0;

bottom: 0;

width: 100%;

height: 3%;

background-color: #f5f5f5; /* 背景颜色 */

padding: 10px;

text-align: center; /* 文本居中 */

border-top: 1px solid #ddd; /* 上边框 */

color: black;

}

footer a {

color: black;

}

/* 调整列数选择按钮样式 */

.column-buttons {

display: flex;

justify-content: space-around; /* 子元素水平居中 */

margin-top: 10px;

}

.column-buttons button {

flex: 1;

cursor: pointer; /* 鼠标指针变为手型 */

background-color: #f2f2f2; /* 背景颜色 */

}

.column-buttons button:hover {

background-color: #d9d9d9; /* 鼠标悬停时的颜色 */

}

</style>

</head>

<body>

</div>

</div>

</div>

</footer>

function generateBarcodes() { // 定义生成条码的方法

var inputText = document.getElementById("barcode-input").value; // 获取输入框的值

var barcodes = inputText.split("\n"); // 根据换行符分割成多个条码

var columnCount = parseInt(document.getElementById("column-select").getAttribute('data-column-count')); // 获取选中的列数

var container = document.getElementById("barcode-container"); // 获取条码容器

container.style.flex = columnCount; // 设置条码容器的布局方式

var barcodeWidth = 100 / columnCount - 2.5; // 计算每个条码的宽度

var barcodeStyle = ".barcode { width: calc(" + barcodeWidth + "% - 20px); margin-bottom: 30px; }"; // 根据列数动态计算每个条码的样式

var styleElement = document.createElement("style"); // 创建style标签

styleElement.appendChild(document.createTextNode(barcodeStyle)); // 添加计算后的样式

document.head.appendChild(styleElement); // 将样式标签添加到head中

container.innerHTML = ""; // 清空条码容器

for (var i = 0; i < barcodes.length; i++) { // 遍历每个条码

var barcode = barcodes[i].trim(); // 去除两端空格

if (barcode !== "" && !/[\u4E00-\u9FA5]/.test(barcode)) { // 判断条码是否为空或者含有中文字符

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); // 创建<svg>元素

svg.classList.add("barcode"); // 添加样式类

container.appendChild(svg); // 将<svg>添加到条码容器中

JsBarcode(svg, barcode, { width: 2, height: 80 }); // 使用JsBarcode库生成条码

}

function setColumnCount(count) {

document.getElementById("column-select").setAttribute('data-column-count', count); // 设置选中的列数

var buttons = document.getElementsByClassName("column-buttons")[0].getElementsByTagName("button"); // 获取列数选择按钮

for (var i = 0; i < buttons.length; i++) { // 循环按钮

if (i + 1 == count) { // 如果当前按钮对应的列数等于选中的列数

buttons[i].style.backgroundColor = "#666666"; // 设置背景颜色为灰色

} else {

buttons[i].style.backgroundColor = "#f2f2f2"; // 否则设置为默认颜色

}

</script>

</body>

</html>

发表回复 取消回复

发表回复取消回复