Probleme bei der Umsetzung eines Count-Ups

28.03.2018 17:32

Kersten
#1

Hallo zusammen!

Ich habe mir mal wieder einen Code geklaut (bei Codepen.io). Den habe ich minimal geändert und in Codepen läuft auch noch alles. Schön machen, wollte ich es dann erst bei Jimdo. Also einfach mal in ein Widget/HTML-Element eingefügt und... nix passiert. Der denkt und denkt.... aber zeigt nix an. Kann mir jemand sagen wie ich den Code ändern muss, damit das CountUp auch bei Jimdo läuft?

LG
Kersten.

Hier der Link auf meine (leere) Seite.
Und hier zu codepen.

Und nun noch der Code, so wie ich ihn bei mir eingefügt habe.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
<div id="counter"></div>
 
<script type="text/javascript">
 

<title>JavaScript CountUp Timer - Praveen Lobo</title>
<script type="text/javascript">
function CountUp(initDate, id) {
  this.beginDate = new Date(initDate);
  this.countainer = document.getElementById(id);
  this.numOfDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  this.borrowed = 0;
  this.years = 0; 
  this.months = 0; 
  this.days = 0;
  this.hours = 0; 
  this.minutes = 0; 
  this.seconds = 0;
  this.milliseconds = 0;
  this.updateNumOfDays();
  this.updateCounter();
}
 
CountUp.prototype.updateNumOfDays = function() {
  var dateNow = new Date();
  var currYear = dateNow.getFullYear();
  if ((((currYear % 4) === 0) && ((currYear % 100) !== 0)) || ((currYear % 400) === 0)) {
    this.numOfDays[1] = 29;
  }
  var self = this;
  setTimeout(function() {
    self.updateNumOfDays();
  }, (new Date((currYear + 1), 1, 2) - dateNow));
};
 
CountUp.prototype.datePartDiff = function(then, now, MAX) {
  var diff = now - then - this.borrowed;
  this.borrowed = 0;
  if (diff > -1) return diff;
  this.borrowed = 1;
  return (MAX + diff);
};
 
CountUp.prototype.calculate = function() {
  var currDate = new Date();
  var prevDate = this.beginDate;
  this.milliseconds = this.datePartDiff(prevDate.getMilliseconds(), currDate.getMilliseconds(), 1000);
  this.seconds = this.datePartDiff(prevDate.getSeconds(), currDate.getSeconds(), 60);
  this.minutes = this.datePartDiff(prevDate.getMinutes(), currDate.getMinutes(), 60);
  this.hours = this.datePartDiff(prevDate.getHours(), currDate.getHours(), 24);
  this.days = this.datePartDiff(prevDate.getDate(), currDate.getDate(), this.numOfDays[currDate.getMonth()]);
  this.months = this.datePartDiff(prevDate.getMonth(), currDate.getMonth(), 12);
  this.years = this.datePartDiff(prevDate.getFullYear(), currDate.getFullYear(), 0);
};
 
CountUp.prototype.addLeadingZero = function(value) {
  return value < 10 ? ("0" + value) : value;
};
 
CountUp.prototype.addLeadingZeroMillisecond = function(value) {
  if (value < 10) return ("00" + value);
  else if (value < 100) return ("0" + value);
  else return value;
};
 
CountUp.prototype.formatTime = function() {
  this.milliseconds = this.addLeadingZeroMillisecond(this.milliseconds);
  this.seconds = this.addLeadingZero(this.seconds);
  this.minutes = this.addLeadingZero(this.minutes);
  this.hours = this.addLeadingZero(this.hours);
};
 
CountUp.prototype.updateCounter = function() {
  this.calculate();
  this.formatTime();
  this.countainer.innerHTML =
    "<span class='years'>" + this.years + " " + (this.years == 1 ? "Jahr" : "Jahre") + "</span>" +
    "<span class='months'>" + this.months + " " + (this.months == 1 ? "Monat" : "Monate") + "</span>" +
    "<span class='days'>" + this.days + " " + (this.days == 1 ? "Tag" : "Tage") + "</span>" + "<br>" + "und" +
    "<span class='hours'>" + this.hours + " " + (this.hours == 1 ? "Stunde" : "Stunden") + "</span>" +
    "<span class='minutes'>" + this.minutes + " " + (this.minutes == 1 ? "Minute" : "Minuten") + "</span>" +
    "<span class='seconds'>" + this.seconds + " " + (this.seconds == 1 ? "Sekunde" : "Sekunden") + "</span>" +
    "<span class='milliseconds'>" + this.milliseconds + " " + (this.milliseconds == 1 ? "Milli-Sekunde" : "Milli-Sekunden") + "</span>" ;
  var self = this;
  setTimeout(function() {
    self.updateCounter();
  }, 1);
};
 
