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>
        <link href="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/css" />
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>timer example</title>
    </head>
    <body>
        <div data-role="page">
            <div data-role="content" id="content">
                <input type="button" value="Add item to list" onclick="appendToList()" />
​
                <ul id='list' data-role='listview' data-inset='true'></ul>
            </div>
            <!-- /content -->
        </div>
        <!-- /page -->
    </body>
</html>
 
.timera {
    display: block;
    height: 65px;
    width: 65px;
    line-height: 65px;
    -moz-border-radius: 35px; /* or 50% */
    border-radius: 35px; /* or 50% */
    background-color: #7B982E!important;
    color: white;
    text-align: center;
    font-size: 1.5em;
}
​
.timer {
    display: block !important;
    height: 65px !important;
    width: 65px !important;
    -moz-border-radius: 35px !important;
    /* or 50% */
    border-radius: 35px !important;
    /* or 50% */
    opacity: 0.9 !important;
    filter: alpha(opacity=90)!important;
    /* For IE8 and earlier */
    background-color: #7B982E!important;
    color: white!important;
    text-decoration: none!important;
    /*top:55px!important;*/
    /*left: 140px!important;*/
}
.pietimer {
    position:relative;
    font-size: 200px;
    width:1em;
    height:1em;
    float: left;
}
.pietimer > .percent {
    position: absolute;
    top: 1.05em;
    left: 0;
    width: 3.33em;
    font-size: 0.3em;
    text-align:center;
    display: none;
    z-index:10;
    font-weight:bold;
}
.pietimer > .slice {
    position:absolute;
    width:1em;
    height:1em;
    clip:rect(0px, 1em, 1em, 0.5em);
}
.pietimer > .slice.gt50 {
    clip:rect(auto, auto, auto, auto);
}
.pietimer > .slice > .pie {
    position:absolute;
    width:0.8em;
    /* 1 - (2 * border width) */
    height:0.8em;
    /* 1 - (2 * border width) */
    clip:rect(0em, 0.5em, 1em, 0em);
    -moz-border-radius:0.5em;
    -webkit-border-radius:0.5em;
    border-radius:0.5em;
}
.pietimer > .slice > .pie.fill {
    -moz-transform:rotate(180deg) !important;
    -webkit-transform:rotate(180deg) !important;
    -o-transform:rotate(180deg) !important;
    transform:rotate(180deg) !important;
}
.pietimer.fill > .percent {
    display: none;
}
.pietimer.fill > .slice > .pie {
    border: transparent;
    background-color: #c0c0c0;
    width:1em;
    height:1em;
}
 
var listCreated = false;
​
// adds items to the list
function appendToList() {
​
    //Create the listview if not created
    if (!listCreated) {
        listCreated = true;
    }
    $("#list").append("<li><a><div class='timera' onclick='$(this).addClass(\"timer\");runTimer(this);'>0</div></a></li>");
    $("#list").listview("refresh");
​
}
​
function runTimer(obj) {
    var pt = new pietimer(obj);
    var options = {
        timerSeconds: 5,
        color: '#ccc',
        fill: '#ccc',
        showPercentage: true,
        callback: function () {
            console.log("callback");
            clearInterval($(obj).data('pietimer').timer);
            // alert("yahoo, timer is done!");
            pt.reset();
            $(obj).find('.percent').html(0);
        }
    };
    pt.init(options);
}
​
/***** PIETIMER OBJECT BELOW *****/
// pietimer object independant unbound from jQuery
function pietimer(obj) {
    var _o = obj;
​
    this.getObject = function () {
        return _o;
    };
​
    this.init = function (options) {
​
        var state = {
            timer: null,
            timerSeconds: 60,
            callback: function () {
            },
            timerCurrent: 0,
            showPercentage: false,
            fill: false,
            color: '#CCC'
        };
​
        state = $.extend(state, options);
​
        var $this = $(_o);
        var data = $this.data('pietimer');
        if (!data) {
            $this.addClass('pietimer');
            $this.css({
                fontSize: $this.width()
            });
            $this.data('pietimer', state);
            if (state.showPercentage) {
                $this.find('.percent').show();
            }
            if (state.fill) {
                $this.addClass('fill');
            }
            this.start();
        }
    };
    this.stopWatch = function () {
        var data = $(_o).data('pietimer');
        if (data) {
            var seconds = (data.timerFinish - (new Date().getTime())) / 1000;
            if (seconds <= 0) {
                clearInterval(data.timer);
                this.drawTimer(100);
                data.callback();
            } else {
                var percent = 100 - ((seconds / (data.timerSeconds)) * 100);
                this.drawTimer(percent);
            }
        }
    };
    this.drawTimer = function (percent) {
        $this = $(_o);
        var data = $this.data('pietimer');
        if (data) {
            $this.html('<div class="percent"></div><div class="slice' + (percent > 50 ? ' gt50"' : '"') + '><div class="pie"></div>' + (percent > 50 ? '<div class="pie fill"></div>' : '') + '</div>');
            var deg = 360 / 100 * percent;
            $this.find('.slice .pie').css({
                '-moz-transform': 'rotate(' + deg + 'deg)',
                '-webkit-transform': 'rotate(' + deg + 'deg)',
                '-o-transform': 'rotate(' + deg + 'deg)',
                'transform': 'rotate(' + deg + 'deg)'
            });
            var secs = (data.timerSeconds) * ((100 - percent) / 100); /*NEW*/
            $this.find('.percent').html(Math.round(secs) + ''); /*Changed*/
            if (data.showPercentage) {
                $this.find('.percent').show();
            }
            if ($this.hasClass('fill')) {
                $this.find('.slice .pie').css({
                    backgroundColor: data.color
                });
            } else {
                $this.find('.slice .pie').css({
                    borderColor: data.color
                });
            }
        }
    };
    this.start = function () {
        console.log('starting');
        var data = $(_o).data('pietimer');
        if (data) {
            data.timerFinish = new Date().getTime() + (data.timerSeconds * 1000);
            this.drawTimer(0);
            data.timer = setInterval(function (o) {
                o.stopWatch();
            }, 50, this);
            console.log(data.timer);
        }
    };
    this.reset = function () {
        var data = $(this).data('pietimer');
        if (data) {
            clearInterval(data.timer);
            this.drawTimer(0);
        }
    };
}
Output

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

Dismiss x
public
Bin info
rjurdpro
0viewers