|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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> <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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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> <!--声明文档类型为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> |
发表回复