window.onload = function() {
  new CountUp('April 4, 2015 11:00:00', 'counter');
};
 
</script>
 
 

Antworten

Beitrag melden

31.03.2018 12:43 (zuletzt bearbeitet: 31.03.2018 12:59)

Kersten
#2

Kersten

Huhu!

Ich habe in den letzten Tagen alles mögliche versucht, diesen Count-Up in Jimdo zum Laufen zu bringen. Ich habe auch komplett andere Scripts probiert. Hat alles nix gebracht. Dat Dingen will einfach nich so wie ich wohl will!

Mit Mühe und Not habe ich es geschafft, einen Countdown in Jimdo zum Laufen zu bringen. Auch das war nicht so einfach. Von über 20 probierten Scripts haben satte 2 (!!!) auch in Jimdo funktioniert. Aus den beiden habe ich mir jetzt einen Countdown gebastelt der tut was und aussieht wie ich es gern hätte.

Wie gesagt habe ich auch an dem Count-Up weiter herum gebastelt. Von CSS habe ich ja schon keine Ahnung; aber von JavaScript noch viel weniger, weshalb ich den Part klauen muss. Ich habe keine Chance mir da was Eigenes zu bauen. Daher habe ich Stück für Stück gebastelt, damit er zumindest schon mal optisch zu meinem Countdown passt. Verzeiht bitte, wenn ich da grobe Anfängerfehler eingebaut habe.

Der derzeit aktuelle Count-Up-Code folgt gleich und ist außerdem auf meiner Testseite zu finden.
Der Urspungs-Code steht hier: https://codepen.io/heiswayi/pen/XmMjoN

Ich bin euch wirklich dankbar, wenn ihr mir erklären könnt, welches Problem Jimdo mit meinem (aber auch mit dem Ursprungs-)Code hat und was ich wo ändern muss. Ich verstehe es einfach nicht. Grundsätzlich müssten die Codes eigentlich richtig sein, denn sowohl auf codepen als auch auf dem Tryit-Editor funktionieren beide einwandfrei.

Mein Kopf raucht. Und ich weiß absolut nicht mehr weiter...
LG
Kersten

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald|Wire+One" rel="stylesheet" />
 
<div class="countup">
  <p class="ueberschrift">Es</p>
  <p class="untertext">ist nun</p>
  <div class="linie"></div>
  <div id="counter"></div>
  <div class="linie"></div>
  <p class="untertext">her.</p>
</div>
 
 

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 

<style>
.countup {
  background: #27313a;
  border-radius: 5px;
  font-family: "Wire One", sans-serif;
  letter-spacing: 0.25em;
  text-align: center;
  color: #ebebeb;
  -webkit-box-shadow: 3px 10px 25px 0px rgba(33, 33, 33, 0.75);
  -moz-box-shadow: 3px 10px 25px 0px rgba(33, 33, 33, 0.75);
  box-shadow: 3px 10px 25px 0px rgba(33, 33, 33, 0.75);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
 
.ueberschrift {
  font-size: 75px;
}
 
.linie {
  margin: auto;
  width: 70%;
  border-bottom: 1px solid #ebebeb;
}
 
.untertext {
  font-size: 25px;
  padding: 10px 0px 10px;
}
 
#counter {
  padding: 30px 0;
}
 
.counter1 {
  display: inline-block;
  width: 20%;
  font-size: 25px;
}
 
strong1 {
  color: #990066;
  font-size: 60px;
  font-weight: bold;
}
 
.counter2 {
  display: inline-block;
  width: 15%;
  font-size: 16px;
}
 
strong2 {
  color: #990066;
  opacity: 1;
  font-size: 30px;
  font-weight: bold;
}
 
</style>
 
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
 

<script>
    window.onload = function() {
  new CountUp("March 4, 2018 11:00:00", "counter");
};
 
function CountUp(initDate, id) {
  this.beginDate = new Date(initDate);
  this.countainer = document.getElementById(id);
  this.numOfDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  this.borrowed = 0;
  this.years = 0;
  this.months = 0;
  this.days = 0;
  this.hours = 0;
  this.minutes = 0;
  this.seconds = 0;
  this.milliseconds = 0;
  this.updateNumOfDays();
  this.updateCounter();
}
 
CountUp.prototype.updateNumOfDays = function() {
  var dateNow = new Date();
  var currYear = dateNow.getFullYear();
  if ((currYear % 4 === 0 && currYear % 100 !== 0) || currYear % 400 === 0) {
    this.numOfDays[1] = 29;
  }
  var self = this;
  setTimeout(function() {
    self.updateNumOfDays();
  }, new Date(currYear + 1, 1, 2) - dateNow);
};
 
