D3 Examples - Clock - With and Without Animation

xxxxxxxxxx
 
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Clock using only Animation</title>
​
<!-- JavaScript Libraries //-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
​
<!-- CSS Style //-->
<link href="style.css" rel="stylesheet" type="text/css">
​
</head>
​
<body>
    <div class="container">
        <center><h3>With Animation</h3></center>
        <div id="clock_animation">
​
        </div>
    </div>
​
    <div class="container">
        <center><h3>Without Animation</h3></center>
        <div id="clock_no_animation">
​
        </div>
    </div>
</body>
​
<script type="text/javascript" src="main.js"></script>
<script>
​
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
​
    var config_animation = {
        animation: true,
        margin : {top: 0, right: 50, bottom: 0, left: 50},
        radius : 100,
        height: 300,
        width: 300,
        clock_stroke_color : "black",
        clock_stroke_width : 2,
        clock_fill_color : "#efefef",
        x : 150,
        y : 150,
        mh_x : 150,
        mh_y : 75,
        sh_x : 150,
        sh_y : 75,
        hh_x : 150,
        hh_y : 90,
        hh_interval : 1000*60*60*12,
        mh_interval : 1000*60*60,
        sh_interval : 1000*60,
        sh_start_angle : s*6,
        mh_start_angle : m*6,
        hh_start_angle : (h*60 + m)/2,
        sh_stroke_color : "black",
        sh_stroke_width : 1,
        mh_stroke_color : "black",
        mh_stroke_width : 2,
        hh_stroke_color : "black",
        hh_stroke_width : 2,
        dom_element : "#clock_animation"
    };
​
​
    var config_no_animation = {
        animation: false,
        margin : {top: 0, right: 50, bottom: 0, left: 50},
        radius : 100,
        height: 300,
        width: 300,
        clock_stroke_color : "black",
        clock_stroke_width : 2,
        clock_fill_color : "#efefef",
        x : 150,
        y : 150,
        mh_x : 150,
        mh_y : 75,
        sh_x : 150,
        sh_y : 75,
        hh_x : 150,
        hh_y : 90,
        hh_interval : 1000*60*60*12,
        mh_interval : 1000*60*60,
        sh_interval : 1000*60,
        sh_start_angle : s*6,
        mh_start_angle : m*6,
        hh_start_angle : (h*60 + m)/2,
        sh_stroke_color : "black",
        sh_stroke_width : 1,
        mh_stroke_color : "black",
        mh_stroke_width : 2,
        hh_stroke_color : "black",
        hh_stroke_width : 2,
        dom_element : "#clock_no_animation"
    };
​
    drawClock(config_animation);
    drawClock(config_no_animation);
​
</script>
</html>
    