博客一定要及时写,做完项目再写,有些细节就忘记了。
最终效果描述
选时、日、周分别画出相应时间段的统计曲线
代码
<div class="mui-row" id="menu">
<div class="mui-col-xs-3" id="min" style="background: white;">分</div>
<div class="mui-col-xs-3" id="hour">时</div>
<div class="mui-col-xs-3" id="day">日</div>
<div class="mui-col-xs-3" id="week">周</div>
</div>
<div class="chart" id="lineChart"></div>
<script>
//小函数,作用仅限于改变日周月的背景
function allgray() {
h("#min").css({
background: '#f7f7f7'
});
h("#hour").css({
background: '#f7f7f7'
});
h("#day").css({
background: '#f7f7f7'
});
h("#week").css({
background: '#f7f7f7'
});
}
h("#min").tap(function() {
allgray();
h("#min").css({
background: '#ffffff'
});
changeUnit("minute");
interval = setInterval(updateData, 1000);
});
h("#hour").tap(function() {
//改变背景颜色
allgray();
h("#hour").css({
background: '#ffffff'
});
//改变曲线
clearInterval(interval);
changeUnit("hour");
});
h("#day").tap(function() {
allgray();
h("#day").css({
background: '#ffffff'
});
clearInterval(interval);
changeUnit("day");
});
h("#week").tap(function() {
allgray();
h("#week").css({
background: '#ffffff'
});
clearInterval(interval);
changeUnit("week");
});
</script>
就这样