barcode 相关问题

此标记应用于有关如何在程序中生成，解码或使用条形码的问题。

GS1条码解析

我们需要解析对方提供的GS1 datamatrix条码。我们知道他们将使用 GTIN(01)、批号(10)、有效期(17)、序列号(21)。问题是...

parsing barcode datamatrix gs1-datamatrix gs1-ai-syntax

回答 3 投票 0

Golang：GS1 条形码生成

您好，我正在尝试在 golang 中生成 GS1-128 条形码，目前我能够让它呈现与 GS1-128 条形码相同的效果，但它扫描为 code-128 条形码，并且有代替...

go barcode

回答 1 投票 0

如何修复网站中不起作用的按钮？ [已关闭]

我需要修复此网页，因为按钮不起作用。源码如下：我需要修复此网页，因为按钮不起作用。源码如下： <!DOCTYPE html> <html lang="en"> <head> <link rel="icon" href="logos/logo.PNG" type="image/png"> <link rel="shortcut icon" href="logos/logo.PNG" type="image/png"> <title>ElijahSpirit FDM</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.5/JsBarcode.all.min.js" integrity="sha512-QEAheCz+x/VkKtxeGoDq6nsGyzTx/0LMINTgQjqZ0h3+NjP+bCsPYz3hn0HnBkGmkIFSr7QcEZT+KyEM7lbLPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #f5f5f5; } select { border-radius: 10px; background-color: white; color: black; padding: 8px 16px; border: 2px solid black; font-size: 14px; margin: 10px; width: 200px; } #container { background-color: #ffffff; padding: 20px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); } .question { text-align: center; margin-bottom: 20px; } .hidden { display: none; } button { margin: 10px; border-radius: 10px; /* Increases the border radius for rounder corners */ background-color: #00008B; /* Sets the background color to dark blue */ color: white; padding: 10px 20px; /* Adjusts padding for a slightly larger button */ border: none; cursor: pointer; font-size: 14px; } input[type="range"] { width: 100%; /* Make the range input fill its container */ margin: 10px 0; } input[type="email"], input[type="number"] { border-radius: 10px; background-color: white; color: black; padding: 8px 16px; border: 2px solid black; /* Adds a black border */ font-size: 14px; margin: 10px; width: 150px; /* Adjust the width as needed */ } footer { position: fixed; /* Keep the footer fixed at the bottom */ left: 10px; /* Position it on the left side */ bottom: 10px; /* Position it at the bottom */ display: flex; align-items: center; /* Vertically center content */ } footer img { width: 30px; /* Adjust the image size as needed */ margin-right: 10px; /* Add spacing between text and image */ } </style> <script> let currentPrice = 4; let minimumPrice = 10; let startPrice = 12; let currentDiscount = 1; function updatePrice() { const store = parseFloat(document.getElementById('store').value); const width = parseInt(document.getElementById('width').value); const height = parseInt(document.getElementById('height').value); const length = parseInt(document.getElementById('length').value); const density = parseInt(document.getElementById('density').value); const material = parseFloat(document.getElementById('material').value); const color = parseFloat(document.getElementById('color').value); const accuracy = parseFloat(document.getElementById('accuracy').value); // Calculate the runningPrice with proper order of operations and parentheses runningPrice = ( minimumPrice + (startPrice * width * height * length) / 20000000 * (1 + density) * material * color * accuracy ) * currentDiscount * store; currentPrice = Math.round(runningPrice); document.getElementById('totalPrice').textContent = `Total Price: £${currentPrice}`; var price = currentPrice; var formattedPrice = "ES3D" + price.toString().padStart(8, '0'); // Generate the barcode using JsBarcode JsBarcode("#barcode", formattedPrice, { format: "CODE128", // You can choose the barcode format you prefer displayValue: true // Display the text (formattedPrice) below the barcode }); var randomDigits = generateRandomDigits(4); // Generate 4 random digits var totalPriceValue = currentPrice.toString().padStart(8, '0'); var formattedTotalPrice = "ES3D" + totalPriceValue + randomDigits; // Append the barcode with the formattedTotalPrice JsBarcode("#barcode", formattedTotalPrice, { format: "CODE128", displayValue: true }); function generateRandomDigits(length) { return Math.floor(Math.random() * Math.pow(10, length)).toString().padStart(length, '0'); } function showNextQuestion(currentQuestion, nextQuestion) { document.getElementById(currentQuestion).classList.add('hidden'); document.getElementById(nextQuestion).classList.remove('hidden'); } function showEmailAndSummary() { const email = document.getElementById('email').value; const size = `${document.getElementById('width').value}mm x ${document.getElementById('height').value}mm x ${document.getElementById('length').value}mm`; const density = document.getElementById('density').value; const material = document.getElementById('material').options[document.getElementById('material').selectedIndex].text; const color = document.getElementById('color').options[document.getElementById('color').selectedIndex].text; const accuracy = document.getElementById('accuracy').options[document.getElementById('accuracy').selectedIndex].text; const orderDetails = `Email: ${email}\nSize: ${size}\nDensity: ${density}\nMaterial: ${material}\nColor: ${color}\nAccuracy: ${accuracy}\nTotal Price: £${currentPrice}`; const mailtoLink = `mailto:[email protected]?subject=3D Print Order&body=${encodeURIComponent(orderDetails)}`; window.location.href = mailtoLink; } function showPreviousQuestion(currentQuestion, previousQuestion) { document.getElementById(currentQuestion).classList.add('hidden'); document.getElementById(previousQuestion).classList.remove('hidden'); } </script> </head> <body> <div id="container"> <div id="question0" class="question"> <p>Press continue to begin</p> <p>What location are you at?</p> <select id="store" onchange="updatePrice()"> <option value="1">ElijahSpirit FDM Centre</option> <option value="1.25">DIY Store (Sandhurst)</option> <option value="1.5">DIY Store (Crowthorne)</option> </select> <div> <button onclick="showNextQuestion('question0', 'question1')">Continue</button> </div> </div> <div id="question1" class="hidden question"> <p>Question 1: Please enter your email</p> <input type="email" id="email"> <div> <button onclick="showNextQuestion('question1', 'question2')">Continue</button> <button onclick="showPreviousQuestion('question1', 'question0')">Back</button> </div> </div> <div id="question2" class="hidden question"> <p>Question 2: Model size</p> Width (mm): <input type="number" id="width"><br> Height (mm): <input type="number" id="height"><br> Length (mm): <input type="number" id="length"><br> <div> <button onclick="updatePrice(); showNextQuestion('question2', 'question3')">Continue</button> <button onclick="showPreviousQuestion('question2', 'question1')">Back</button> </div> </div> <div id="question3" class="hidden question"> <p>Question 3: Density</p> <input type="range" id="density" min="0" max="100" step="1" oninput="updatePrice()"> <div> <button onclick="showNextQuestion('question3', 'question4')">Continue</button> <button onclick="showPreviousQuestion('question3', 'question2')">Back</button> </div> </div> <div id="question4" class="hidden question"> <p>Question 4: Material</p> <select id="material" onchange="updatePrice()"> <option value="1">PLA</option> <option value="1.5">PETG</option> <option value="4">TPU</option> </select> <div> <button onclick="showNextQuestion('question4', 'question5')">Continue</button> <button onclick="showPreviousQuestion('question4', 'question3')">Back</button> </div> </div> <div id="question5" class="hidden question"> <p>Question 5: Color</p> <select id="color" onchange="updatePrice()"> <optgroup label="Glossy Colors"> <option value="1">Black</option> <option value="1">White</option> <option value="1">Grey</option> <option value="1">Blue</option> <option value="1">Red</option> <option value="1">Rainbow</option> </optgroup> <optgroup label="Matte Colors"> <option value="1">Navy</option> <option value="1">Black</option> <option value="1">Cyan</option> <option value="1">Grey</option> <option value="1">Dark Green</option> </optgroup> </select> <div> <button onclick="showNextQuestion('question5', 'question6')">Continue</button> <button onclick="showPreviousQuestion('question5', 'question4')">Back</button> </div> </div> <div id="question6" class="hidden question"> <p>Question 6: Accuracy</p> <select id="accuracy" onchange="updatePrice()"> <option value="1">Draft</option> <option value="1.25">Excellent</option> <option value="1.5">Water Tight</option> </select> <div> <button onclick="showNextQuestion('question6', 'summary')">Continue</button> <button onclick="showPreviousQuestion('question6', 'question5')">Back</button> </div> </div> <div id="summary" class="hidden question"> <p>Price:</p> <p id="totalPrice">Total Price: £4</p> <canvas id="barcode"></canvas> <div> <button onclick="showEmailAndSummary()">Place Order</button> <button onclick="showPreviousQuestion('summary', 'question6')">Back</button> </div> </div> </div> <script> const continueButtons = document.querySelectorAll('button[onclick^="showNextQuestion"]'); continueButtons.forEach(button => { button.insertAdjacentHTML('afterend', '<button onclick="showPreviousQuestion(\'' + button.parentNode.parentNode.id + '\', \'' + button.parentNode.parentNode.previousElementSibling.id + '\')">Back</button>'); }); </script> <footer> <img src="logos/logo.PNG" alt="Logo"> Designed by ElijahSpirit <br> Version 1.2.5 BETA </footer> </body> </html> 我原以为这些按钮能起作用，但它们不起作用！似乎什么也没发生，这令人担忧。我已经联系 Fiverr 上的人，但他们不知道答案。问题在于条形码生成或随机数生成的脚本。一切似乎都井然有序，除了你忘记关闭你的 updatePrice 功能。如果您在 generateRandomDigits 之前放置大括号，则该表单将起作用。 // Append the barcode with the formattedTotalPrice JsBarcode("#barcode", formattedTotalPrice, { format: "CODE128", displayValue: true }); } // <--- HERE function generateRandomDigits(length) { return Math.floor(Math.random() * Math.pow(10, length)).toString().padStart(length, '0'); } 确保代码格式正确。保持一致的缩进将更容易发现此类问题。注意：如果您检查日志，您会发现还有另一个问题：未捕获类型错误：无法读取 null 的属性（读取“id”）确保您正在应用正确的空检查或使用可选链接，即button.parentNode.parentNode?.id 片段 let currentPrice = 4; let minimumPrice = 10; let startPrice = 12; let currentDiscount = 1; function updatePrice() { const store = parseFloat(document.getElementById('store').value); const width = parseInt(document.getElementById('width').value); const height = parseInt(document.getElementById('height').value); const length = parseInt(document.getElementById('length').value); const density = parseInt(document.getElementById('density').value); const material = parseFloat(document.getElementById('material').value); const color = parseFloat(document.getElementById('color').value); const accuracy = parseFloat(document.getElementById('accuracy').value); // Calculate the runningPrice with proper order of operations and parentheses runningPrice = ( minimumPrice + (startPrice * width * height * length) / 20000000 * (1 + density) * material * color * accuracy ) * currentDiscount * store; currentPrice = Math.round(runningPrice); document.getElementById('totalPrice').textContent = `Total Price: £${currentPrice}`; var price = currentPrice; var formattedPrice = "ES3D" + price.toString().padStart(8, '0'); // Generate the barcode using JsBarcode JsBarcode("#barcode", formattedPrice, { format: "CODE128", // You can choose the barcode format you prefer displayValue: true // Display the text (formattedPrice) below the barcode }); var randomDigits = generateRandomDigits(4); // Generate 4 random digits var totalPriceValue = currentPrice.toString().padStart(8, '0'); var formattedTotalPrice = "ES3D" + totalPriceValue + randomDigits; // Append the barcode with the formattedTotalPrice JsBarcode("#barcode", formattedTotalPrice, { format: "CODE128", displayValue: true }); } function generateRandomDigits(length) { return Math.floor(Math.random() * Math.pow(10, length)).toString().padStart(length, '0'); } function showNextQuestion(currentQuestion, nextQuestion) { document.getElementById(currentQuestion).classList.add('hidden'); document.getElementById(nextQuestion).classList.remove('hidden'); } function showEmailAndSummary() { const email = document.getElementById('email').value; const size = `${document.getElementById('width').value}mm x ${document.getElementById('height').value}mm x ${document.getElementById('length').value}mm`; const density = document.getElementById('density').value; const material = document.getElementById('material').options[document.getElementById('material').selectedIndex].text; const color = document.getElementById('color').options[document.getElementById('color').selectedIndex].text; const accuracy = document.getElementById('accuracy').options[document.getElementById('accuracy').selectedIndex].text; const orderDetails = `Email: ${email}\nSize: ${size}\nDensity: ${density}\nMaterial: ${material}\nColor: ${color}\nAccuracy: ${accuracy}\nTotal Price: £${currentPrice}`; const mailtoLink = `mailto:[email protected]?subject=3D Print Order&body=${encodeURIComponent(orderDetails)}`; window.location.href = mailtoLink; } function showPreviousQuestion(currentQuestion, previousQuestion) { document.getElementById(currentQuestion).classList.add('hidden'); document.getElementById(previousQuestion).classList.remove('hidden'); } const continueButtons = document.querySelectorAll('button[onclick^="showNextQuestion"]'); continueButtons.forEach(button => { button.insertAdjacentHTML('afterend', '<button onclick="showPreviousQuestion(\'' + button.parentNode.parentNode.id + '\', \'' + button.parentNode.parentNode.previousElementSibling.id + '\')">Back</button>'); }); body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #f5f5f5; } select { border-radius: 10px; background-color: white; color: black; padding: 8px 16px; border: 2px solid black; font-size: 14px; margin: 10px; width: 200px; } #container { background-color: #ffffff; padding: 20px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); } .question { text-align: center; margin-bottom: 20px; } .hidden { display: none; } button { margin: 10px; border-radius: 10px; /* Increases the border radius for rounder corners */ background-color: #00008B; /* Sets the background color to dark blue */ color: white; padding: 10px 20px; /* Adjusts padding for a slightly larger button */ border: none; cursor: pointer; font-size: 14px; } input[type="range"] { width: 100%; /* Make the range input fill its container */ margin: 10px 0; } input[type="email"], input[type="number"] { border-radius: 10px; background-color: white; color: black; padding: 8px 16px; border: 2px solid black; /* Adds a black border */ font-size: 14px; margin: 10px; width: 150px; /* Adjust the width as needed */ } footer { position: fixed; /* Keep the footer fixed at the bottom */ left: 10px; /* Position it on the left side */ bottom: 10px; /* Position it at the bottom */ display: flex; align-items: center; /* Vertically center content */ } footer img { width: 30px; /* Adjust the image size as needed */ margin-right: 10px; /* Add spacing between text and image */ } <!DOCTYPE html> <html lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.5/JsBarcode.all.min.js" integrity="sha512-QEAheCz+x/VkKtxeGoDq6nsGyzTx/0LMINTgQjqZ0h3+NjP+bCsPYz3hn0HnBkGmkIFSr7QcEZT+KyEM7lbLPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <div id="container"> <div id="question0" class="question"> <p>Press continue to begin</p> <p>What location are you at?</p> <select id="store" onchange="updatePrice()"> <option value="1">ElijahSpirit FDM Centre</option> <option value="1.25">DIY Store (Sandhurst)</option> <option value="1.5">DIY Store (Crowthorne)</option> </select> <div> <button onclick="showNextQuestion('question0', 'question1')">Continue</button> </div> </div> <div id="question1" class="hidden question"> <p>Question 1: Please enter your email</p> <input type="email" id="email"> <div> <button onclick="showNextQuestion('question1', 'question2')">Continue</button> <button onclick="showPreviousQuestion('question1', 'question0')">Back</button> </div> </div> <div id="question2" class="hidden question"> <p>Question 2: Model size</p> Width (mm): <input type="number" id="width"><br> Height (mm): <input type="number" id="height"><br> Length (mm): <input type="number" id="length"><br> <div> <button onclick="updatePrice(); showNextQuestion('question2', 'question3')">Continue</button> <button onclick="showPreviousQuestion('question2', 'question1')">Back</button> </div> </div> <div id="question3" class="hidden question"> <p>Question 3: Density</p> <input type="range" id="density" min="0" max="100" step="1" oninput="updatePrice()"> <div> <button onclick="showNextQuestion('question3', 'question4')">Continue</button> <button onclick="showPreviousQuestion('question3', 'question2')">Back</button> </div> </div> <div id="question4" class="hidden question"> <p>Question 4: Material</p> <select id="material" onchange="updatePrice()"> <option value="1">PLA</option> <option value="1.5">PETG</option> <option value="4">TPU</option> </select> <div> <button onclick="showNextQuestion('question4', 'question5')">Continue</button> <button onclick="showPreviousQuestion('question4', 'question3')">Back</button> </div> </div> <div id="question5" class="hidden question"> <p>Question 5: Color</p> <select id="color" onchange="updatePrice()"> <optgroup label="Glossy Colors"> <option value="1">Black</option> <option value="1">White</option> <option value="1">Grey</option> <option value="1">Blue</option> <option value="1">Red</option> <option value="1">Rainbow</option> </optgroup> <optgroup label="Matte Colors"> <option value="1">Navy</option> <option value="1">Black</option> <option value="1">Cyan</option> <option value="1">Grey</option> <option value="1">Dark Green</option> </optgroup> </select> <div> <button onclick="showNextQuestion('question5', 'question6')">Continue</button> <button onclick="showPreviousQuestion('question5', 'question4')">Back</button> </div> </div> <div id="question6" class="hidden question"> <p>Question 6: Accuracy</p> <select id="accuracy" onchange="updatePrice()"> <option value="1">Draft</option> <option value="1.25">Excellent</option> <option value="1.5">Water Tight</option> </select> <div> <button onclick="showNextQuestion('question6', 'summary')">Continue</button> <button onclick="showPreviousQuestion('question6', 'question5')">Back</button> </div> </div> <div id="summary" class="hidden question"> <p>Price:</p> <p id="totalPrice">Total Price: £4</p> <canvas id="barcode"></canvas> <div> <button onclick="showEmailAndSummary()">Place Order</button> <button onclick="showPreviousQuestion('summary', 'question6')">Back</button> </div> </div> </div> <footer> <img src="logos/logo.PNG" alt="Logo"> Designed by ElijahSpirit <br> Version 1.2.5 BETA </footer>

