Zeit und Differenz Zeit berechnen

[Guri]

Hallo, bin wieder da, komme nicht weiter von alleine,

ist folgenes, ich will die zehler in cirles form ausgeben lassen, vileicht gibt noch ein bessere und optiemirtes script, aber habe ich ein script gefunden, hier:

(function() {

  var requestAnimFrame = window.requestAnimationFrame  ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame  ||
      window.oRequestAnimationFrame  ||
      window.msRequestAnimationFrame  ||
      function (callback) {
        setTimeout(callback, 1000 / 60);
      },

  Circles = window.Circles = function(options) {
  var elId = options.id;
  this._el = document.getElementById(elId);

  if (this._el === null) return;

  this._radius  = options.radius || 10;
  this._duration  = options.duration === undefined ? 500 : options.duration;

  this._value  = 0;
     this._maxValue  = options.maxValue || 100;

  this._text  = options.text === undefined ? function(value){return this.htmlifyNumber(value);} : options.text;
  this._strokeWidth  = options.width  || 10;
  this._colors  = options.colors || ['#EEE', '#F00'];
     this._svg  = null;
     this._movingPath  = null;
     this._wrapContainer  = null;
  this._textContainer  = null;

     this._wrpClass  = options.wrpClass || 'circles-wrp';
     this._textClass  = options.textClass || 'circles-text';

  var endAngleRad  = Math.PI / 180 * 270;
  this._start  = -Math.PI / 180 * 90;
  this._startPrecise  = this._precise(this._start);
  this._circ  = endAngleRad - this._start;

  this._generate().update(options.value || 0);
  };

  Circles.prototype = {
  VERSION: '0.0.5',

  _generate: function() {

  this._svgSize  = this._radius * 2;
  this._radiusAdjusted = this._radius - (this._strokeWidth / 2);

      this._generateSvg()._generateText()._generateWrapper();

      this._el.innerHTML = '';
  this._el.appendChild(this._wrapContainer);

      return this;
  },

  _setPercentage: function(percentage) {
       this._movingPath.setAttribute('d', this._calculatePath(percentage, true));
       this._textContainer.innerHTML   =   this._getText(this.getValueFromPercent(percentage));
  },

  _generateWrapper: function() {
     this._wrapContainer   =   document.createElement('div');
       this._wrapContainer.className = this._wrpClass;
       this._wrapContainer.style.position   =   'relative';
       this._wrapContainer.style.display   =   'inline-block';

       this._wrapContainer.appendChild(this._svg);
       this._wrapContainer.appendChild(this._textContainer);

       return this;
  },

  _generateText: function() {

       this._textContainer = document.createElement('div');
       this._textContainer.className = this._textClass;

       var style   =   {
         position:  'absolute',
         top:  0,
         left:  0,
         textAlign:  'center',
         width:  '100%',
         fontSize:  (this._radius * .7) + 'px',
         height:  this._svgSize + 'px',
         lineHeight: this._svgSize + 'px'
       };

       for(var prop in style) {
         this._textContainer.style[prop]   =   style[prop];
  }

      this._textContainer.innerHTML   =   this._getText(0);
      return this;
  },

     _getText: function(value) {
       if (!this._text) return '';

       if (value === undefined) value = this._value;

       value = parseFloat(value.toFixed(2));

       return typeof this._text === 'function' ? this._text.call(this, value) : this._text;
     },

  _generateSvg: function() {

      this._svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
      this._svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
      this._svg.setAttribute('width', this._svgSize);
      this._svg.setAttribute('height', this._svgSize);

      this._generatePath(100, false, this._colors[0])._generatePath(1, true, this._colors[1]);

      this._movingPath = this._svg.getElementsByTagName('path')[1];

      return this;
  },

  _generatePath: function(percentage, open, color) {
     var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
       path.setAttribute('fill', 'transparent');
       path.setAttribute('stroke', color);
       path.setAttribute('stroke-width', this._strokeWidth);
       path.setAttribute('d',  this._calculatePath(percentage, open));

       this._svg.appendChild(path);

       return this;
  },

  _calculatePath: function(percentage, open) {
  var end  = this._start + ((percentage / 100) * this._circ),
  endPrecise = this._precise(end);
  return this._arc(endPrecise, open);
  },

  _arc: function(end, open) {
  var endAdjusted = end - 0.001,
  longArc  = end - this._startPrecise < Math.PI ? 0 : 1;

  return [
  'M',
  this._radius + this._radiusAdjusted * Math.cos(this._startPrecise),
  this._radius + this._radiusAdjusted * Math.sin(this._startPrecise),
  'A', // arcTo
  this._radiusAdjusted, // x radius
  this._radiusAdjusted, // y radius
  0, // slanting
  longArc, // long or short arc
  1, // clockwise
  this._radius + this._radiusAdjusted * Math.cos(endAdjusted),
  this._radius + this._radiusAdjusted * Math.sin(endAdjusted),
  open ? '' : 'Z' // close
  ].join(' ');
  },

  _precise: function(value) {
  return Math.round(value * 1000) / 1000;
  },

     /*== Public methods ==*/

     htmlifyNumber: function(number, integerPartClass, decimalPartClass) {

       integerPartClass = integerPartClass || 'circles-integer';
       decimalPartClass = decimalPartClass || 'circles-decimals';

       var parts = (number + '').split('.'),
        html  = '<span class="' + integerPartClass + '">' + parts[0]+'</span>';

       if (parts.length > 1) {
  html += '.<span class="' + decimalPartClass + '">' + parts[1].substring(0, 2) + '</span>';
  }
       return html;
     },

     updateRadius: function(radius) {
      this._radius = radius;

       return this._generate().update(true);
     },

  updateWidth: function(width) {
      this._strokeWidth = width;

      return this._generate().update(true);
  },

  updateColors: function(colors) {
       this._colors = colors;

       var paths = this._svg.getElementsByTagName('path');

       paths[0].setAttribute('stroke', colors[0]);
       paths[1].setAttribute('stroke', colors[1]);

    return this;
  },

     getPercent: function() {
    return (this._value * 100) / this._maxValue;
     },

     getValueFromPercent: function(percentage) {
    return (this._maxValue * percentage) / 100;
     },

  getValue: function()
  {
     return this._value;
  },

   getMaxValue: function()
   {
    return this._maxValue;
   },

     update: function(value, duration) {
      if (value === true) {//Force update with current value
        this._setPercentage(this.getPercent());
        return this;
      }

      if (this._value == value || isNaN(value)) return this;
  if (duration === undefined) duration = this._duration;

      var self  = this,
        oldPercentage = self.getPercent(),
        delta  = 1,
        newPercentage, isGreater, steps, stepDuration;

      this._value = Math.min(this._maxValue, Math.max(0, value));

      if (!duration) {//No duration, we can't skip the animation
        this._setPercentage(this.getPercent());
        return this;
      }

      newPercentage  = self.getPercent();
      isGreater  = newPercentage > oldPercentage;

      delta  += newPercentage % 1; //If new percentage is not an integer, we add the decimal part to the delta
      steps  = Math.floor(Math.abs(newPercentage - oldPercentage) / delta);
      stepDuration  = duration / steps;


      (function animate(lastFrame) {
    if (isGreater)
        oldPercentage += delta;
    else
        oldPercentage -= delta;

    if ((isGreater && oldPercentage >= newPercentage) || (!isGreater && oldPercentage <= newPercentage))
    {
         requestAnimFrame(function(){ self._setPercentage(newPercentage); });
         return;
        }

        requestAnimFrame(function() { self._setPercentage(oldPercentage); });

        var now  = Date.now(),
          deltaTime = now - lastFrame;

        if (deltaTime >= stepDuration) {
          animate(now);
  } else {
          setTimeout(function() {
          animate(Date.now());
          }, stepDuration - deltaTime);
        }

      })(Date.now());

      return this;
     }
  };

  Circles.create = function(options) {
  return new Circles(options);
  };
})();

