{"id":1576,"date":"2026-01-22T12:24:09","date_gmt":"2026-01-22T11:24:09","guid":{"rendered":"https:\/\/estudimaso.com\/calculadora-ahorro-periodico\/"},"modified":"2026-01-29T14:48:53","modified_gmt":"2026-01-29T13:48:53","slug":"calculadora-ahorro-periodico","status":"publish","type":"page","link":"https:\/\/estudimaso.com\/es\/calculadora-ahorro-periodico\/","title":{"rendered":"Calculadora Ahorro peri\u00f3dico"},"content":{"rendered":"\n<style>\nhtml{background:#c2d182;}\n\n:root {\n  --card-bg:#fff;\n  --green-main:#b7c96c;\n  --green-dark:#6f7d3b;\n  --gray-line:#cfcfcf;\n  --text:#1f1f1f;\n}\n*{box-sizing:border-box}\n\n.card{\n  background:var(--card-bg);\n  margin:0px 0px 40px 0px;\n  border-radius:22px;\n  padding:28px 32px;\n  box-shadow:0 10px 30px rgba(0,0,0,.12);\n}\n.inputs-row{\n  display:flex;\n  gap:20px;\n  flex-wrap:wrap;\n}\n.input-group{\n  flex:1;\n  min-width:180px;\n}\nlabel{\n  font-size:14px;\n  display:block;\n  margin-bottom:6px;\n}\ninput,select{\n  width:100%;\n  padding:14px 16px;\n  border-radius:10px;\n  border:1px solid #e6e6e6;\n  background:#f7f7f7;\n  font-size:16px;\n}\n\n.results-values {\n  display: flex;\n  align-items: flex-start;\n  gap: 40px;\n}\n\n.result {\n  flex: 1;\n}\n\n.results-header{\n  display:flex;\n  justify-content:space-between;\n  margin-bottom:20px;\n}\n.result .value{\n  font-size:42px;\n  font-weight:600;\n}\n.highlight{color:var(--green-main)}\ncanvas{width:100%;height:560px}\n\/* Tooltip info *\/\n.info {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  background: var(--green-dark);\n  color: #fff;\n  font-size: 12px;\n  cursor: help;\n}\n\n.info span {\n  display: none;\n  position: absolute;\n  bottom: 130%;\n  left: 50%;\n  transform: translateX(-50%);\n  background: #fff;\n  color: #333;\n  padding: 8px 10px;\n  border-radius: 8px;\n  font-size: 12px;\n  width: 220px;\n  box-shadow: 0 6px 16px rgba(0,0,0,.15);\n  z-index: 10;\n}\n\n.info:hover span {\n  display: block;\n}\n@media (max-width: 768px) {\n  .results-values {\n    flex-direction: column;\n    gap: 32px;\n  }\n\n  .result {\n    width: 100%;\n  }\n\n  .result .value {\n    font-size: 36px; \/* opcional: mejor jerarqu\u00eda en m\u00f3vil *\/\n  }\n}\n\n<\/style>\n\n<!-- DATOS -->\n<div style=\"background:#c2d182;\">\n<section class=\"card\">\n  <h3 style=\"font-size:30px\">Datos ahorro<\/h3>\n\n  <div class=\"inputs-row\">\n    <div class=\"input-group\">\n      <label>Mensualidad<\/label>\n      <input type=\"number\" id=\"mensualitat\" placeholder=\"100\"\/>\n    <\/div>\n\n<div class=\"input-group\">\n  <label>Aportaci\u00f3n inicial<\/label>\n  <input type=\"number\" id=\"aportacioInicial\" placeholder=\"5.000\"\/>\n<\/div>\n\n\n    <div class=\"input-group\">\n      <label>Anualidad<\/label>\n      <input type=\"text\" id=\"anualitat\" readonly=\"readonly\"\/>\n    <\/div>\n\n<div class=\"input-group\">\n  <label>\n Rentabilidad\n    <div class=\"info\">i\n\n<span>La rentabilidad es una estimaci\u00f3n anual orientativa y puede variar en funci\u00f3n del mercado.<\/span> \n    <\/div>\n  <\/label>\n  <select id=\"rendibilitat\">\n    <option value=\"0.06\">6%<\/option>\n<option value=\"0.08\">8%<\/option>\n<option value=\"0.11\">11%<\/option>\n  <\/select>\n<\/div>\n\n\n    <div class=\"input-group\">\n      <label>A\u00f1os<\/label>\n      <select id=\"anys\">\n        <option>5<\/option><option>10<\/option><option>15<\/option>\n        <option>20<\/option><option>25<\/option><option>30<\/option>\n        <option selected=\"selected\">35<\/option><option>40<\/option>\n      <\/select>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- RESULTADOS -->\n<section class=\"card\">\n  <div class=\"results-header\">\n    <h3 style=\"font-size:30px;\">Expectativas<\/h3>\n    <span id=\"yearsText\">\n Predicci\u00f3n a 35 a\u00f1os vista\n    <\/span>\n  <\/div>\n\n  <div class=\"results-values\">\n    <div class=\"result\">\n      <span style=\"font-size:25px;line-height:1em;font-weight:500;margin-bottom:25px;\" class=\"label\">\n Resultado con<br\/>cuenta corriente\n      <\/span><br\/>      <div style=\"margin:10px 0px\" class=\"value\" id=\"result-compte\">\u2014<\/div>\n    <\/div>\n\n    <div class=\"result\">\n      <span style=\"font-size:25px;line-height:1em;font-weight:500;margin-bottom:25px;\" class=\"label\">\n Resultado con<br\/>inter\u00e9s compuesto\n      <\/span><br\/>      <div style=\"margin:10px 0px\" class=\"value highlight\" id=\"result-interes\">\u2014<\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- GRAFICO -->\n<section class=\"card\">\n  <h3 style=\"font-size:30px\">Comparativa<\/h3>\n  <canvas id=\"chart\"><\/canvas>\n<\/section>\n\n<script>\nconst mensualitatInput   = document.getElementById('mensualitat');\nconst anualitatInput     = document.getElementById('anualitat');\nconst rendibilitatInput  = document.getElementById('rendibilitat');\nconst anysInput          = document.getElementById('anys');\nconst aportacioInicialEl = document.getElementById('aportacioInicial');\n\nconst resultCompte  = document.getElementById('result-compte');\nconst resultInteres = document.getElementById('result-interes');\nconst yearsText     = document.getElementById('yearsText');\n\nconst canvas = document.getElementById('chart');\nconst ctx    = canvas.getContext('2d');\n\n[\n  mensualitatInput,\n  rendibilitatInput,\n  anysInput,\n  aportacioInicialEl\n].forEach(el => {\n  el.addEventListener('input', calcular);\n  el.addEventListener('change', calcular);\n});\n\nfunction calcular() {\n  const mensualitat     = Number(mensualitatInput.value) || 0;\n  const aportacioInicial = Number(aportacioInicialEl.value) || 0;\n  const r               = Number(rendibilitatInput.value) || 0;\n  const anys            = Number(anysInput.value) || 0;\n\n  const anual = mensualitat * 12;\n  anualitatInput.value = anual.toLocaleString('ca-ES') + ' \u20ac';\n  yearsText.innerHTML = `Predicci\u00f3n a <strong>${anys} a\u00f1os vista`;\n\n  let totalCompte  = 0;\n  let totalInteres = aportacioInicial;\n\n  const dataCompte  = [];\n  const dataInteres = [];\n\n  for (let i = 1; i <= anys; i++) {\n    \/\/ Compte corrent (sin inter\u00e9s, sin aportaci\u00f3n inicial)\n    totalCompte += anual;\n\n    \/\/ Inter\u00e9s compuesto (s\u00ed incluye aportaci\u00f3n inicial)\n    totalInteres = totalInteres * (1 + r) + anual;\n\n    dataCompte.push(totalCompte);\n    dataInteres.push(totalInteres);\n  }\n\n  resultCompte.textContent  = totalCompte.toLocaleString('ca-ES') + ' \u20ac';\n  resultInteres.textContent = totalInteres.toLocaleString('ca-ES') + ' \u20ac';\n\n  drawChart(dataCompte, dataInteres, anys);\n}\n\nfunction drawChart(compte, interes, anys) {\n  canvas.width  = canvas.offsetWidth;\n  canvas.height = 560;\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n  const padding = 60;\n  const chartWidth  = canvas.width  - padding * 2;\n  const chartHeight = canvas.height - padding * 2;\n\n  const max =\n    Math.ceil(Math.max(...interes, 1) \/ 200000) * 200000;\n\n  \/\/ Ejes\n  ctx.strokeStyle = '#333';\n  ctx.lineWidth = 1;\n  ctx.beginPath();\n  ctx.moveTo(padding, padding);\n  ctx.lineTo(padding, canvas.height - padding);\n  ctx.lineTo(canvas.width - padding, canvas.height - padding);\n  ctx.stroke();\n\n  ctx.font = '12px system-ui';\n  ctx.fillStyle = '#333';\n\n  \/\/ Eje Y (\u20ac)\n  for (let v = 0; v <= max; v += 200000) {\n    const y =\n      canvas.height - padding - (v \/ max) * chartHeight;\n    ctx.fillText(\n      v.toLocaleString('ca-ES') + ' \u20ac',\n      10,\n      y + 4\n    );\n  }\n\n  \/\/ Eje X (a\u00f1os)\n  for (let i = 0; i <= anys; i += 5) {\n    const x =\n      padding + (i \/ anys) * chartWidth;\n    ctx.fillText(\n      i.toString(),\n      x - 5,\n      canvas.height - padding + 20\n    );\n  }\n\n  drawArea(compte,  max, 'rgba(107, 115, 46, 1)'); \/\/ compte corrent\n  drawArea(interes, max, 'rgba(194, 209, 130, 0.6)'); \/\/ inter\u00e8s compost\n}\n\nfunction drawArea(data, max, color) {\n  const padding = 60;\n  const chartWidth  = canvas.width  - padding * 2;\n  const chartHeight = canvas.height - padding * 2;\n\n  ctx.beginPath();\n  ctx.moveTo(padding, canvas.height - padding);\n\n  data.forEach((v, i) => {\n    const x =\n      padding + (i \/ (data.length - 1 || 1)) * chartWidth;\n    const y =\n      canvas.height - padding - (v \/ max) * chartHeight;\n    ctx.lineTo(x, y);\n  });\n\n  ctx.lineTo(canvas.width - padding, canvas.height - padding);\n  ctx.closePath();\n  ctx.fillStyle = color;\n  ctx.globalAlpha = 0.9;\n  ctx.fill();\n  ctx.globalAlpha = 1;\n}\n\n\/\/ Init\ncalcular();\n<\/script>\n<\/div>\n\n<script>\nconst observer = new ResizeObserver(() => {\n  parent.postMessage(\n    {\n      tipo: 'resize',\n      altura: document.documentElement.scrollHeight\n    },\n    '*' \/\/ \u2190 IMPORTANTE con WPML\n  );\n});\n\nwindow.addEventListener('load', () => {\n  observer.observe(document.documentElement);\n  observer.observe(document.body);\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Datos ahorro Mensualidad Aportaci\u00f3n inicial Anualidad Rentabilidad i La rentabilidad es una estimaci\u00f3n anual orientativa y puede variar en funci\u00f3n del mercado. 6%8%11% A\u00f1os 510152025303540 Expectativas Predicci\u00f3n a 35 a\u00f1os vista Resultado concuenta corriente \u2014 Resultado coninter\u00e9s compuesto \u2014 Comparativa<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1576","page","type-page","status-publish"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Calculadora Ahorro peri\u00f3dico - Estudi Mas\u00f3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/estudimaso.com\/es\/calculadora-ahorro-periodico\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Calculadora Ahorro peri\u00f3dico - Estudi Mas\u00f3\" \/>\n<meta property=\"og:description\" content=\"Datos ahorro Mensualidad Aportaci\u00f3n inicial Anualidad Rentabilidad i La rentabilidad es una estimaci\u00f3n anual orientativa y puede variar en funci\u00f3n del mercado. 6%8%11% A\u00f1os 510152025303540 Expectativas Predicci\u00f3n a 35 a\u00f1os vista Resultado concuenta corriente \u2014 Resultado coninter\u00e9s compuesto \u2014 Comparativa\" \/>\n<meta property=\"og:url\" content=\"https:\/\/estudimaso.com\/es\/calculadora-ahorro-periodico\/\" \/>\n<meta property=\"og:site_name\" content=\"Estudi Mas\u00f3\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-29T13:48:53+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/estudimaso.com\/es\/calculadora-ahorro-periodico\/\",\"url\":\"https:\/\/estudimaso.com\/es\/calculadora-ahorro-periodico\/\",\"name\":\"Calculadora Ahorro peri\u00f3dico - Estudi Mas\u00f3\",\"isPartOf\":{\"@id\":\"https:\/\/estudimaso.com\/es\/#website\"},\"datePublished\":\"2026-01-22T11:24:09+00:00\",\"dateModified\":\"2026-01-29T13:48:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/estudimaso.com\/es\/calculadora-ahorro-periodico\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/estudimaso.com\/es\/calculadora-ahorro-periodico\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/estudimaso.com\/es\/calculadora-ahorro-periodico\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inici\",\"item\":\"https:\/\/estudimaso.com\/es\/inicio\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Calculadora Ahorro peri\u00f3dico\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/estudimaso.com\/es\/#website\",\"url\":\"https:\/\/estudimaso.com\/es\/\",\"name\":\"Estudi Mas\u00f3\",\"description\":\"Arquitectura &amp; Finances\",\"publisher\":{\"@id\":\"https:\/\/estudimaso.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/estudimaso.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/estudimaso.com\/es\/#organization\",\"name\":\"Estudi Mas\u00f3\",\"url\":\"https:\/\/estudimaso.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/estudimaso.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/estudimaso.com\/wp-content\/uploads\/2025\/07\/Estudi-Maso-Arquitectura-Finances-1.png\",\"contentUrl\":\"https:\/\/estudimaso.com\/wp-content\/uploads\/2025\/07\/Estudi-Maso-Arquitectura-Finances-1.png\",\"width\":500,\"height\":500,\"caption\":\"Estudi Mas\u00f3\"},\"image\":{\"@id\":\"https:\/\/estudimaso.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/estudimaso_\/\",\"https:\/\/www.linkedin.com\/company\/estudimaso\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Calculadora Ahorro peri\u00f3dico - Estudi Mas\u00f3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/estudimaso.com\/es\/calculadora-ahorro-periodico\/","og_locale":"es_ES","og_type":"article","og_title":"Calculadora Ahorro peri\u00f3dico - Estudi Mas\u00f3","og_description":"Datos ahorro Mensualidad Aportaci\u00f3n inicial Anualidad Rentabilidad i La rentabilidad es una estimaci\u00f3n anual orientativa y puede variar en funci\u00f3n del mercado. 6%8%11% A\u00f1os 510152025303540 Expectativas Predicci\u00f3n a 35 a\u00f1os vista Resultado concuenta corriente \u2014 Resultado coninter\u00e9s compuesto \u2014 Comparativa","og_url":"https:\/\/estudimaso.com\/es\/calculadora-ahorro-periodico\/","og_site_name":"Estudi Mas\u00f3","article_modified_time":"2026-01-29T13:48:53+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/estudimaso.com\/es\/calculadora-ahorro-periodico\/","url":"https:\/\/estudimaso.com\/es\/calculadora-ahorro-periodico\/","name":"Calculadora Ahorro peri\u00f3dico - Estudi Mas\u00f3","isPartOf":{"@id":"https:\/\/estudimaso.com\/es\/#website"},"datePublished":"2026-01-22T11:24:09+00:00","dateModified":"2026-01-29T13:48:53+00:00","breadcrumb":{"@id":"https:\/\/estudimaso.com\/es\/calculadora-ahorro-periodico\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/estudimaso.com\/es\/calculadora-ahorro-periodico\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/estudimaso.com\/es\/calculadora-ahorro-periodico\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inici","item":"https:\/\/estudimaso.com\/es\/inicio\/"},{"@type":"ListItem","position":2,"name":"Calculadora Ahorro peri\u00f3dico"}]},{"@type":"WebSite","@id":"https:\/\/estudimaso.com\/es\/#website","url":"https:\/\/estudimaso.com\/es\/","name":"Estudi Mas\u00f3","description":"Arquitectura &amp; Finances","publisher":{"@id":"https:\/\/estudimaso.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/estudimaso.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/estudimaso.com\/es\/#organization","name":"Estudi Mas\u00f3","url":"https:\/\/estudimaso.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/estudimaso.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/estudimaso.com\/wp-content\/uploads\/2025\/07\/Estudi-Maso-Arquitectura-Finances-1.png","contentUrl":"https:\/\/estudimaso.com\/wp-content\/uploads\/2025\/07\/Estudi-Maso-Arquitectura-Finances-1.png","width":500,"height":500,"caption":"Estudi Mas\u00f3"},"image":{"@id":"https:\/\/estudimaso.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/estudimaso_\/","https:\/\/www.linkedin.com\/company\/estudimaso\/"]}]}},"_links":{"self":[{"href":"https:\/\/estudimaso.com\/es\/wp-json\/wp\/v2\/pages\/1576","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/estudimaso.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/estudimaso.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/estudimaso.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/estudimaso.com\/es\/wp-json\/wp\/v2\/comments?post=1576"}],"version-history":[{"count":12,"href":"https:\/\/estudimaso.com\/es\/wp-json\/wp\/v2\/pages\/1576\/revisions"}],"predecessor-version":[{"id":2053,"href":"https:\/\/estudimaso.com\/es\/wp-json\/wp\/v2\/pages\/1576\/revisions\/2053"}],"wp:attachment":[{"href":"https:\/\/estudimaso.com\/es\/wp-json\/wp\/v2\/media?parent=1576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}