2

首先，我需要说我不是网络开发人员，但我通过学习尽可能多的教程以及从谷歌搜索中一起破解代码，成功地创建了一个 HTML5 和 CSS3 网站。

在我的网站上，我想显示环境信息：温度、湿度、气压等。

我想知道以下是否可能以及是否有人可以指出我正确的方向？

我想做的是显示 Temp 的值。并在与温度相关的数字内显示颜色。

例如：

如果温度低于10'C，则数字内的颜色为深蓝色

如果温度在10'C - 20'C之间，则数字内部的颜色在底部为深蓝色，在数字顶部逐渐变为浅蓝色

如果温度在20'C - 30'C之间，则数字内部的颜色在底部为浅蓝色，在数字顶部逐渐变为橙色

如果温度在30'C - 40'C之间，则数字内部的颜色在底部为橙色，在数字顶部逐渐变为红色

如果温度高于40'C，则数字内的颜色为红色

我希望这是有道理的

先感谢您

格雷格

4

4 回答 4

0

这里是Js Fiddle 示例 （如果您的浏览器缺少 webkit 支持，请尝试此示例。）

控制文本外观的最简单方法可能是使用 css 定义不同的样式（或您所说的颜色），然后使用 javascript 围绕温度值文本设置 span 标签的类。

一些示例 HTML

<html>

<head>
    <script src="[path to your .js file]"></script>
    <link rel="stylesheet" href="[path to your .css file]" />
</head>

<body onload="initialize();">
    <p>The temperature today is <span id="tempVal"></span></p>
</body>

</html>

您的 javascript 文件：

var curTemp; // this will contain the current temperature
var curClassName; // the name of the class for that temperature (reflects css code below)
var valueContainer;

function initialize()
{
    valueContainer = document.getElementById("tempVal");
}

//... calculate or set the current temperature value here ...

if (curTemp < 10)
    curClassName = "freezing";
else if (curTemp >= 10 && curTemp < 20)
    curClassName = "cold";
else if (curTemp >= 20 && curTemp < 30)
    curClassName = "warm";
else if (curTemp >= 30 && curTemp <= 40)
    curClassName = "hot";
else if (curTemp > 40)
    curClassName = "scorching";

valueContainer.innerHTML = curTemp + "C";
valueContainer.setAttribute("class", curClassName);

这只会留下您的 CSS 文件。现在，在不使用画布元素的情况下实现这种渐变效果的唯一方法是使用一些 webkit 属性。这些都不是普遍支持的，所以为了最大的可移植性，我会简单地使用不同的纯色而不是渐变，但这里是 webkit 示例。

#tempVal 
{
    font-weight: bold;
}
.freezing
{
    color: blue;
}
.cold
{
    background: -webkit-linear-gradient(top, lightblue, blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.warm
{
    background: -webkit-linear-gradient(top, orange, lightblue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hot
{
    background: -webkit-linear-gradient(top, red, orange);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.scorching
{
    color: red;
}

在这里查看示例 如果您的数字没有出现渐变色，那是因为您的浏览器不支持 webkit 功能。

于 2013-10-18T18:34:46.090 回答
0

使用 background-clip: text 可以获得很好的效果。

不过，这仅受 webkit 和 Mozilla 支持。

我已经为 Chrome 准备了一个演示。CSS是

.text {
  font-size: 100px;
  background-image: linear-gradient(0deg, red, orange, yellow, lightblue, blue);
  background-size: 100% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: colors 10s infinite linear;
  -webkit-text-stroke: 1px black;
}

@-webkit-keyframes colors {
    0% {background-position-y: 300%;}
    100% {background-position-y: 0%;}
}

在这个演示中，背景被文本裁剪，因此它只会显示在数字内部。为了让它显示，我们还需要使文本透明。（为了让它更好一点，我们在字体周围设置了一个笔触。

然后，我们用你想要的颜色创建一个渐变背景，为了好玩，我们为它制作动画。

在您的代码中，背景位置将根据温度设置。

请注意，使用该系统，您可以连续进行。（即每个温度的颜色略有不同

演示

于 2013-10-18T16:58:27.607 回答
0

您可以使用一些具有不同背景颜色的类，例如。

在 CSS 中

.cssclassname1{
 background-color:blue;
}

.cssclassname2{
 background-color:blue;
}

在 HTML 中

<div class="cssclassname1">below 10</div>
<div class="cssclassname2">above 10</div>

希望这可以帮助...

于 2013-10-18T06:59:41.023 回答
0

我已经尝试了一些东西，但我无法定义你所有的条件

演示

HTML

<p>If the Temp is below 10C, then colour inside the digits is dark blue.<br>
If the Temp is above 40C then the colour inside the digits is red</p>

JS

$.fn.wrapInTag = function(opts) {

    var o = $.extend({
        words: [],
        tag: '<strong>'
    }, opts);

    return this.each(function() {
        var html = $(this).html();
        for (var i = 0, len = o.words.length; i < len; i++) {
            var re = new RegExp(o.words[i], "gi");
            html = html.replace(re, o.tag + '$&' + o.tag.replace('<', '</'));
        }
        $(this).html(html);
    });

};

$('p').wrapInTag({
    words: ['10C', 'dark blue'],
    tag: '<span>'
});

$('p').wrapInTag({
    words: ['40C', 'red'],
    tag: '<span1>'
});
于 2013-10-18T07:25:32.150 回答