Show analog data with jQuery Sparklines

<!doctype>
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
<script src='http://omnipotent.net/jquery.sparkline/1.6/jquery.sparkline.min.js'></script>
<script type="text/javascript">
$(function() {
    setInterval(function() {
        var t = new Date();
        var h = t.getHours() % 12;
        $('#ID_H').sparkline([h,12-h], {type:'pie', sliceColors:['#900','#ccc'], offset:-90, width:100, height:100} );
        var m = t.getMinutes();
        $('#ID_M').sparkline([m,60-m], {type:'pie', sliceColors:['#090','#ccc'], offset:-90, width:100, height:100} );
        var s = t.getSeconds();
        $('#ID_S').sparkline([s,60-s], {type:'pie', sliceColors:['#009','#ccc'], offset:-90, width:100, height:100} );
    }, 1000);
});
</script>
</head>
<body>
<p style="text-align:center;">
    <span id="ID_H"></span>
    <span id="ID_M"></span>
    <span id="ID_S"></span>
</p>
</body>
</html>

转载于:https://www.cnblogs.com/alli/archive/2011/06/22/2086723.html

来源：https://blog.csdn.net/weixin_38169562/article/details/99792616

标签

jquery

analog

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!