Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/polymer.js"></script>
  <meta charset="utf-8">
  <title>Polymer Async Method Demo: Custom Clock</title>
</head>
<body>
​
<ts-clock></ts-clock>
​
<polymer-element name="ts-clock" attributes="counter">
    <template bind="{{clock}}">
        <style>
            .clock{
                display: inline-flex;
                justify-content: space-around;
                background: floralwhite;
                font-size: 2rem;
                font-family: serif;
            }
            .clock .hour,.clock .minute,.clock .second{
                color: white;
                padding: 1.5rem;
                text-shadow: 0px 2px black;
                box-shadow: 0px 47px 98px black inset;
            }
        </style>
        <div class="clock">
            <div class="hour">{{ clock.hour }}</div>
            <div class="minute">{{ clock.minute }}</div>
            <div class="second">{{ clock.second }}</div>
        </div>
    </template>
    <script>
        Polymer({
            ready:function(){
                this.updateClock()
            },
            updateClock: function(){
                var date = new Date();
                this.clock ={
                    hour : date.getHours(),
                    minute : date.getMinutes(),
                    second : date.getSeconds()
                };
                this.async(this.updateClock, null, 1000);
            }
        });
    </script>
</polymer-element>
​
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
saan1984pro
0viewers