Stop Watch Timer with SVG Line Graph

In this example below you will see how to do a Stop Watch Timer with SVG Line Graph with some HTML / CSS and Javascript

WIP

Thumbnail
This awesome code was written by AlphaT7, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright AlphaT7 ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Stop Watch Timer with SVG Line Graph</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Stopwatch</title>
</head>
<body onload="show();">
	<div id='timer'>Time: <span id="time"></span></div>
	<input type="button" value="start" onclick="start();">
	<input type="button" value="stop" onclick="stop();">
	<input type="button" value="reset" onclick="reset();">
   <input type="button" value="test" onclick="test();">
  <input type="button" value="test2" onclick="test2();"><br><br>
  
<svg height="240" width="700" id='svg'>
<polyline id='polyline' points="0,240 40,25 60,40 80,120 120,140 200,180 500,120 600,5"
style="fill:none;stroke:#fff;stroke-width:3" />
  <circle cx="40" cy="25" r="5" stroke="black" stroke-width="1" fill="#fff" />
  <circle cx="60" cy="45" r="5" stroke="black" stroke-width="1" fill="#fff" />
  <circle cx="80" cy="120" r="5" stroke="black" stroke-width="1" fill="#fff" />
</svg>
  <div id='svg2'></div>
</body>
</html>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/svg.js/1.0.0-rc.8/svg.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/AlphaT7/stop-watch-timer-with-svg-line-graph-pbCuk */
body{
  background: blue;
  color: #fff;
}

#timer{
  font-size: 20pt;
}

#svg, #svg2{
  border: 1px solid #fff;
  overflow: hidden;
}

/*Downloaded from https://www.codeseek.co/AlphaT7/stop-watch-timer-with-svg-line-graph-pbCuk */
//	Simple example of using private variables
//
//	To start the stopwatch:
//		obj.start();
//
//	To get the duration in milliseconds without pausing / resuming:
//		var	x = obj.time();
//
//	To pause the stopwatch:
//		var	x = obj.stop();	// Result is duration in milliseconds
//
//	To resume a paused stopwatch
//		var	x = obj.start();	// Result is duration in milliseconds
//
//	To reset a paused stopwatch
//		obj.stop();
//
var	clsStopwatch = function() {
		// Private vars
		var	startAt	= 0;	// Time of last start / resume. (0 if not running)
		var	lapTime	= 0;	// Time on the clock when last stopped in milliseconds
 
		var	now	= function() {
				return (new Date()).getTime(); 
			}; 
 
		// Public methods
		// Start or resume
		this.start = function() {
				startAt	= startAt ? startAt : now();
			};
 
		// Stop or pause
		this.stop = function() {
				// If running, update elapsed time otherwise keep it
				lapTime	= startAt ? lapTime + now() - startAt : lapTime;
				startAt	= 0; // Paused
			};
 
		// Reset
		this.reset = function() {
				lapTime = startAt = 0;
			};
 
		// Duration
		this.time = function() {
				return lapTime + (startAt ? now() - startAt : 0); 
			};
	};
 
var x = new clsStopwatch();
var $time;
var clocktimer;
 
function pad(num, size) {
	var s = "0000" + num;
	return s.substr(s.length - size);
}
 
function formatTime(time) {
	var h = m = s = ms = 0;
	var newTime = '';
 
	h = Math.floor( time / (60 * 60 * 1000) );
	time = time % (60 * 60 * 1000);
	m = Math.floor( time / (60 * 1000) );
	time = time % (60 * 1000);
	s = Math.floor( time / 1000 );
	ms = time % 1000;
 
	newTime = pad(h, 2) + ':' + pad(m, 2) + ':' + pad(s, 2) + ':' + pad(ms, 3);
	return newTime;
}
 
function show() {
	$time = document.getElementById('time');
	update();
}
 
function update() {
  $time.innerHTML = formatTime(x.time());
  
}

function start() {
	clocktimer = setInterval("update()", 1);
   svgchart = setInterval("test2()", 1);
	x.start();
}
 
function stop() {
  x.stop();
	clearInterval(clocktimer);
}
 
function reset() {
	stop();
  x.reset();
	update();
}

/* --- S V G    F U N C T I O N S --- */

  var points = polyline.getAttribute("points");
  points += "10, 20";


  var svg = document.getElementById('svg');
  var point = svg.createPoint();
  point.x = 12;
  point.y = 200;
  var polyline= document.getElementById('polyline');
  polyline.points.appendItem(point);


/*var draw = SVG('svg2').size(700, 240);
var polyline = draw.polyline([[0,0], [100,50], [200,50]]).fill('none').stroke({ width: 1 });

function test(){
  polyline.mouseover(function() { alert('mouseover event') })
}

var x1 = 200;
var y1 = 50;

function test2(){
  
  x1 += 1

  polyline.plot([[0,0], [100,50], [200,50], [x1,y1]]);
}*/

Comments