<style>
.exel_tab3 {overflow:auto; max-width:1000px; margin:5px 0px; border:1px solid #777777;} 
.exel_tab3 td, .exel_tab3 th {padding: 10px; background-color:#eeeeee; color:#111111; min-width:130px;}
 
.exel_tab3 td:focus {padding:20px 10px; background: #dddddd !important}
.exel_tab3 td:empty:not(:focus):before {content: attr(data-text)}
 
.exel_tab3 #spalte111:after, .exel_tab3 #spalte882:after,.exel_tab3 #spalte779:after  {content: "Euro"; margin-left:3px;}
.exel_tab3 #spalte558:after, .exel_tab3 #spalte669:after {content: "%";}
.exel_tab3 #spalte444:after {content: "Tage"; margin-left:3px;}
.exel_tab3 #spalte222, .exel_tab3 #spalte333 {font: 13px Arial;}
 
.exel_tab3 input {box-shadow: none; width:auto;}
 
.exel_tab3 .VerzugTitel {background-color:#aaaaaa;}
.exel_tab3 .VerzugSignatur {background-position: center; height: 90px; background-image: url(https://files.homepagemodules.de/b104774/a_650_aa6cb60f.gif); background-size: contain; background-repeat: no-repeat; }
 
.Verzug {background: #dddddd; font: bold 13px Arial; margin:10px 20px 20px 20px; padding: 2px 20px !important; text-align: center; cursor:pointer;}
.Verzug:hover {background: #ffffff;}
</style>
 
<br>
<center>
<table width="100%" class="exel_tab3" border="1">
 
  <!-- Überschrift -->
  <tr><th colspan="10" class="Zinsrechner" style="background: #658ba8; text-align:center; font-size:24px;"><b>Verzugszinsenrechner</b><img title="Tabelle löschen" src="https://files.homepagemodules.de/b610439/a_1318_7d2ff334.png" style="float:right; width:22px; padding-right: 7%; cursor:pointer;" onclick="localStorage.removeItem('dataStorage3-spalte111'); localStorage.removeItem('dataStorage3-spalte222'); localStorage.removeItem('dataStorage3-spalte333'); localStorage.removeItem('dataStorage3-spalte444'); localStorage.removeItem('dataStorage3-spalte779'); localStorage.removeItem('radioStorage3_zins1'); localStorage.removeItem('radioStorage3_zins2'); localStorage.removeItem('radioStorage3_pausch'); location.reload();"></th></tr>
 
  <!-- Titel -->
  <tr style="background: #bbbbbb;"><th><h5></h5></th><th style="background: #ffffff;"><h5>Bitte ausfüllen</h5></th></tr>
 
  <!-- Zeile 1 -->
  <tr><td><a href="https://office.lexware.de/lexikon/soll-ist-versteuerung/" target="_blank">Soll-Besteuerung</a> = Rechnungsbetrag Brutto (mit USt.)<br><a href="https://office.lexware.de/lexikon/soll-ist-versteuerung/" target="_blank">Ist-Besteuerung </a>= Rechnungsbetrag Netto (ohne USt.)</td>
  <td id="spalte111" class="editable3" contenteditable style="background: #ffffff; cursor: pointer;" data-text="0"></td></tr>
 
  <!-- Zeile 2 -->
  <tr><td>Datum <a href="https://www.gesetze-im-internet.de/bgb/__286.html#:~:text=Wenn%20der%20Zeitpunkt%20des%20Zugangs,Empfang%20der%20Gegenleistung%20in%20Verzug." target="_blank">Verzugsbeginn</a> (Rechnungsdatum + vereinbartes Zahlungsziel)</td><td style="background: #ffffff;"><input id="spalte222" type="date"></td></tr>
 
  <!-- Zeile 3 -->
  <tr><td>Datum Verzugsende</td><td style="background: #ffffff;"><input id="spalte333" type="date"></td></tr>
 
  <!-- Zeile 4 -->
  <tr><td>Verzug (Säumnistage)</td><td id="spalte444" class="editable3" contenteditable style="cursor: pointer; padding: 10px;" data-text="0"></td></tr>
 
  <!-- Zeile 5 -->
  <tr><td>
    <input type="radio" id="spalte555" name="zins1" value="1" class="editable3" contenteditable checked> Handelsgeschäft (9% über Basiszins) <br />
    <input type="radio" id="spalte556" name="zins1" value="2" class="editable3" contenteditable> Verbrauchergeschäft (5% über Basiszins) <br />
  <td id="spalte558" style="background: #ffffff;"></td></tr>
 
  <!-- Zeile 6 -->
  <tr><td id="spalte661">Der <a href="https://www.bundesbank.de/de/bundesbank/organisation/agb-und-regelungen/basiszinssatz-607820" target="_blank">Basiszinssatz</a> wird halbjährlich jeweils zum 1. Januar und 1. Juli jedes Jahres durch die Deutsche Bundesbank angepasst.<br>
 
    <input type="radio" id="spalte662" name="zins2" value="1"> Basiszins 01.06.2016 - 31.12.2022 = - 0,88% <br />
    <input type="radio" id="spalte663" name="zins2" value="2"> Basiszins 01.01. - 30.06.2023 = 1,62% <br />
    <input type="radio" id="spalte664" name="zins2" value="3"> Basiszins ab 01.07.-31.12.2023 = 3,12% <br />
    <input type="radio" id="spalte665" name="zins2" value="4"> Basiszins 01.01. - 30.06.2024= 3,62% <br />
    <input type="radio" id="spalte667" name="zins2" checked value="5"> Basiszins ab 01.07.2024 = 3,37% </td>
    <td id="spalte669" style="background: #ffffff;"></td></tr>
 
  <!-- Zeile 7 -->
  <tr><td id="spalte775">Verzugspauschale: <a href="https://www.gesetze-im-internet.de/bgb/__288.html#:~:text=(1)%20Eine%20Geldschuld%20ist%20w%C3%A4hrend,neun%20Prozentpunkte%20%C3%BCber%20dem%20Basiszinssatz." target="_blank">Gem. § 288 Abs. 5</a> S. 1 BGB hat der Gläubiger einer Entgeltforderung bei Verzug des Schuldners, wenn dieser kein Verbraucher ist, einen Anspruch auf Zahlung einer Verzugspauschale in Höhe von 40 Euro.<br>
 
    <input type="radio" id="spalte776" name="pausch" value="1" checked> JA / <input type="radio" id="spalte777" name="pausch" value="2"> NEIN / <input type="radio" id="spalte778" name="pausch" value="3"> Individuell </td>
    <td id="spalte779" class="editable3" contenteditable style="background: #ffffff; cursor: pointer; padding:30px 10px;" data-text="0"></td></tr>
 
  <!-- Zeile 8 -->
  <tr><td style="background: #CEF6CE;">Ergebnis = Verzugszinsen + Verzugspauschale</td>
  <td id="spalte882" style="background: #CEF6CE; font-weight:bold;"></td></tr>
 
  <tr><th colspan="10" class="VerzugSignatur"></th></tr>
 
</table>
 
<!-- Lösch-und Speicherbutton -->
<input type="button" name="VerzugL" value="Löschen" class="Verzug" onclick="localStorage.removeItem('dataStorage3-spalte111'); localStorage.removeItem('dataStorage3-spalte222'); localStorage.removeItem('dataStorage3-spalte333'); localStorage.removeItem('dataStorage3-spalte444'); localStorage.removeItem('dataStorage3-spalte779'); localStorage.removeItem('radioStorage3_zins1'); localStorage.removeItem('radioStorage3_zins2'); localStorage.removeItem('radioStorage3_pausch'); location.reload();">
<br><br>
<h5> 
  Die Zinsberechnung erfolgt nach Banktagen (1 Monat = 30 Tage, 1 Jahr = 360 Tage). Diese Berechnung ist im Mahnverfahren üblich.<br> 
  Bei anderen Berechnungsmethoden können sie leicht abweichende Ergebnisse erhalten.<br>
  Das Zinsbeginn- und Zinsendedatum werden in die Berechnung einbezogen, d.h. für diese Tage werden ebenfalls Zinsen berechnet.
</h5><br>
<h5>Der Verzugszinserechner wurde mit bestem Wissen und Gewissen erstellt und programmiert. Für die Richtigkeit kann jedoch keine Gewähr übernommen werden!</h5><br>
<a href="https://www.hilfe-tricks-tipps.de/">Erstellt durch Arndt Richter, programmiert durch Wolfgang Andres © Hilfe, Tricks & Tipps</a><br><br>
  
</center>
 
<!-- Wenn jQuery nicht vorhanden, untere Zeile freigeben -->
<!-- <script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script> -->
<script>
function aktualisierung(){  
    /*** Mathe 1 - Sämnistage ***/
    if(($('#spalte222:empty').val() || $('#spalte333:empty').val()).length) {
      // Datum auslesen und in Millisekunden angeben (ab 1.1.1070)
      var eDate = new Date($('#spalte222').val());
      var sDate = new Date($('#spalte333').val());
 
    // Säumnistage anzeigen
      $('#spalte444').text((sDate-eDate)/86400000);
      $("#spalte444:contains(NaN)").text('0');
    }
 
    // Pauschale - Manuelle Eingabe
    $('#spalte444:focus').each(function(){
      $('#spalte222, #spalte333').val(''); 
    });
 
    /*** Mathe 2 ***/
    // Zins 1 anzeigen
    if($("#spalte555").is(":checked")) {
      $('#spalte558').text('9,00');
    } else if($("#spalte556").is(":checked")) {
      $('#spalte558').text('5,00');
    };
 
    /*** Mathe 3 ***/
    // Zins 2 anzeigen
    if($("#spalte662").is(":checked")) {
      $('#spalte669').text('-0,88');
    } else if($("#spalte663").is(":checked")) {
      $('#spalte669').text('1,62');
    } else if($("#spalte664").is(":checked")) {
      $('#spalte669').text('3,12');
    } else if($("#spalte665").is(":checked")) {
      $('#spalte669').text('3,62');
    } else if($("#spalte667").is(":checked")) {
      $('#spalte669').text('3,37');
    };
 
    /*** Mathe 4 ***/
    // Eingabefeld Pauschalbetrag
    $("#spalte779, #spalte775").on('click',function () {
      if($("#spalte778").is(":checked")) {
        $('#spalte779').text('').focus();
      };
    });
    // Umschaltung manuelle Eingabe (Pauschale)
      $('#spalte779:focus').each(function(){
      $('#spalte778').prop( "checked", true );
    });
 
    // Pauschale anzeigen
    if($("#spalte776").is(":checked")) {
      $('#spalte779').text('40');
    } else if($("#spalte777").is(":checked")) {
      $('#spalte779').text('0');
    };
	
    /*** Mathe 5 ***/
    // Auslesen der Eingaben, umwandeln von Kommatas in Punkte
    var num100 = $('#spalte558').text().replace(/,/, "."); 
    var num101 = $('#spalte669').text().replace(/,/, ".");
    var num400 = $('#spalte111').text().replace(/,/, "."); 
    var num500 = $('#spalte444').text().replace(/,/, "."); 
    var num600 = $('#spalte779').text().replace(/,/, "."); 
    
    // Eingabewerte auf zwei Stellen runden
    var math200 = Math.round((num100)*100)/100;
    var math201 = Math.round((num101)*100)/100;
    var math400 = Math.round((num400)*100)/100;
    var math700 = Math.round((num500)*100)/100;
    var math800 = Math.round((num600)*100)/100;
    
   // Formel: (Zins1 + Zins 2) x Rechnungsbetrag : 100 x Tage : 360 + Pauschale (2 Stellen nach dem Komma)
   var math600 = Math.round((((math200 + math201) * math400 / 100 * math700 / 360) + math800)*100)/100
 
   $('#spalte882').text(math600);
   $('#spalte882').html(function(index, link) {return link.replace(/\./g, ',');});
   $('#spalte882:contains(NaN)').html('<style>#spalte882:after {content: "" !important;} #spalte882 {background: #aa0000 !important; color:#ffffff !important; text-align:center !important;}</style>Falsche Eingabe</span>');
}
setInterval(aktualisierung, 1000);
 
  /*** Berechnung nach jedem  Tastenanschlag ***/
  $('.exel_tab3 td').on('click',function(){ 
    aktualisierung(); 
  });
 
  /*** Position Check-Button speichern ***/
  $('input[type=radio]').each(function() {
    var radios = $(this);
    var val = localStorage.getItem('radioStorage3_' + $(this).attr('name'));
    for(var i=0; i < radios.length; i++){
    if(radios[i].value == val){
      radios[i].checked = true;
    }
  }
 
  $(this).on('change', function(){
    localStorage.setItem('radioStorage3_' + $(this).attr('name'), $(this).val());
  });
});
 
/*** Werte der Tabelle speichern ***/
var editables3 = document.querySelectorAll(".editable3");
 
// Eintragungen sichern
editables3.forEach(el => {
  el.addEventListener("blur", () => {
    localStorage.setItem("dataStorage3-" + el.id, el.innerHTML);
  })
});
 
// Eintragungen auslesen
for (var key in localStorage) {
  if (key.includes("dataStorage3-")) {
    var id = key.replace("dataStorage3-","");
    $('#' + id).html(localStorage.getItem(key))
  }
}
 
// Kopieren und Einfügen ohne Formatierungen!
document.querySelector(".exel_tab2").addEventListener("paste", function(e) {
  e.preventDefault();
  var text = e.clipboardData.getData("text/plain");
  document.execCommand("insertText", false, text);
});
</script>