Skip to content

Instantly share code, notes, and snippets.

/index.html

Created August 4, 2016 06:02
Show Gist options
  • Save anonymous/1e5ee6a728d91ca0fc96b5f5044553ea to your computer and use it in GitHub Desktop.
Save anonymous/1e5ee6a728d91ca0fc96b5f5044553ea to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Aug 4, 2016.
    207 changes: 207 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,207 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <style id="jsbin-css">
    .clock {
    border: 1px solid black;
    width: 400px;
    height: 400px;
    position: relative;
    border-radius: 50%;
    background: white;
    }

    .hand {
    position: absolute;
    transform-origin: center bottom;
    transition: all 0.15s cubic-bezier(.75,.35,.63,1.56);
    }

    .second {
    background: red;
    width: 2px;
    height: 190px;
    left: 50%;
    bottom: 200px;
    margin-left: -1px;
    }

    .minute {
    background: steelblue;
    width: 10px;
    height: 150px;
    left: 50%;
    bottom: 200px;
    margin-left: -5px;
    }

    .hour {
    background: black;
    width: 18px;
    height: 100px;
    left: 50%;
    bottom: 200px;
    margin-left: -9px;
    }


    .digit {
    position: absolute;
    font-size: 2em;
    font-family: monospace;
    width: 2rem;
    height: 2rem;
    text-align: center;
    color: lightblue;
    }

    .d-12 {
    left: 50%;
    margin-left: -1rem;
    }
    .d-3, .d-9 {
    top: 50%;
    margin-top: -1rem;
    }

    .d-3 {
    right: 0
    }

    .d-9 {
    left: 0;
    }
    .d-6 {
    bottom: 0;
    left: 50%;
    margin-left: -1rem;
    }
    </style>
    </head>
    <body>
    <div class="clock">
    <div class="digit d-12">12</div>
    <div class="digit d-3">3</div>
    <div class="digit d-6">6</div>
    <div class="digit d-9">9</div>
    <div class="hour hand"></div>
    <div class="minute hand"></div>
    <div class="second hand"></div>
    </div>
    <script id="jsbin-javascript">
    setInterval(function(){

    var time = new Date();

    var second = time.getSeconds();
    var secondHand = second * 6;
    document.querySelector('.second').style.transform = 'rotate(' + secondHand + 'deg)';

    var minute = time.getMinutes();
    var minuteHand = minute * 6;
    document.querySelector('.minute').style.transform = 'rotate(' + minuteHand + 'deg)';

    var hour = time.getHours() % 12;
    var hourHand = hour * 30;
    document.querySelector('.hour').style.transform = 'rotate(' + hourHand + 'deg)';

    }, 1000);
    </script>


    <script id="jsbin-source-css" type="text/css">.clock {
    border: 1px solid black;
    width: 400px;
    height: 400px;
    position: relative;
    border-radius: 50%;
    background: white;
    }

    .hand {
    position: absolute;
    transform-origin: center bottom;
    transition: all 0.15s cubic-bezier(.75,.35,.63,1.56);
    }

    .second {
    background: red;
    width: 2px;
    height: 190px;
    left: 50%;
    bottom: 200px;
    margin-left: -1px;
    }

    .minute {
    background: steelblue;
    width: 10px;
    height: 150px;
    left: 50%;
    bottom: 200px;
    margin-left: -5px;
    }

    .hour {
    background: black;
    width: 18px;
    height: 100px;
    left: 50%;
    bottom: 200px;
    margin-left: -9px;
    }


    .digit {
    position: absolute;
    font-size: 2em;
    font-family: monospace;
    width: 2rem;
    height: 2rem;
    text-align: center;
    color: lightblue;
    }

    .d-12 {
    left: 50%;
    margin-left: -1rem;
    }
    .d-3, .d-9 {
    top: 50%;
    margin-top: -1rem;
    }

    .d-3 {
    right: 0
    }

    .d-9 {
    left: 0;
    }
    .d-6 {
    bottom: 0;
    left: 50%;
    margin-left: -1rem;
    }</script>

    <script id="jsbin-source-javascript" type="text/javascript">setInterval(function(){

    var time = new Date();

    var second = time.getSeconds();
    var secondHand = second * 6;
    document.querySelector('.second').style.transform = 'rotate(' + secondHand + 'deg)';

    var minute = time.getMinutes();
    var minuteHand = minute * 6;
    document.querySelector('.minute').style.transform = 'rotate(' + minuteHand + 'deg)';

    var hour = time.getHours() % 12;
    var hourHand = hour * 30;
    document.querySelector('.hour').style.transform = 'rotate(' + hourHand + 'deg)';

    }, 1000);</script></body>
    </html>
    74 changes: 74 additions & 0 deletions jsbin.gegoyarine.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,74 @@
    .clock {
    border: 1px solid black;
    width: 400px;
    height: 400px;
    position: relative;
    border-radius: 50%;
    background: white;
    }

    .hand {
    position: absolute;
    transform-origin: center bottom;
    transition: all 0.15s cubic-bezier(.75,.35,.63,1.56);
    }

    .second {
    background: red;
    width: 2px;
    height: 190px;
    left: 50%;
    bottom: 200px;
    margin-left: -1px;
    }

    .minute {
    background: steelblue;
    width: 10px;
    height: 150px;
    left: 50%;
    bottom: 200px;
    margin-left: -5px;
    }

    .hour {
    background: black;
    width: 18px;
    height: 100px;
    left: 50%;
    bottom: 200px;
    margin-left: -9px;
    }


    .digit {
    position: absolute;
    font-size: 2em;
    font-family: monospace;
    width: 2rem;
    height: 2rem;
    text-align: center;
    color: lightblue;
    }

    .d-12 {
    left: 50%;
    margin-left: -1rem;
    }
    .d-3, .d-9 {
    top: 50%;
    margin-top: -1rem;
    }

    .d-3 {
    right: 0
    }

    .d-9 {
    left: 0;
    }
    .d-6 {
    bottom: 0;
    left: 50%;
    margin-left: -1rem;
    }
    17 changes: 17 additions & 0 deletions jsbin.gegoyarine.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    setInterval(function(){

    var time = new Date();

    var second = time.getSeconds();
    var secondHand = second * 6;
    document.querySelector('.second').style.transform = 'rotate(' + secondHand + 'deg)';

    var minute = time.getMinutes();
    var minuteHand = minute * 6;
    document.querySelector('.minute').style.transform = 'rotate(' + minuteHand + 'deg)';

    var hour = time.getHours() % 12;
    var hourHand = hour * 30;
    document.querySelector('.hour').style.transform = 'rotate(' + hourHand + 'deg)';

    }, 1000);