【发布时间】:2020-06-10 05:08:52
【问题描述】:
我有 javascript 代码:
</script>
<script type="text/javascript">
var vehicles = {};
var locations = ["1A","1D","2A","2B","2C","2D"];
$(document).ready(function(){
$(".model1").hide();
setInterval(function() {get_data();}, 5000);
});
function get_data()
{
for(var i = 201;i<=217;i++){
var sensors = new Array();
var temp = Math.ceil(Math.random()*50)-20;
var pres = Math.ceil(Math.random()*40)+100;
for(var j = 0;j<locations.length;j++){
if(pres!=100){
pres += Math.ceil(Math.random()*10)-5;
temp += Math.ceil(Math.random()*6)-3;
}else{
pres = 0;
temp = 0;
}
var highPres = pres>140;
var lowPres = pres<100;
var highTemp = temp>=75;
var lowBattery = Math.ceil(Math.random()*80)<2;
sensors.push({location:locations[j],pres:pres,temp:temp,lowPres:lowPres,highPres:highPres,highTemp:highTemp,lowBattery:lowBattery,lowPresAlarm:100,highPresAlarm:140,highTempAlarm:80});
}
cars[i] = {code:i,sensors:sensors};
}
showView1();
}
function showView1(){
for(var carCode in cars){
var car = $(".model1:first").clone();
var carData = cars[carCode];
for(var j = 0;j<carData.sensors.length;j++){
var sensorData = carData.sensors[j];
if(sensorData.pres!=0&&sensorData.temp!=0){
car.find("div[location='"+sensorData.location+"'] div:first").html(sensorData.pres);
car.find("div[location='"+sensorData.location+"'] div:last").html(sensorData.temp);
}
if(sensorData.highPres || sensorData.lowPres || sensorData.highTemp){
car.find("div[location='"+sensorData.location+"']").attr("class","tire-red");
}else if(sensorData.lowBattery){
car.find("div[location='"+sensorData.location+"']").attr("class","tire-yellow");
}
}
car.appendTo($(document.body)).show();
car.find("div:first").panel({
title:"Truck: " + carCode,
tools: [
{
handler:function(){
var car_code = $(this).parent().parent().find("div[class='panel-title']").html();
}
}]
});
}
}
</script>
</head>
这个脚本使用easyui和jquery,它基于下面的html代码创建克隆,我想每5秒执行一次get_data函数,每次屏幕清晰并生成新数据,但上面的脚本将新数据附加到prevoius数据,如何清屏再执行get_data函数?
<body >
<div style="float: left;padding: 5px;" class="model1">
<div style="width:210px;height:210px;padding:8px;">
<div style="width: 100%;height: 70px;background: url(static/images/axel.jpg) no-repeat center;background-size: 115px 15px;">
<div class="tire-black" style="float: left;" location="1A">
<div style="font-weight: bold;padding-top: 10px;"></div>
<div style="font-weight: bold;padding-top: 10px;"></div>
</div>
<div class="tire-black" style="float: right;" location="1D">
<div style="font-weight: bold;padding-top: 10px;"></div>
<div style="font-weight: bold;padding-top: 10px;"></div>
</div>
</div>
<br>
<div style="width: 100%;height: 70px;background: url(static/images/axel.jpg) no-repeat center;background-size: 115px 15px;">
<div class="tire-black" style="float: left;" location="2A">
<div style="font-weight: bold;padding-top: 10px;"></div>
<div style="font-weight: bold;padding-top: 10px;"></div>
</div>
<div class="tire-black" style="float: left;" location="2B">
<div style="font-weight: bold;padding-top: 10px;"></div>
<div style="font-weight: bold;padding-top: 10px;"></div>
</div>
<div class="tire-black" style="float: left;margin-left: 24px;" location="2C">
<div style="font-weight: bold;padding-top: 10px;"></div>
<div style="font-weight: bold;padding-top: 10px;"></div>
</div>
<div class="tire-black" style="float: right;" location="2D">
<div style="font-weight: bold;padding-top: 10px;"></div>
<div style="font-weight: bold;padding-top: 10px;"></div>
</div>
</div>
</div>
</div>
</body>
【问题讨论】:
-
我提供了工作示例。如果它解决了您的问题,请通过单击答案附近的右侧按钮接受它,让其他 SO 用户知道。如果您正在为解决方案而苦苦挣扎,请给我留言。
标签: javascript jquery