Question

我正在制作一个显示多个温度的网页。当温度值超出限制（太热/冷）时，其背景会闪烁红色。

到目前为止，我的工作方式是python脚本生成包含温度值的文本文件。然后来自温度文件的文本通过div自动加载到html脚本中，每隔5秒自动刷新一次。当温度水平超出范围时，文本文件中会包含一串代码，使div闪烁。

主页

<!DOCTYPE html>
<html>

<head>
<title>Temperatures</title>
<style>

body {
    background-color: grey;
}

.backgroundRed{
    background: red;
}

#container
{
    height:550px;
    width:400px;
    position:absolute;
}

#image
{    
    position:absolute;
    left:0;
    top:0px;
}

#Temp01
{
    z-index:100;
    position:absolute;    
    color:black;
    font-size:24px;
    font-weight:bold;
    left:40px;
    top:35px;
}
#Temp02
{
    z-index:100;
    position:absolute;    
    color:black;
    font-size:24px;
    font-weight:bold;
    left:40px;
    top:145px;
}
#Temp03
{
    z-index:100;
    position:absolute;    
    color:black;
    font-size:24px;
    font-weight:bold;
    left:40px;
    top:255px;
}

</style>

</head>

<body>

<div id="container">
    <img id="image" src="room.jpg"/>
    <div id="Temp01">
    </div>
    <div id="Temp02">
    </div>
    <div id="Temp03">
    </div>
</div>

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">

$(document).ready( function(){
$('#Temp01').load('Temp01.txt');
refreshTemp01();
});
function refreshTemp01()
{
 setTimeout( function() {
   $('#Temp01').load('Temp01.txt');
   refreshTemp01();
 }, 5000);
}

$(document).ready( function(){
$('#Temp02').load('Temp02.txt');
refreshTemp02();
});
function refreshTemp02()
{
 setTimeout( function() {
   $('#Temp02').load('Temp02.txt');
   refreshTemp02();
 }, 5000);
}

$(document).ready( function(){
$('#Temp03').load('Temp03.txt');
refreshTemp03();
});
function refreshTemp03()
{
 setTimeout( function() {
   $('#Temp03').load('Temp03.txt');
   refreshTemp03();
 }, 5000);
}

</script>


</body>

</html>

Temp01.txt：

<script type="text/javascript">
var backgroundInterval = setInterval(function(){
    $("#Temp01").toggleClass("backgroundRed");
 },1000)
</script>

25.5degC

它有效，但眨眼太不规则（因为div的自动刷新）。任何人都可以想到一种方法来创建一个切换或某种使得所有超出极限温度的东西定期闪烁吗？请注意，div在超出范围之前不会闪烁，因为当python在范围内时，python会创建一个纯文本（无脚本）的文本文件

Temp02.txt：

如何在自动刷新div上定期闪烁

0 个答案: