Question

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

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

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

我想要做的是显示Temp的值。并且在与Temp有关的数字内部有颜色。

例如：

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

如果温度在 10'C - 20'C 之间，那么数字内部的颜色在底部处为深蓝色，并且在数字的顶部处淡化为浅蓝色

如果温度介于 20'C - 30'C 之间，那么数字内部的颜色浅蓝色 底部在数字的顶部处淡出橙色

如果温度介于 30'C - 40'C 之间，那么数字内部的颜色橙色底部并逐渐消失在数字的顶部红色

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

我希望它有意义

提前感谢

格雷格

Answer 1

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

在css中

.cssclassname1{
 background-color:blue;
}

.cssclassname2{
 background-color:blue;
}

in html

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

希望这会有所帮助......

Answer 2

我尝试了一些东西，但我无法定义所有或条件

demo

<强> 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>'
});

Answer 3

使用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%;}
}

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

然后，我们使用您想要的颜色创建渐变背景，只是为了好玩我们为它设置动画。

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

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

demo

Answer 4

Js小提琴示例here （如果您的浏览器缺少webkit支持，请尝试使用this example。）

控制文本外观的最简单方法可能是使用css定义不同的样式（或者你说过的颜色），然后使用javascript在温度值文本周围设置span标记的类。 / p>

一些示例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文件。目前，在不使用canvas元素的情况下实现此渐变效果的唯一方法是使用一些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;
}

查看示例here 如果您的数字没有提供渐变颜色，那是因为您的浏览器不支持webkit功能。

更改字符/字体内的颜色

4 个答案:

demo