added clock option

Countdown-Dateien/countdown.js

@@ -35,7 +35,15 @@ function cd_CountBack(secs)
   this.DisplayStr = this.DisplayStr.replace(/%%S%%/g,		this.Calcage(secs,1,60));
 
   document.getElementById(this.Div).innerHTML = this.DisplayStr;
-  if (this.CountActive) setTimeout(this.obj +".CountBack(" + (secs-1) + ")", 990);
+//  if (this.CountActive) setTimeout(this.obj +".CountBack(" + (secs-1) + ")", 990);
+  let obj = this;
+  if (obj.CountActive) {
+    setTimeout(function(){
+      obj.CountBack(secs-1)
+    },990
+    );
+  }
+
 }
 function cd_Setup()
 {

slideshow.html

@@ -12,6 +12,10 @@
 <input id="filePicker" type="file" multiple>
 <input id="datePicker" type="datetime-local" name="targetDate">
 <input id="delayPicker" type="number" name="delay" value=1000>
+<div>
+<input type="radio" name="modeSelector" value="countdown" checked> countdown<br>
+<input type="radio" name="modeSelector" value="clock"> clock<br>
+</div>
 <input id="startButton" type="button" value="Start!">
 
 
@@ -32,10 +36,7 @@
 </div>
 	<script language="javascript" src="Countdown-Dateien/countdown.js"></script>
 	<script language="javascript">		
-		var cd2			= new countdown('cd2');
-		cd2.Div			= "clock2";
-		cd2.TargetDate		= "6/6/2018 0:00 AM";
-        cd2.DisplayFormat = "<span class=\"clock\">%%D%%  %%H%% : %%M%% : %%S%%</span>"
+      	var cd2			= new countdown('cd2');
         //cd2.Setup()
 	</script>
 </body>

slideshow.js

@@ -104,12 +104,25 @@ let files = Array.from(document.getElementById("filePicker").files);
 let img = document.getElementById("mainImage");
 let delay = document.getElementById("delayPicker").value;
 let cache = makeCache(files,50);
+let mode = document.querySelector('input[name="modeSelector"]:checked').value;
 
 setTimeout(displayImage,delay,cache,img,delay);
 
 console.log(cd2)
-cd2.TargetDate = dateInput.value;
-cd2.Setup();
+if (mode==="countdown"){
+  cd2.Div                 = "clock2";
+  cd2.DisplayFormat = "<span class=\"clock\">%%D%%  %%H%% : %%M%% : %%S%%</span>"
+
+  cd2.TargetDate = dateInput.value;
+  cd2.Setup();
+}
+if (mode==="clock"){
+  cd2 = new clock("cd2");
+  cd2.Div  = "clock2";
+  cd2.DisplayFormat = "<span class=\"clock\">%%H%% : %%M%%</span>"
+  cd2.Setup();
+}
+
 
 };
 
@@ -132,3 +145,41 @@ tag.setAttribute('src', "testimages/1.jpg");
 tag.setAttribute('style', "display:block");
 document.getElementById("mainImage").replaceWith(tag)
 */
+function clock(obj)
+{
+          this.obj                = obj;
+          this.Div                = "clock";
+          this.BackColor          = "white";
+          this.ForeColor          = "black";
+          this.TargetDate         = "11/22/2013 5:00 AM";
+          this.DisplayFormat      = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
+          this.CountActive        = true;
+
+          this.DisplayStr;
+
+          this.Update              = cl_Update;
+          this.Setup              = cl_Setup;
+}
+
+function cl_Update()
+{   
+    let d = new Date()
+    this.DisplayStr = this.DisplayFormat.replace(/%%D%%/g,"");
+    this.DisplayStr = this.DisplayStr.replace(/%%H%%/g, d.getHours());
+    this.DisplayStr = this.DisplayStr.replace(/%%M%%/g, d.getMinutes());
+    this.DisplayStr = this.DisplayStr.replace(/%%S%%/g,"");
+
+    document.getElementById(this.Div).innerHTML = this.DisplayStr;
+    let obj = this;
+  if (obj.CountActive) {
+    setTimeout(function(){
+      obj.Update()
+    },1000
+    );
+  }
+}
+function cl_Setup()
+{
+          this.Update();
+}
+