javascript html css barcode

回答 1 投票 0

GS1条码解析-好像没有分隔符

我有一个解析 GS1 条形码的程序（使用 Zebra 扫描仪），效果很好，至少我认为它没问题...... 直到我发现一个盒子有 2 个 GS1 条形码.. 一个“线性”和一个

c# .net xamarin barcode gs1-datamatrix

回答 5 投票 0

宏PDF417条码规格

我有需要在 PDF417 条形码中编码的数据。由于它们太大（> 6kB），我需要将它们分成多个条形码，称为 MacroPDF417。我被一个图书馆困住了（tec-it tbarcode ...

barcode specifications

回答 3 投票 0

该网站的按钮不起作用，我需要帮助修复它

我需要帮助修复此网页，因为按钮不起作用。源码如下：我需要帮助修复此网页，因为按钮不起作用。源码如下： <!DOCTYPE html> <html lang="en"> <head> <link rel="icon" href="logos/logo.PNG" type="image/png"> <link rel="shortcut icon" href="logos/logo.PNG" type="image/png"> <title>ElijahSpirit FDM</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.5/JsBarcode.all.min.js" integrity="sha512-QEAheCz+x/VkKtxeGoDq6nsGyzTx/0LMINTgQjqZ0h3+NjP+bCsPYz3hn0HnBkGmkIFSr7QcEZT+KyEM7lbLPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #f5f5f5; } select { border-radius: 10px; background-color: white; color: black; padding: 8px 16px; border: 2px solid black; font-size: 14px; margin: 10px; width: 200px; } #container { background-color: #ffffff; padding: 20px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); } .question { text-align: center; margin-bottom: 20px; } .hidden { display: none; } button { margin: 10px; border-radius: 10px; /* Increases the border radius for rounder corners */ background-color: #00008B; /* Sets the background color to dark blue */ color: white; padding: 10px 20px; /* Adjusts padding for a slightly larger button */ border: none; cursor: pointer; font-size: 14px; } input[type="range"] { width: 100%; /* Make the range input fill its container */ margin: 10px 0; } input[type="email"], input[type="number"] { border-radius: 10px; background-color: white; color: black; padding: 8px 16px; border: 2px solid black; /* Adds a black border */ font-size: 14px; margin: 10px; width: 150px; /* Adjust the width as needed */ } footer { position: fixed; /* Keep the footer fixed at the bottom */ left: 10px; /* Position it on the left side */ bottom: 10px; /* Position it at the bottom */ display: flex; align-items: center; /* Vertically center content */ } footer img { width: 30px; /* Adjust the image size as needed */ margin-right: 10px; /* Add spacing between text and image */ } </style> <script> let currentPrice = 4; let minimumPrice = 10; let startPrice = 12; let currentDiscount = 1; function updatePrice() { const store = parseFloat(document.getElementById('store').value); const width = parseInt(document.getElementById('width').value); const height = parseInt(document.getElementById('height').value); const length = parseInt(document.getElementById('length').value); const density = parseInt(document.getElementById('density').value); const material = parseFloat(document.getElementById('material').value); const color = parseFloat(document.getElementById('color').value); const accuracy = parseFloat(document.getElementById('accuracy').value); // Calculate the runningPrice with proper order of operations and parentheses runningPrice = ( minimumPrice + (startPrice * width * height * length) / 20000000 * (1 + density) * material * color * accuracy ) * currentDiscount * store; currentPrice = Math.round(runningPrice); document.getElementById('totalPrice').textContent = `Total Price: £${currentPrice}`; var price = currentPrice; var formattedPrice = "ES3D" + price.toString().padStart(8, '0'); // Generate the barcode using JsBarcode JsBarcode("#barcode", formattedPrice, { format: "CODE128", // You can choose the barcode format you prefer displayValue: true // Display the text (formattedPrice) below the barcode }); var randomDigits = generateRandomDigits(4); // Generate 4 random digits var totalPriceValue = currentPrice.toString().padStart(8, '0'); var formattedTotalPrice = "ES3D" + totalPriceValue + randomDigits; // Append the barcode with the formattedTotalPrice JsBarcode("#barcode", formattedTotalPrice, { format: "CODE128", displayValue: true }); function generateRandomDigits(length) { return Math.floor(Math.random() * Math.pow(10, length)).toString().padStart(length, '0'); } function showNextQuestion(currentQuestion, nextQuestion) { document.getElementById(currentQuestion).classList.add('hidden'); document.getElementById(nextQuestion).classList.remove('hidden'); } function showEmailAndSummary() { const email = document.getElementById('email').value; const size = `${document.getElementById('width').value}mm x ${document.getElementById('height').value}mm x ${document.getElementById('length').value}mm`; const density = document.getElementById('density').value; const material = document.getElementById('material').options[document.getElementById('material').selectedIndex].text; const color = document.getElementById('color').options[document.getElementById('color').selectedIndex].text; const accuracy = document.getElementById('accuracy').options[document.getElementById('accuracy').selectedIndex].text; const orderDetails = `Email: ${email}\nSize: ${size}\nDensity: ${density}\nMaterial: ${material}\nColor: ${color}\nAccuracy: ${accuracy}\nTotal Price: £${currentPrice}`; const mailtoLink = `mailto:[email protected]?subject=3D Print Order&body=${encodeURIComponent(orderDetails)}`; window.location.href = mailtoLink; } function showPreviousQuestion(currentQuestion, previousQuestion) { document.getElementById(currentQuestion).classList.add('hidden'); document.getElementById(previousQuestion).classList.remove('hidden'); } </script> </head> <body> <div id="container"> <div id="question0" class="question"> <p>Press continue to begin</p> <p>What location are you at?</p> <select id="store" onchange="updatePrice()"> <option value="1">ElijahSpirit FDM Centre</option> <option value="1.25">DIY Store (Sandhurst)</option> <option value="1.5">DIY Store (Crowthorne)</option> </select> <div> <button onclick="showNextQuestion('question0', 'question1')">Continue</button> </div> </div> <div id="question1" class="hidden question"> <p>Question 1: Please enter your email</p> <input type="email" id="email"> <div> <button onclick="showNextQuestion('question1', 'question2')">Continue</button> <button onclick="showPreviousQuestion('question1', 'question0')">Back</button> </div> </div> <div id="question2" class="hidden question"> <p>Question 2: Model size</p> Width (mm): <input type="number" id="width"><br> Height (mm): <input type="number" id="height"><br> Length (mm): <input type="number" id="length"><br> <div> <button onclick="updatePrice(); showNextQuestion('question2', 'question3')">Continue</button> <button onclick="showPreviousQuestion('question2', 'question1')">Back</button> </div> </div> <div id="question3" class="hidden question"> <p>Question 3: Density</p> <input type="range" id="density" min="0" max="100" step="1" oninput="updatePrice()"> <div> <button onclick="showNextQuestion('question3', 'question4')">Continue</button> <button onclick="showPreviousQuestion('question3', 'question2')">Back</button> </div> </div> <div id="question4" class="hidden question"> <p>Question 4: Material</p> <select id="material" onchange="updatePrice()"> <option value="1">PLA</option> <option value="1.5">PETG</option> <option value="4">TPU</option> </select> <div> <button onclick="showNextQuestion('question4', 'question5')">Continue</button> <button onclick="showPreviousQuestion('question4', 'question3')">Back</button> </div> </div> <div id="question5" class="hidden question"> <p>Question 5: Color</p> <select id="color" onchange="updatePrice()"> <optgroup label="Glossy Colors"> <option value="1">Black</option> <option value="1">White</option> <option value="1">Grey</option> <option value="1">Blue</option> <option value="1">Red</option> <option value="1">Rainbow</option> </optgroup> <optgroup label="Matte Colors"> <option value="1">Navy</option> <option value="1">Black</option> <option value="1">Cyan</option> <option value="1">Grey</option> <option value="1">Dark Green</option> </optgroup> </select> <div> <button onclick="showNextQuestion('question5', 'question6')">Continue</button> <button onclick="showPreviousQuestion('question5', 'question4')">Back</button> </div> </div> <div id="question6" class="hidden question"> <p>Question 6: Accuracy</p> <select id="accuracy" onchange="updatePrice()"> <option value="1">Draft</option> <option value="1.25">Excellent</option> <option value="1.5">Water Tight</option> </select> <div> <button onclick="showNextQuestion('question6', 'summary')">Continue</button> <button onclick="showPreviousQuestion('question6', 'question5')">Back</button> </div> </div> <div id="summary" class="hidden question"> <p>Price:</p> <p id="totalPrice">Total Price: £4</p> <canvas id="barcode"></canvas> <div> <button onclick="showEmailAndSummary()">Place Order</button> <button onclick="showPreviousQuestion('summary', 'question6')">Back</button> </div> </div> </div> <script> const continueButtons = document.querySelectorAll('button[onclick^="showNextQuestion"]'); continueButtons.forEach(button => { button.insertAdjacentHTML('afterend', '<button onclick="showPreviousQuestion(\'' + button.parentNode.parentNode.id + '\', \'' + button.parentNode.parentNode.previousElementSibling.id + '\')">Back</button>'); }); </script> <footer> <img src="logos/logo.PNG" alt="Logo"> Designed by ElijahSpirit <br> Version 1.2.5 BETA </footer> </body> </html> 我原以为这些按钮能起作用，但它们不起作用！似乎什么也没发生，这令人担忧。我已经联系 Fiverr 上的人，但他们不知道答案。问题在于条形码生成或随机数生成的脚本。一切似乎都井然有序，除了你忘记关闭你的 updatePrice 功能。如果您在 generateRandomDigits 之前放置大括号，则该表单将起作用。 // Append the barcode with the formattedTotalPrice JsBarcode("#barcode", formattedTotalPrice, { format: "CODE128", displayValue: true }); } // <--- HERE function generateRandomDigits(length) { return Math.floor(Math.random() * Math.pow(10, length)).toString().padStart(length, '0'); } 确保代码格式正确。保持一致的缩进将更容易发现此类问题。注意：如果您检查日志，您会发现还有另一个问题：未捕获类型错误：无法读取 null 的属性（读取“id”）确保您正在应用正确的空检查或使用可选链接，即button.parentNode.parentNode?.id 片段 let currentPrice = 4; let minimumPrice = 10; let startPrice = 12; let currentDiscount = 1; function updatePrice() { const store = parseFloat(document.getElementById('store').value); const width = parseInt(document.getElementById('width').value); const height = parseInt(document.getElementById('height').value); const length = parseInt(document.getElementById('length').value); const density = parseInt(document.getElementById('density').value); const material = parseFloat(document.getElementById('material').value); const color = parseFloat(document.getElementById('color').value); const accuracy = parseFloat(document.getElementById('accuracy').value); // Calculate the runningPrice with proper order of operations and parentheses runningPrice = ( minimumPrice + (startPrice * width * height * length) / 20000000 * (1 + density) * material * color * accuracy ) * currentDiscount * store; currentPrice = Math.round(runningPrice); document.getElementById('totalPrice').textContent = `Total Price: £${currentPrice}`; var price = currentPrice; var formattedPrice = "ES3D" + price.toString().padStart(8, '0'); // Generate the barcode using JsBarcode JsBarcode("#barcode", formattedPrice, { format: "CODE128", // You can choose the barcode format you prefer displayValue: true // Display the text (formattedPrice) below the barcode }); var randomDigits = generateRandomDigits(4); // Generate 4 random digits var totalPriceValue = currentPrice.toString().padStart(8, '0'); var formattedTotalPrice = "ES3D" + totalPriceValue + randomDigits; // Append the barcode with the formattedTotalPrice JsBarcode("#barcode", formattedTotalPrice, { format: "CODE128", displayValue: true }); } function generateRandomDigits(length) { return Math.floor(Math.random() * Math.pow(10, length)).toString().padStart(length, '0'); } function showNextQuestion(currentQuestion, nextQuestion) { document.getElementById(currentQuestion).classList.add('hidden'); document.getElementById(nextQuestion).classList.remove('hidden'); } function showEmailAndSummary() { const email = document.getElementById('email').value; const size = `${document.getElementById('width').value}mm x ${document.getElementById('height').value}mm x ${document.getElementById('length').value}mm`; const density = document.getElementById('density').value; const material = document.getElementById('material').options[document.getElementById('material').selectedIndex].text; const color = document.getElementById('color').options[document.getElementById('color').selectedIndex].text; const accuracy = document.getElementById('accuracy').options[document.getElementById('accuracy').selectedIndex].text; const orderDetails = `Email: ${email}\nSize: ${size}\nDensity: ${density}\nMaterial: ${material}\nColor: ${color}\nAccuracy: ${accuracy}\nTotal Price: £${currentPrice}`; const mailtoLink = `mailto:[email protected]?subject=3D Print Order&body=${encodeURIComponent(orderDetails)}`; window.location.href = mailtoLink; } function showPreviousQuestion(currentQuestion, previousQuestion) { document.getElementById(currentQuestion).classList.add('hidden'); document.getElementById(previousQuestion).classList.remove('hidden'); } const continueButtons = document.querySelectorAll('button[onclick^="showNextQuestion"]'); continueButtons.forEach(button => { button.insertAdjacentHTML('afterend', '<button onclick="showPreviousQuestion(\'' + button.parentNode.parentNode.id + '\', \'' + button.parentNode.parentNode.previousElementSibling.id + '\')">Back</button>'); }); body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #f5f5f5; } select { border-radius: 10px; background-color: white; color: black; padding: 8px 16px; border: 2px solid black; font-size: 14px; margin: 10px; width: 200px; } #container { background-color: #ffffff; padding: 20px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); } .question { text-align: center; margin-bottom: 20px; } .hidden { display: none; } button { margin: 10px; border-radius: 10px; /* Increases the border radius for rounder corners */ background-color: #00008B; /* Sets the background color to dark blue */ color: white; padding: 10px 20px; /* Adjusts padding for a slightly larger button */ border: none; cursor: pointer; font-size: 14px; } input[type="range"] { width: 100%; /* Make the range input fill its container */ margin: 10px 0; } input[type="email"], input[type="number"] { border-radius: 10px; background-color: white; color: black; padding: 8px 16px; border: 2px solid black; /* Adds a black border */ font-size: 14px; margin: 10px; width: 150px; /* Adjust the width as needed */ } footer { position: fixed; /* Keep the footer fixed at the bottom */ left: 10px; /* Position it on the left side */ bottom: 10px; /* Position it at the bottom */ display: flex; align-items: center; /* Vertically center content */ } footer img { width: 30px; /* Adjust the image size as needed */ margin-right: 10px; /* Add spacing between text and image */ } <!DOCTYPE html> <html lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.5/JsBarcode.all.min.js" integrity="sha512-QEAheCz+x/VkKtxeGoDq6nsGyzTx/0LMINTgQjqZ0h3+NjP+bCsPYz3hn0HnBkGmkIFSr7QcEZT+KyEM7lbLPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <div id="container"> <div id="question0" class="question"> <p>Press continue to begin</p> <p>What location are you at?</p> <select id="store" onchange="updatePrice()"> <option value="1">ElijahSpirit FDM Centre</option> <option value="1.25">DIY Store (Sandhurst)</option> <option value="1.5">DIY Store (Crowthorne)</option> </select> <div> <button onclick="showNextQuestion('question0', 'question1')">Continue</button> </div> </div> <div id="question1" class="hidden question"> <p>Question 1: Please enter your email</p> <input type="email" id="email"> <div> <button onclick="showNextQuestion('question1', 'question2')">Continue</button> <button onclick="showPreviousQuestion('question1', 'question0')">Back</button> </div> </div> <div id="question2" class="hidden question"> <p>Question 2: Model size</p> Width (mm): <input type="number" id="width"><br> Height (mm): <input type="number" id="height"><br> Length (mm): <input type="number" id="length"><br> <div> <button onclick="updatePrice(); showNextQuestion('question2', 'question3')">Continue</button> <button onclick="showPreviousQuestion('question2', 'question1')">Back</button> </div> </div> <div id="question3" class="hidden question"> <p>Question 3: Density</p> <input type="range" id="density" min="0" max="100" step="1" oninput="updatePrice()"> <div> <button onclick="showNextQuestion('question3', 'question4')">Continue</button> <button onclick="showPreviousQuestion('question3', 'question2')">Back</button> </div> </div> <div id="question4" class="hidden question"> <p>Question 4: Material</p> <select id="material" onchange="updatePrice()"> <option value="1">PLA</option> <option value="1.5">PETG</option> <option value="4">TPU</option> </select> <div> <button onclick="showNextQuestion('question4', 'question5')">Continue</button> <button onclick="showPreviousQuestion('question4', 'question3')">Back</button> </div> </div> <div id="question5" class="hidden question"> <p>Question 5: Color</p> <select id="color" onchange="updatePrice()"> <optgroup label="Glossy Colors"> <option value="1">Black</option> <option value="1">White</option> <option value="1">Grey</option> <option value="1">Blue</option> <option value="1">Red</option> <option value="1">Rainbow</option> </optgroup> <optgroup label="Matte Colors"> <option value="1">Navy</option> <option value="1">Black</option> <option value="1">Cyan</option> <option value="1">Grey</option> <option value="1">Dark Green</option> </optgroup> </select> <div> <button onclick="showNextQuestion('question5', 'question6')">Continue</button> <button onclick="showPreviousQuestion('question5', 'question4')">Back</button> </div> </div> <div id="question6" class="hidden question"> <p>Question 6: Accuracy</p> <select id="accuracy" onchange="updatePrice()"> <option value="1">Draft</option> <option value="1.25">Excellent</option> <option value="1.5">Water Tight</option> </select> <div> <button onclick="showNextQuestion('question6', 'summary')">Continue</button> <button onclick="showPreviousQuestion('question6', 'question5')">Back</button> </div> </div> <div id="summary" class="hidden question"> <p>Price:</p> <p id="totalPrice">Total Price: £4</p> <canvas id="barcode"></canvas> <div> <button onclick="showEmailAndSummary()">Place Order</button> <button onclick="showPreviousQuestion('summary', 'question6')">Back</button> </div> </div> </div> <footer> <img src="logos/logo.PNG" alt="Logo"> Designed by ElijahSpirit <br> Version 1.2.5 BETA </footer>

javascript html css barcode

回答 1 投票 0

ZPL 打印条形码，上面带有额外文本

我正在开发一个使用 Zebra GK420t 打印机打印标签的应用程序。我成功地打印了条形码，其文本值位于条形码底部。但是，我无法打印

barcode zebra-printers zpl zpl-ii

回答 1 投票 0

假人的条形码库存系统

我想创建一个条形码库存系统。扫描代码（移动应用程序）后，我只想将销售记录（而不是条形码）记录到与投资位于同一行的特定 Excel 单元格中...

barcode inventory

回答 0 投票 0

Pyzbar 解码：TypeError：无法解压不可迭代的 NoneType 对象

我正在使用 pyzbar 和 opencv 制作条形码阅读器，但是当我使用 pyzbar.pyzbar 中的解码功能时，我收到此错误：回溯（最近一次调用最后一次）：文件“c:\Users\galax\Documents\