Javascript 更改字符/字体内的颜色
首先，我需要说我不是一个网络开发者，但我通过尽可能多地学习教程，以及从谷歌搜索中整合代码，成功创建了一个HTML5和CSS3网站 在我的网站上，我想显示环境信息：温度、湿度、气压等。 我想知道以下是否可行，是否有人能为我指出正确的方向 我想做的是显示温度的值。并在与温度相关的数字内显示颜色 例如： 如果温度低于10'C，则数字内的颜色为深蓝色 如果温度介于10℃-20℃之间，则数字内部的颜色在底部为深蓝色，在顶部为浅蓝色 如果温度介于20℃-30℃之间，则数字内部的颜色在底部为浅蓝色，在顶部为橙色 如果温度介于30℃-40℃之间，则数字内部的颜色在底部为橙色，在顶部为红色 如果温度高于40℃，则数字内的颜色为红色 我希望这是有道理的 先谢谢你Javascript 更改字符/字体内的颜色,javascript,php,html,css,web,Javascript,Php,Html,Css,Web,首先，我需要说我不是一个网络开发者，但我通过尽可能多地学习教程，以及从谷歌搜索中整合代码，成功创建了一个HTML5和CSS3网站 在我的网站上，我想显示环境信息：温度、湿度、气压等。 我想知道以下是否可行，是否有人能为我指出正确的方向 我想做的是显示温度的值。并在与温度相关的数字内显示颜色 例如： 如果温度低于10'C，则数字内的颜色为深蓝色 如果温度介于10℃-20℃之间，则数字内部的颜色在底部为深蓝色，在顶部为浅蓝色 如果温度介于20℃-30℃之间，则数字内部的颜色在底部为浅蓝色，在顶部为橙
Gregg您可以使用一些具有不同背景颜色的类，例如 在css中
.cssclassname1{
background-color:blue;
}
.cssclassname2{
background-color:blue;
}
<div class="cssclassname1">below 10</div>
<div class="cssclassname2">above 10</div>
低于10
10岁以上
希望这能帮上忙…我试过一些东西，但我不能确定你的所有情况 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>
如果温度低于10C，则数字内的颜色为深蓝色。
如果温度高于40℃，则数字内的颜色为红色
$.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>'
});
$.fn.wrapInTag=函数（选项）{
var o=$.extend({
字：[]，
标记：“”
}，opts）；
返回此值。每个（函数（）{
var html=$（this.html（）；
for（变量i=0，len=o.words.length；i.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%;}
}
在本演示中，背景由文本剪裁，因此它将仅显示在数字内。为了让它显示，我们还需要使文本透明。（为了使其更美观，我们在字体周围设置了一个笔划。）
然后，我们用你想要的颜色创建一个渐变背景，为了好玩，我们制作了动画
在您的代码中，背景位置将根据温度进行设置
请注意，使用该系统，您可以连续进行（即，每种温度的颜色略有不同）
Js小提琴示例
（如果您的浏览器缺少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>
看看这个例子
如果你的数字没有渐变颜色，那是因为你的浏览器不支持webkit功能。显示你的html代码以获得更好的建议……那么，你的问题是如何获得天气小部件，还是如何设计你已经拥有的小部件？如果你已经拥有了天气小部件，请向我们展示你已经拥有的代码。你尝试了什么吗..我没有尝试过任何东西。我一直在互联网上搜索一个例子，或者一个我可以开始的基础。我甚至不知道这是否可能。你的温度值（如10'C-20'C）来自数据库或它的文本？？
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);
#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;
}