创建一个简单的网页应用程序，可以让用户批量生成条形码，是一个很实用的工具。下面是一个使用HTML、CSS和JavaScript生成条形码的基本示例。这个示例将利用一个开源的条形码生成库，比如`JsBarcode`，来实现条形码的生成。

步骤1: 创建HTML结构

首先，创建一个基本的HTML页面。

html

步骤2: 添加样式 (CSS)

创建一个 `styles.css` 文件来添加一些基本样式。

css

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

margin: 0;

padding: 20px;

}

.container {

max-width: 600px;

margin: auto;

background: white;

padding: 20px;

border-radius: 5px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}

h1 {

text-align: center;

}

textarea {

width: 100%;

height: 150px;

margin-bottom: 10px;

}

button {

display: block;

width: 100%;

padding: 10px;

background-color: #28a745;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

}

button:hover {

background-color: #218838;

}

#barcode-output {

margin-top: 20px;

display: flex;

flex-wrap: wrap;

justify-content: center;

}

.barcode {

margin: 10px;

}

步骤3: 添加JavaScript逻辑

创建一个 `script.js` 文件来处理条形码生成的逻辑。

javascript

document.getElementById('generate-btn').addEventListener('click', function() {

const input = document.getElementById('barcode-input').value;

const lines = input.split('\n');

const output = document.getElementById('barcode-output');

// 清空之前生成的条形码

output.innerHTML = '';

lines.forEach(line => {

line = line.trim(); // 去除前后的空格

if (line) {

const barcodeDiv = document.createElement('div');

barcodeDiv.className = 'barcode';

// 创建条形码

JsBarcode(barcodeDiv, line, { format: "CODE128", height: 40 });

output.appendChild(barcodeDiv);

}

});

});

使用说明

1. 将以上代码保存到相应的文件中（`index.html`, `styles.css`, `script.js`）。

2. 打开 `index.html` 文件，您将看到一个文本框，可以在其中输入需要生成的条形码内容，每行一个。

3. 点击“生成条形码”按钮，可以在页面下方看到生成的条形码。

这个示例提供了一个基础的条形码生成工具，您可以根据需要进一步扩展功能，比如添加下载条形码的功能，选择不同的条形码格式等。