Javascript, HTML, CSS Code
<html> <head> <script type="text/javascript"> window.addEventListener('error', function(event) { var message = JSON.parse(JSON.stringify(event.message)); var source = event.filename; var lineno = event.lineno; var colno = event.colno; var error = event.error; window.parent.postMessage({ type: 'iframeError', details: { message: message, source: source, lineno: lineno, colno: colno, error: error ? error.stack : '' } }, '*'); }); window.addEventListener('unhandledrejection', function(event) { window.parent.postMessage({ type: 'iframePromiseRejection', details: { reason: event.reason } }, '*'); }); </script> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Calculadora de Costos de Impresión CMYK</title> <meta name="description" content="Calculadora para estimar los costos de impresión en impresoras CMYK, teniendo en cuenta los insumos y cobertura."> <meta name="keywords" content="calculadora, costos de impresión, CMYK, toner, tinta, impresoras"> <!-- Libraries --> <!-- jQuery (3.6.0) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script> <!-- Bootstrap CSS (5.3.3) --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous"> <!-- Bootstrap JS (5.3.3) --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"> </script> <!-- Font Awesome (6.6.0) --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous"> <script type="text/javascript"> try { // App Javascript Goes Here. Place your entire script content inside the try block for error handling. document.addEventListener("DOMContentLoaded", function() { const capacity = 1000; // Capacidad de cartucho const fivePercentCoverage = 0.05; // Cobertura del 5% const updateCosts = () => { const costCyan = parseFloat($("#cost-cyan").val()) || 0; const costMagenta = parseFloat($("#cost-magenta").val()) || 0; const costYellow = parseFloat($("#cost-yellow").val()) || 0; const costBlack = parseFloat($("#cost-black").val()) || 0; const pages = parseInt($("#num-pages").val()) || 0; const cyanCoverage = parseFloat($("#cover-cyan").val()) / 100 || 0; const magentaCoverage = parseFloat($("#cover-magenta").val()) / 100 || 0; const yellowCoverage = parseFloat($("#cover-yellow").val()) / 100 || 0; const blackCoverage = parseFloat($("#cover-black").val()) / 100 || 0; const calculateCostPerPage = (cost, coverage) => { const inkUsed = (coverage * capacity) / 0.05; // Tinta usada por página const costPerPage = (inkUsed * cost) / capacity; // Costo por página return costPerPage; }; const costsPerPage = { cyan: calculateCostPerPage(costCyan, cyanCoverage).toFixed(2), magenta: calculateCostPerPage(costMagenta, magentaCoverage).toFixed(2), yellow: calculateCostPerPage(costYellow, yellowCoverage).toFixed(2), black: calculateCostPerPage(costBlack, blackCoverage).toFixed(2) }; $("#cost-per-page-cyan").text(`$${costsPerPage.cyan}`); $("#cost-per-page-magenta").text(`$${costsPerPage.magenta}`); $("#cost-per-page-yellow").text(`$${costsPerPage.yellow}`); $("#cost-per-page-black").text(`$${costsPerPage.black}`); const totalCost = ( (costsPerPage.cyan * pages) + (costsPerPage.magenta * pages) + (costsPerPage.yellow * pages) + (costsPerPage.black * pages) ).toFixed(2); $("#total-cost").text(`$${totalCost}`); $("#suggested-cost").text(`$${(totalCost * 3).toFixed(2)}`); }; $("input, select").on("input change", updateCosts); }); } catch (error) { // This will throw the error to the parent window. throw error; } </script> <style> body { background: linear-gradient(to bottom right, #cce7ff, #d6ffe8); font-family: Arial, sans-serif; } .section { padding: 20px; border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); margin-bottom: 20px; } #printer-config { background-color: #00bfff; } #ink-costs { background-color: #ff4081; } #job-data { background-color: #ffeb3b; } #results { background-color: #4caf50; color: white; } input[type="range"] { width: 100%; } </style> <link rel="canonical" href="https://calculator.tools/prompt/10559/"> <meta charset="utf-8"> </head> <body> <div id="main-container" class="container"> <h1 class="text-center my-4">Calculadora de Costos de Impresión CMYK</h1> <div id="printer-config" class="section"> <h3>Configuración de Impresora</h3> <select id="printer-select" class="form-select mb-3"> <option value="">Seleccione una impresora</option> <option value="Epson EcoTank">Epson EcoTank</option> <option value="HP LaserJet">HP LaserJet</option> <option value="Canon Pixma">Canon Pixma</option> <option value="custom">Configuración personalizada</option> </select> <input type="text" id="custom-printer-name" class="form-control" placeholder="Nombre de impresora personalizada" /> </div> <div id="ink-costs" class="section"> <h3>Costos de Toner/Tinta</h3> <div class="mb-2"> <label>Costo cartucho Cyan ($)</label> <input type="number" step="0.01" id="cost-cyan" class="form-control" /> </div> <div class="mb-2"> <label>Costo cartucho Magenta ($)</label> <input type="number" step="0.01" id="cost-magenta" class="form-control" /> </div> <div class="mb-2"> <label>Costo cartucho Yellow ($)</label> <input type="number" step="0.01" id="cost-yellow" class="form-control" /> </div> <div class="mb-2"> <label>Costo cartucho Black ($)</label> <input type="number" step="0.01" id="cost-black" class="form-control" /> </div> <h5 id="total-cartridges-cost">Costo total de cartuchos: $<span id="total-cartridges-cost-value">0</span></h5> </div> <div id="job-data" class="section"> <h3>Datos del Trabajo</h3> <div class="mb-3"> <label>Número de páginas</label> <input type="number" id="num-pages" class="form-control" /> </div> <div class="mb-3"> <label>Cobertura Cyan (%)</label> <input type="range" id="cover-cyan" class="form-range" min="0" max="100" value="0" /> <span id="cover-cyan-value">0%</span> </div> <div class="mb-3"> <label>Cobertura Magenta (%)</label> <input type="range" id="cover-magenta" class="form-range" min="0" max="100" value="0" /> <span id="cover-magenta-value">0%</span> </div> <div class="mb-3"> <label>Cobertura Yellow (%)</label> <input type="range" id="cover-yellow" class="form-range" min="0" max="100" value="0" /> <span id="cover-yellow-value">0%</span> </div> <div class="mb-3"> <label>Cobertura Black (%)</label> <input type="range" id="cover-black" class="form-range" min="0" max="100" value="0" /> <span id="cover-black-value">0%</span> </div> </div> <div id="results" class="section text-center"> <h3>Resultados</h3> <h5>Costo por página</h5> <div>Cyan: <span id="cost-per-page-cyan">0.00</span></div> <div>Magenta: <span id="cost-per-page-magenta">0.00</span></div> <div>Yellow: <span id="cost-per-page-yellow">0.00</span></div> <div>Black: <span id="cost-per-page-black">0.00</span></div> <h4>Costo total del trabajo: <span id="total-cost">0.00</span></h4> <h4>Costo sugerido al cliente: <span id="suggested-cost">0.00</span></h4> </div> </div> <script type="text/javascript"> var localStoragePrefix = "ct-{{ cachebreaker }}"; var lastSave = 0; function saveLocal(data) { if (Date.now() - lastSave < 1000) { return; } let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname + "'; SameSite=Strict"; cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString(); document.cookie = cookie; lastSave = Date.now(); } function loadLocal() { var cookiePrefix = localStoragePrefix + "="; var cookieStart = document.cookie.indexOf(cookiePrefix); if (cookieStart > -1) { let cookieEnd = document.cookie.indexOf(";", cookieStart); if (cookieEnd == -1) { cookieEnd = document.cookie.length; } var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd); return JSON.parse(cookieData); } } </script> <script type="text/javascript"> window.addEventListener('load', function() { var observer = new MutationObserver(function() { window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); observer.observe(document.body, {attributes: true, childList: true, subtree: true}); window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); </script> </body> </html>
Calculadora de Costos de Impresión CMYK
Calculator Tools