functioniert wunderbar mit obigen scripten, nur die 0 geht verloren, zeigt jede belibige zahl aber keine 0 vor dem zahl, hier:

  var myCircle = Circles.create({
     id:  'circles',
     radius:  60,
     value:  00,
     maxValue:  60,
     width:  10,
     text:  function(value){return value + 's.';},
     colors:  ['#D3B6C6', '#4B253A'],
     duration:  0,
     wrpClass:  'circles-wrp',
     textClass:  'circles-text'
   })

bei value zeigt die ausgabe, und immer die 0 vor 0 oder eine andere zahl 0 verloren geht, könnte von alleine nicht lösen, daswegen ich bitte um eure hilfe, ich bedanke mich im voraus für jede hilfe, viele grüße Guri.

 

[Sempervivum]

Ganz einfach: In der Callback-Funktion kannst Du den Wert beliebig modifizieren:

var myCircle = Circles.create({
   id: 'circles',
   radius: 60,
   value: 00,
   maxValue: 60,
   width: 10,
   text: function (value) { if (value < 10) value = '0' + value;
                                        return value + 's.'; },
   colors: ['#D3B6C6', '#4B253A'],
   duration: 0,
   wrpClass: 'circles-wrp',
   textClass: 'circles-text'
});

 

[Guri]

Es war einfach, vielen vielen Dank Sempervivum.​

Jetz will ich zum nechten schritt, ich habe sogar geschaft, aber geht bestimmt einfach, so ist meine lösung:

var myCircle = Circles.create({
     id:  'circles1',
     radius:  25,
     value:  stunden,
     maxValue:  60,
     width:  5,
     text:  function (value) { if (value < 10) value = '0' + value; return value + 's.'; },
     colors:  ['#FF0', '#F00'],
     duration:  0,
     wrpClass:  'circles-wrp',
     textClass:  'circles-text'
   })

var myCircle = Circles.create({
     id:  'circles2',
     radius:  25,
     value:  minuten,
     maxValue:  60,
     width:  5,
     text:  function (value) { if (value < 10) value = '0' + value; return value + 'm.'; },
     colors:  ['#FF0', '#F00'],
     duration:  0,
     wrpClass:  'circles-wrp',
     textClass:  'circles-text'
   })

var myCircle = Circles.create({
     id:  'circles3',
     radius:  25,
     value:  sekunden,
     maxValue:  60,
     width:  5,
     text:  function (value) { if (value < 10) value = '0' + value; return value + 's.'; },
     colors:  ['#FF0', '#F00'],
     duration:  0,
     wrpClass:  'circles-wrp',
     textClass:  'circles-text'
   })

Es funktioniert, aber mit disem code brauche ich 3x ID in html, so:

<div id="circles1"></div>
<div id="circles2"></div>
<div id="circles3"></div>

Aber ich will in ein ID, und viele eingeschaften sind gleich kann man sparen, irgendnwie kann man deffiniern und optiemieren,

3x brauche die value 1x für stunden 1x für minuten und 1x für sekunden
und 2 mal maxValue 2x für sekunden und minuten und 1x für stunden,
sonst bleibt alles gleich,

wie optimiere alles und wie bringe alle 3 in ein ID, so:

<div id="circles"></div>

und als ausgabe in ID, so:

document.getElementById("circles").innerHTML = stunden + minuten + sekunden;

ich bedanke mich im Voraus für die Hilfe, viele Grüße Guri.​

 

[Sempervivum]

Wenn Du drei Kreise haben willst, wirst Du wohl nicht daran vorbei kommen, drei Divs anzulegen und dreimal die Funktion aufzurufen. Oder Du legst die Parameter in einem Array ab und rufst die Funktion in einer Schleife auf. Aber ich finde, bei drei Aufrufen lohnt sich das noch nicht.
Oder Du schreibst eine Wrapper-Funktion nur mit den veränderlichen Parametern ID, Wert, Maximalwert und Einheit und rufst diese dann dreimal auf.
Oder willst Du nur einen Kreis haben mit der ganzen Uhrzeit?
BTW: Ich meine, bei den Stunden muss der Maximalwert 24 betragen.

 

[Guri]

Ja ich will 3 kreise haben so wie hir in beispiel bild:

das stimmt bei stunden habe ich mich vertan sollte 24 und nicht 60 sein,
und mit Array, Schleifen, Parameter usw. kenne ich mich nicht aus, habe ich keine iden.

 

[Sempervivum]

Dann zeige ich dir mal die Lösung mit der Wrapperfunktion:

function wrapCircles (idc, val, maxVal, dim) {
    var myCircle = Circles.create({
         id:  idc,
         radius:  25,
         value:  val,
         maxValue: maxVal,
         width:  5,
         text:  function (value) { if (value < 10) value = '0' + value; return value + dim; },
         colors:  ['#FF0', '#F00'],
         duration:  0,
         wrpClass:  'circles-wrp',
         textClass:  'circles-text'
       });
       return myCircle;
    }
