更改JavaScript字符串中间的颜色？
更改JavaScript字符串中间的颜色？
提问于 2021-02-19 21:29:23
我正在尝试构建一个多时区时钟，它将以kiosk模式显示在web浏览器中。
我从https://ampron.eu/article/use-case/digital-wall-clock-with-raspberry-pi/和kiosk安装程序中窃取了基本代码，并将其修改为：http://dotnetdotcom.net/tzclock.html，但我不知道如何更改每个时区的颜色。
JavaScript并不是我真正的经验，所以如果我做错了，请指出正确的方向。
事先非常感谢！
到目前为止，我的代码如下(87行)：
"use strict";
var textElem = document.getElementById("clocktext");
clocktext.setAttribute('style', 'white-space: pre;');
var targetWidth = 0.90; // Proportion of full screen width
var curFontSize = 20; // Do not change
function updateClock() {
var d = new Date();
var s = "";
s += "UTC - "
s += (10 > d.getUTCHours() ? "0" : "") + d.getUTCHours() + ":";
s += (10 > d.getUTCMinutes() ? "0" : "") + d.getUTCMinutes() + ":";
s += (10 > d.getUTCSeconds() ? "0" : "") + d.getUTCSeconds();
s += '\r\n';
s += "Loc - "
s += (10 > d.getHours() ? "0" : "") + d.getHours() + ":";
s += (10 > d.getMinutes() ? "0" : "") + d.getMinutes() + ":";
s += (10 > d.getSeconds() ? "0" : "") + d.getSeconds();
textElem.textContent = s;
setTimeout(updateClock, 1000 - d.getTime() % 1000 + 20);
}
function updateTextSize() {
for (var i = 0; 3 > i; i++) { // Iterate for better better convergence
curFontSize *= targetWidth / (textElem.offsetWidth / textElem.parentNode.offsetWidth);
textElem.style.fontSize = curFontSize + "pt";
}
}
updateClock();
updateTextSize();
window.addEventListener("resize", updateTextSize);
$(document).ready(function() {
// iOS web app full screen hacks.
if (window.navigator.standalone == true) {
// make all link remain in web app mode.
$('a').click(function() {
window.location = $(this).attr('href');
return false;
});
}
});@font-face {
font-family: "Digital-7";
src: url(digital-7.ttf) format("truetype");
}
p.customfont {
font-family: "Digital-7";
}
html {
background: #000000;
font-family: "Digital-7", sans-serif;
font-weight: normal;
color: #00ffff;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html style="height:100%; margin:0; padding:0">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name='viewport' content='width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, user-scalable = no, viewport-fit=cover'>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Ampron Clock">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>GeekHo Clock</title>
</head>
<body style="display:flex; height:100%; margin:0; padding:0; justify-content:center; align-items:center">
<span id="clocktext" style="font-kerning:none"></span>
</body>
</html>
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-02-19 21:41:25
有几种方法可以实现你的目标。我选择了一个最适合你的代码。
completely.
- 在时区周围放置
<span>标记，并给它们一个类，以使用新的颜色 - Change：
textElem.textContent = s;totextElem.innerHTML = s;- --这在这里是安全的，因为您控制内容
- 添加一个CSS类(
tz)并提供新的颜色.
如果要为每个时区使用不同的颜色，请使用CSS中定义的不同颜色的不同类名。
"use strict";
var textElem = document.getElementById("clocktext");
clocktext.setAttribute('style', 'white-space: pre;');
var targetWidth = 0.90; // Proportion of full screen width
var curFontSize = 20; // Do not change
function updateClock() {
var d = new Date();
var s = '<span class="tz">UTC</span>';
s += " - "
s += (10 > d.getUTCHours() ? "0" : "") + d.getUTCHours() + ":";
s += (10 > d.getUTCMinutes() ? "0" : "") + d.getUTCMinutes() + ":";
s += (10 > d.getUTCSeconds() ? "0" : "") + d.getUTCSeconds();
s += '\r\n';
s += '<span class="tz">Loc</span>';
s += " - "
s += (10 > d.getHours() ? "0" : "") + d.getHours() + ":";
s += (10 > d.getMinutes() ? "0" : "") + d.getMinutes() + ":";
s += (10 > d.getSeconds() ? "0" : "") + d.getSeconds();
textElem.innerHTML = s;
setTimeout(updateClock, 1000 - d.getTime() % 1000 + 20);
}
function updateTextSize() {
for (var i = 0; 3 > i; i++) { // Iterate for better better convergence
curFontSize *= targetWidth / (textElem.offsetWidth / textElem.parentNode.offsetWidth);
textElem.style.fontSize = curFontSize + "pt";
}
}
updateClock();
updateTextSize();
window.addEventListener("resize", updateTextSize);
$(document).ready(function() {
// iOS web app full screen hacks.
if (window.navigator.standalone == true) {
// make all link remain in web app mode.
$('a').click(function() {
window.location = $(this).attr('href');
return false;
});
}
});@font-face {
font-family: "Digital-7";
src: url(digital-7.ttf) format("truetype");
}
p.customfont {
font-family: "Digital-7";
}
html {
background: #000000;
font-family: "Digital-7", sans-serif;
font-weight: normal;
color: #00ffff;
}
.tz {
color: pink;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html style="height:100%; margin:0; padding:0">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name='viewport' content='width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, user-scalable = no, viewport-fit=cover'>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Ampron Clock">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>GeekHo Clock</title>
</head>
<body style="display:flex; height:100%; margin:0; padding:0; justify-content:center; align-items:center">
<span id="clocktext" style="font-kerning:none"></span>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66285223
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号