CountUp.prototype.datePartDiff = function(then, now, MAX) {
  var diff = now - then - this.borrowed;
  this.borrowed = 0;
  if (diff > -1) return diff;
  this.borrowed = 1;
  return MAX + diff;
};
 
CountUp.prototype.calculate = function() {
  var currDate = new Date();
  var prevDate = this.beginDate;
  this.milliseconds = this.datePartDiff(
    prevDate.getMilliseconds(),
    currDate.getMilliseconds(),
    1000
  );
  this.seconds = this.datePartDiff(
    prevDate.getSeconds(),
    currDate.getSeconds(),
    60
  );
  this.minutes = this.datePartDiff(
    prevDate.getMinutes(),
    currDate.getMinutes(),
    60
  );
  this.hours = this.datePartDiff(prevDate.getHours(), currDate.getHours(), 24);
  this.days = this.datePartDiff(
    prevDate.getDate(),
    currDate.getDate(),
    this.numOfDays[currDate.getMonth()]
  );
  this.months = this.datePartDiff(prevDate.getMonth(), currDate.getMonth(), 12);
  this.years = this.datePartDiff(
    prevDate.getFullYear(),
    currDate.getFullYear(),
    0
  );
};
 
CountUp.prototype.addLeadingZero = function(value) {
  return value < 10 ? "0" + value : value;
};
 
CountUp.prototype.addLeadingZeroMillisecond = function(value) {
  if (value < 10) return "00" + value;
  else if (value < 100) return "0" + value;
  else return value;
};
 
CountUp.prototype.formatTime = function() {
  this.milliseconds = this.addLeadingZeroMillisecond(this.milliseconds);
  this.seconds = this.addLeadingZero(this.seconds);
  this.minutes = this.addLeadingZero(this.minutes);
  this.hours = this.addLeadingZero(this.hours);
};
 
CountUp.prototype.updateCounter = function() {
  this.calculate();
  this.formatTime();
  this.countainer.innerHTML =
 
    "<span class='counter1' 'years'><strong1>" +
    this.years +
    "</strong1><br />" +
    (this.years == 1 ? "Jahr " : "Jahre ") +
    "<br /></span>" +
 
    "<span class='counter1' 'months'><strong1>" +
    this.months +
    "</strong1><br />" +
    (this.months == 1 ? "Monat " : "Monate ") +
    "<br /></span>" +
 
    "<span class= 'counter1' 'days'><strong1>" +
    this.days +
    "</strong1><br />" +
    (this.days == 1 ? "Tag" : "Tage") +
    "<br /></span>" +
 
    "<br /><br /><br /><br />und<br /><br /><br />" +
 
    "<span class= 'counter2' 'hours'><strong2>" +
    this.hours +
    "</strong2><br />" +
    (this.hours == 1 ? "Stunde " : "Stunden ") +
    "<br /></span>" +
 
    "<span class= 'counter2' 'minutes'><strong2>" +
    this.minutes +
    "</strong2><br />" +
    (this.minutes == 1 ? "Minute " : "Minuten ") +
    "<br /></span>" +
 
    "<span class=  'counter2' 'seconds'><strong2>" +
    this.seconds +
    "</strong2><br />" +
    (this.seconds == 1 ? "Sekunde " : "Sekunden ") +
    "<br /></span>" +
 
    "<span class=  'counter2' 'milliseconds'><strong2>" +
    this.milliseconds +
    "</strong2><br />" +
    (this.milliseconds == 1 ? "Millisekunde " : "Millisekunden ") +
    "<br /></span>";
 
  var self = this;
  setTimeout(function() {
    self.updateCounter();
  }, 1);
};
</script>
 
 

Antworten

Beitrag melden

31.03.2018 20:07 (zuletzt bearbeitet: 31.03.2018 20:08)

az_
#3

az_

...wozu soll das gut sein? Armageddon?

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html

Antworten

Beitrag melden

03.04.2018 09:45 (zuletzt bearbeitet: 03.04.2018 09:46)

Kersten
#4

Kersten

Nee, az, für's Armageddon habe ich doch schon den Count-Down!

Ich bastele an einer Homepage für eine Zucht. Und der Wunsch, den es umzusetzen gilt, ist ein Count-Up ab Geburt des Nachwuchses; für's Alter also.

LG
Kersten.

Antworten

Beitrag melden

17.04.2018 12:38

Kersten
#5

Kersten

Huhu!

Hat keiner eine Idee, wie ich das ganze bei Jimdo zum Laufen bringen kann?

Schade... Ich habe es nämlich selber auch immer noch nicht geschafft...

Sonnige Grüße!
Kersten.