在基于MYSQL的HTML中更改元素的颜色。
所以我会尽量给你提供更多的细节，让你了解我的想法。 我正在为我的家做家庭自动化。我有一个web界面，现在我想给它添加一个温度反馈。但它也以温度计或棒的形式存在。例如，如果温度。如果温度高于40摄氏度，则颜色应为红色。如果温度低于40摄氏度，则颜色的梯度应低于红色，低于20表示蓝色。可能吗？在基于MYSQL的HTML中更改元素的颜色。,html,mysql,ajax,Html,Mysql,Ajax,所以我会尽量给你提供更多的细节，让你了解我的想法。 我正在为我的家做家庭自动化。我有一个web界面，现在我想给它添加一个温度反馈。但它也以温度计或棒的形式存在。例如，如果温度。如果温度高于40摄氏度，则颜色应为红色。如果温度低于40摄氏度，则颜色的梯度应低于红色，低于20表示蓝色。可能吗？ 如果是的话，我请求你的帮助 这是不可能的 您可以在图像上使用cssfilter属性， 首先设置一个背景为蓝色的图像，对于最冷的，我们称之为temp.png html将如下所示： ... <body on
如果是的话，我请求你的帮助 这是不可能的 您可以在图像上使用css
filtertemp.png...
<body onload="tempFunc()">
...
<img src="temp.png" id="tempImg" />
...
<input type="hidden" id="tempFromDB" value="50" />
<script>
tempFunc()
{
x= document.getElementById("tempFromDB").value;
// expression: x= ?*?/?*/?+?
document.getElementById("tempImg").style.webkitFilter = "hue-rotate("+x+"deg)";
}
</script>
。。。
...
...
tempFunc（）
{
x=document.getElementById（“tempFromDB”）.value；
//表达式：x=？*？/？*/？+？
document.getElementById（“tempImg”）.style.webkitFilter=“色调旋转（“+x+”度）”；
}
.webkitFilter=“色调旋转（-“+x+”度）”
例如：
Html温度显示
我不会单独使用html和css：
.box{
位置：相对位置；
背景色：#999；
宽度：150px；
高度：150像素；
}
.框h1{
字体大小：1.2米；
}
.包厢部{
位置：绝对位置；
宽度：30px；
高度：60px；
背景色：红色；
变换：旋转（180度）；
底部：0；
利润率：5x10px；
}
.box div:n个类型（2）{
左：40px；
}
.box div:n个类型（3）{
左：80px；
}
.box div[数据温度=“40”]，
.box div[数据温度=“41”]，
.box div[数据温度=“42”]{
/*只要你愿意*/
背景色：红色；
高度：计算（20px+40px）；
}
.box div[数据温度=“30”]，
.box div[数据温度=“31”]，
.box div[数据温度=“32”]{
背景颜色：黄色；
高度：计算（20px+30px）；
}
.box div[数据温度=“10”]，
.box div[数据温度=“11”]，
.box div[数据温度=“12”]{
背景颜色：绿色；
高度：计算（20px+10px）；
}
温度C0
嘿。非常感谢！非常感谢。但这意味着什么->？x=document.getElementById（“tempFromDB”）.value；我怎样才能得到临时工。从使用AJAX的mysql开始，我只是将x
的值设置为id为tempFromDB
的隐藏输入的值，这只是一个示例，但是您可以使用AJAX直接或以类似的方式获得它，尽管我认为您不需要AJAX，因为刷新率不会太高。。我怀疑温度会在短时间内急剧下降，你可以在每次调用页面时使用隐藏输入。另外，ajax是一个不同的问题，互联网上充满了答案！试着用谷歌搜索一下，不会让你失望的。另一种方法是使用JS更改div的背景颜色，但我需要创建一种根据温度显示颜色的方法，并将其转换为十六进制或RGB兼容的图形，我现在没有时间，如果这证明有问题，尝试一下，filter
属性需要一些调整才能在所有浏览器上工作。不难，但需要一些搜索。谢谢。这很有帮助！希望这能奏效！：）