点击按钮时进度条背景闪烁的问题

2015-09-01 01:30:48 147 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

sinat_22002815 墨衍会员 · AI 创作全网分发关注 + 加入社区

emWin三大核心控件实战：进度条、单选按钮与滚动条详解在嵌入式GUI开发中，控件是实现人机交互的基础组件，它们负责将用户操作转化为系统指令。其核心原理在于事件驱动模型，通过消息机制在控件与应用程序间传递状态变化。掌握控件的设计哲学与API调用逻辑，对于构建稳定、高效的嵌入式界面具有重要技术价值，能显著提升开发效率与用户体验。常见的应用场景包括系统设置菜单、数据监控面板和长列表浏览等交互界面。本文聚焦emWin库中的进度条、单选按钮和滚动条三大核心控件，深入解析其创建、配置、消息处理与性能优化等实战要点，帮助开发者规避常见陷阱，实现专业级的嵌入式GUI设计。阅读详情

不说了，直接贴代码，求大神帮忙啊。
<div class="panel-body text-center">
<div class="panel-title">
<div id="day" class="col-xs-4" onclick="setType(1);">日</div>
<div id="month" class="col-xs-4" onclick="setType(2);">月</div>
<div id="year" class="col-xs-4" onclick="setType(3);">年</div>
<img src="${ctx}/images/x-icon-3.png" style="position:absolute; height:22px; margin-left:-30px; margin-top:-30px;" />
</div>
<div id="linear" class="panel-body text-center" style="height:200px;margin-bottom:35px;">
</div>
</div>
<style type="text/css">
.html5YuanBg{ height:200px; width:200px; margin:auto; position: relative; background:url(${ctx}/images/progressBar/bg.png) no-repeat; background-size:200px 200px; }
.html5YuanBg .yuanBg-d{ position:absolute; z-index:11;height:200px; overflow:hidden; width:100px;position:absolute; top:0px; left:100px;}
.html5YuanBg .yuanBg-d .zhebi{background:url(${ctx}/images/progressBar/bg-D.png);height:200px;background-size:200px 200px; width:200px;position:absolute; top:0px; left:-100px; z-index:10}
.html5YuanBg .yuanBg-d .zhizhen-d{height:200px; width:200px; background:url(${ctx}/images/progressBar/c3d.png);background-size:200px 200px; position:absolute; top:0px; left:-100px; z-index:9; }

.html5YuanBg .yuanBg-c{ position:absolute; z-index:10;height:200px; overflow:hidden; width:100px;position:absolute; top:0px; left:0px;}
.html5YuanBg .yuanBg-c .zhebi{ background:url(${ctx}/images/progressBar/bg-c.png) left top;background-size:200px 200px;height:200px; width:100px;position:absolute; top:0px; left:0px; z-index:10}
.html5YuanBg .yuanBg-c .zhizhen-c{height:200px; width:200px; background:url(${ctx}/images/progressBar/c3.png);background-size:200px 200px; position:absolute; top:0px; left:0px; z-index:9; }
.html5YuanBg .mybfb{ position:absolute; top:0px; left:0px; z-index:12; text-align:center; width:100%}
.html5YuanBg .mybfb div{ width:100%; padding-top:60px; font-size:48px; color:#7d7d7d;}
.html5YuanBg .mybfb p{ color:#b8b8b8; font-size:14px}
</style>
<script type="text/javascript">
var progress = function(i){
i=i.toFixed(2);
var leftTop = 225;
var leftButtom = 84;
var rightTop = 720;
var rightButtom = 586
var leftHalfCircle = leftTop - leftButtom;
var rightHalfCircle = rightTop - rightButtom;
var cBfb = i*leftHalfCircle / 50 + leftButtom;
var dBfb = i*rightHalfCircle / 50 - leftHalfCircle + rightButtom;
$(".mybfb div").html(i+'%');
if(cBfb<=leftTop){
$(".zhizhen-c").css('-webkit-transform','rotate'+'('+cBfb+'deg)');
}else{
$(".zhizhen-c").css('-webkit-transform','rotate'+'('+leftTop+'deg)');
}
if(i>50){
$(".zhizhen-d").css('-webkit-transform','rotate'+'('+dBfb+'deg)');
}else{
$(".zhizhen-d").css("display","none");
}
}
progress(${plan.percomplete*100});
</script>

...全文