jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
149 lines (142 loc) • 6.32 kB
HTML
<html lang="en">
<head>
<meta name="keywords" content="jQuery Gauge, Gauge, Radial Gauge, jqxGauge" />
<meta name="description" content="In this example you can see how you can build analog clock with the jqxGauge." />
<title id='Description'>In this example you can see how you can build analog clock with the jqxGauge.</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdraw.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgauge.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var hours = new Date().getHours(),
minutes = new Date().getMinutes(),
seconds = new Date().getSeconds(),
digits = {
1: 'I',
2: 'II',
3: 'III',
4: 'IV',
5: 'V',
6: 'VI',
7: 'VII',
8: 'VIII',
9: 'IX',
10: 'X',
11: 'XI',
12: 'XII'
};
$('#minutes').jqxGauge({
ticksMinor: { visible: false },
ticksMajor: { visible: false },
labels: { visible: false },
animationDuration: 0,
min: 0, max: 12,
border: { style: { fill: 'none', stroke: 'none'}, showGradient: false },
caption: { value: '' },
colorScheme: 'scheme05',
style: { fill: 'none', stroke: 'none' },
pointer: { length: '70%', width: '2%' },
cap: { style: { fill: '#249dd6', stroke: '#249dd6'} },
startAngle: -90,
endAngle: 270,
value: (minutes / 60) * 12
});
$('#hours').jqxGauge({
ticksMinor: { visible: false },
ticksMajor: { visible: false },
labels: { visible: false },
animationDuration: 0,
min: 0, max: 12,
caption: { value: '' },
border: { style: { fill: 'none', stroke: 'none' }, showGradient: false },
colorScheme: 'scheme05',
pointer: { length: '50%', width: '3%' },
style: { fill: 'none', stroke: 'none' },
value: hours % 12 + (minutes / 60 * 11) / 12,
startAngle: -90,
endAngle: 270
});
$('#seconds').jqxGauge({
ticksMinor: {
interval: 0.2,
size: '3%',
style: {
fill: '#aaaaaa',
stroke: '#aaaaaa',
'stroke-width': '2px'
}
},
ticksMajor: {
interval: 1,
size: '8%',
style: {
fill: '#aaaaaa',
stroke: '#aaaaaa',
'stroke-width': '2px'
}
},
ticksDistance: '10%',
startAngle: -90,
endAngle: 270,
labels: {
distance: '28%',
interval: 1,
formatValue: function (val) {
if (val == 0) {
return '';
}
return digits[val];
}
},
pointer: { length: '80%', width: '1.7%' },
ranges: [],
caption: { value: 'jQWidgets', offset: [0, -30] },
animationDuration: 0, min: 0, max: 12,
border: { fill: 'none', stroke: 'none' },
colorScheme: 'scheme05',
style: { fill: '#ffffff', stroke: '#cccccc' },
value: (seconds / 60) * 12
});
setInterval(function () {
var seconds = $('#seconds').jqxGauge('value'),
minutes = $('#minutes').jqxGauge('value'),
hours = $('#hours').jqxGauge('value'),
ratio = 12 / 60;
seconds += ratio;
if (seconds > 12) {
seconds = ratio;
}
$('#seconds').jqxGauge('value', seconds);
if (seconds === ratio) {
minutes += ratio;
if (minutes >= 12) {
minutes = ratio;
}
$('#minutes').jqxGauge('value', minutes);
hours += 1 / 60;
if (hours > 12) {
hours = 1 / 60;
}
$('#hours').jqxGauge('value', hours);
}
}, 1000);
});
</script>
</head>
<body class='default'>
<div style="position: relative; height: 370px;">
<div style="position: absolute; left: 0px; top: 0px;" id='seconds'></div>
<div style="position: absolute; left: 0px; top: 0px;" id='hours'></div>
<div style="position: absolute; left: 0px; top: 0px;" id='minutes'></div>
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>