var myCircleStd = wrapCircles ('circles1', stunden, 24, 'std.');
var myCircleMin = wrapCircles ('circles2', minuten, 60, 'min.');
var myCircleSek = wrapCircles ('circles3', sekunden, 60, 'sek.');

Ist schon viel kompakter, nicht wahr?
Wenn Du dich so intensiv mit Skripts beschäftigst, würde ich dir allerdings empfehlen, Javascript zu lernen.

 

[Guri]

Vielen Dank, es funktioeniert mit 3 DIVs Perfekt,

in bezug zu lernen JS habe es versucht, hat nicht geklapt, habe sogar DVDs gekauft von V2B hat trozdem nicht geklapt,
ich wollte Web-Programmierer und Web-Gestalter werden hat leider nicht funtioniert, schade,
und was brauche ich für mich selber so kleinigeiten suche mich hilfe in internet oder in foren und meistens finde ich es,

aber interesiert mich trozdem, wie realiesirt man mit ein DIV, vermute ich mit array, for schleife, length und function,

es könnte so sein:

myArray = [ irgendwas hier kommt ]
for (var i = 0; i <= circles.length;  i++) {
irgendwas hier kommt bestimmt
}
function ( ) {
irgendwas hier kommt auch
}
document.getElementById("circles").innerHTML = stunden + minuten + sekunden;

es wurde das Projekt alles raliesiert wie habe mich gewünscht, natürlich mit deine hilefe, ich sage noch mal vieln Dank und Respekt, viele Grüße Guri.

 

[Sempervivum]

Schade, dass deine Versuche, JS zu lernen, nicht erfolgreich waren. Vielleicht waren DVDs nur die falschen Medien. Ich persönlich komme am besten mit Online-Anleitungen zurecht.
Das ganze Skript mit dem Kreis basiert darauf, dass es ein Kontainer ist. Es wäre sehr aufwändig, es umzustellen und dann nicht mehr flexibel. IMO ist es aber kein Problem mit mehreren DIVs und Instanzen des Skripts zu arbeiten.
Dein Ansatz mit dem Array ist aber gar nicht verkehrt. Man müsste die variablen Parameter hineinschreiben und dann in einer Schleife das Skript aufrufen:

myArray = [{idc: 'circle1', val: stunden, maxVal: 24, dim: 'std.'}, // usw.
var myCircles = [];
for (var i = 0; i <= myArray.length;  i++) {   
    myCircles[i] = Circles.create({
         id:  myArray[i].idc,
         radius:  25,
         value: myArray[i].val,
         maxValue: myArray[i].maxVal,
         width:  5,
         text:  function (value) { if (value < 10) value = '0' + value; return value + myArray[i].dim; },
         colors:  ['#FF0', '#F00'],
         duration:  0,
         wrpClass:  'circles-wrp',
         textClass:  'circles-text'
       });
}

Aber, wie gesagt, ich finde, bei drei Instanzen lohnt sich das noch nicht richtig. Man könnte auch die Divs mit Javascript erzeugen:

var currentDiv[i] = document.createElement("div");
currentDiv[i].id = "circle" + i;
currentDiv[i].height = 120;
currentDiv[i].width = 120;
document.body.appendChild(currentDiv);

Siehe hier:
http://www.html-seminar.de/javascript-dom-eingreifen.htm
Der Eintrag idc im Array kann dann entfallen. Geht analog auch in der Wrapper-Funktion.
Du siehst, beim Programmieren gibt es fast immer mehrere Wege, die zum Ziel führen, hier das Array und die Wrapperfunktion.

 

[Guri]

Vielen vielen Danke ist alles in Ordnung, ich werde mit 3 DIVs erledigen,
jetzt sind untereinandre, ich werde alle 3 in ein Kontainer packen und floten lassen per CSS, und dann werden die 3 nebeneinandere, und ist die ganze sache erledigt,
noch mal vielen vielen Dank und viele Grüße Guri.

 

[Sempervivum]

Nachdem wir uns so intensiv damit beschäftigt haben, würde es mich interessieren, was das für ein Projekt ist, an dem Du arbeitest. Würdest Du vielleicht mal die URl posten, wenn es fertig ist?