我正在尝试创建一个嵌入式设备使用的全页面网页时钟。这个想法是,该设备将显示一个大屏幕的时钟,下面是当前温度,华氏度和摄氏度以及城市名称或代码。时钟时间和温度将随着时间的推移而更新;时钟将简单地以5秒的间隔重复滚动可用的城市。
我在调整字体大小时遇到了问题。我们的想法是,先设置一个小字体来获得初始大小,然后我们进行运算,使文本填充宽度的90%。这是在迭代循环中完成的,因为offsetWidth是一个整数值,所以迭代处理应该让我们足够接近我们的目标。
这里有一个组划分,其中有一个时间划分和一个温度划分。所有这三个都指定了100%的宽度,这就是我想要的。然后将各个元素的offsetWidths应用于划分宽度,以获得填充该宽度所需的字体。
逐场播放时,10点字体的初始“时钟”offsetWidth为48,目标为1259。算法正确地将fontsize设置为236然后我们查看温度偏移宽度,在进行任何运算之前,它显示offsetWidth已经是1259,所以字体没有被操纵。但是这个数字是不正确的; offsetWidth应该更像150左右。
此外,时钟大小似乎只工作一次(所以它出现了大约半秒),然后有同样的问题,温度大小。我没有看到任何点,我无法重置或我重置不正确,所以我很困惑这里发生了什么。
我已经包括了源代码(test.html和test.js),希望有人能告诉我我可能出错的地方。我将感谢您的指导。
test.html
<!DOCTYPE html>
<html lang='en' style="height:100%; width:100%; margin:0; padding:0">
<head>
<title>Full Screen Clock</title>
<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"/>
<style>
/* Customizable font and colors */
html {
font-family: 'Courier' ;
background:#000000;
color: #91ff0f ;
}
</style>
</head>
<body style="display:flex; height:100%; width:100%; margin:0; padding:0; justify-content:center; align-items:center">
<div style='height:100%; width: 100%; margin: 0 auto'>
<div id='clockDiv' style='height:60%; width:100%; margin: 0 auto'>
<span id="clocktext" style="font-kerning:none; text-align:center"></span>
</div>
<div id='tempDiv' style='width:100%; margin: 0 auto'>
<span id="temptext" style="font-kerning:none; text-align:center"></span>
</div>
</div>
<script src='test.js'></script>
</body>
</html>
字符串
test.js
"use strict" ;
const cycleLength = 5 ;
const startFontSize = 10 ;
const targetWidth = .9 ;
var tempsTableElem = document.getElementById('temps') ;
var timeElem = document.getElementById("clocktext") ;
var tempElem = document.getElementById("temptext") ;
var clockElem = document.getElementById("clockDiv") ;
var timeFontSize ;
var tempFontSize ;
var cityTempArray ;
function updateClock() {
var d = new Date() ;
var seconds = d.getSeconds() ;
var cityCount = cityTempArray.length ;
var showSeconds = (cityCount == 1) ;
var showCity = (cityCount > 1) ;
// We change cities (if applicable) every 5 seconds. So:
// If there are two cities, the cycle repeats every 10 seconds
// If there are three cities, the cycle repeats every 15 seconds
// four cities: 20 seconds
// Therefore, we can use (seconds/5) modulus (number of cities) to get city index.
// So if we are, say, 38 seconds into the minute and there are, say, 3 cities, then current city (from 0 to 2) is:
// Math.floor(38/5) % cityCount = 7 % 3 = 1 (0~4=0 5~9=1 10~14=2 15~19=0 22~24=1 25~29=2 30~34=0 35~39=1)
// We will set maximum to 4 cities because it gets weird after that. Anyway, that's enough, right?
var currentCity = Math.floor(seconds/cycleLength) % cityCount ; // (0 through number-cities - 1)
var cityCode = cityTempArray[currentCity][0] ;
var farenheit = round(cityTempArray[currentCity][1], 0) ;
var s = "" ;
var celsius = round(5 / 9 * (farenheit - 32), 1) ;
var colon = (showSeconds || d.getMilliseconds() < 500) ? ':' : ' ' ;
s += (d.getHours() < 10 ? "0" : "") + d.getHours() ;
s += colon + (d.getMinutes() < 10 ? "0" : "") + d.getMinutes() ;
if (showSeconds)
s += colon + (d.getSeconds() < 10 ? "0" : "") + d.getSeconds() ;
timeElem.textContent = s ;
s = farenheit + 'ºF ' + celsius + 'ºC' ;
if (showCity)
s += ' ' + cityCode ;
tempElem.textContent = s ;
updateTextSize() ;
let time = 500 - d.getTime() % 500 + 20 ;
setTimeout(updateClock, time) ;
}
function updateTextSize() { // Attempt to fill the width of the page with clock text and temperature text
tempFontSize = startFontSize ;
timeFontSize = startFontSize ;
for (var i = 0 ; i < 3 ; i++) { // Iterate for better better convergence
// We will hide the elements we're not sizing, so that they don't interfere
tempElem.style.display = 'none' ;
timeFontSize *= targetWidth / (timeElem.offsetWidth / clockElem.offsetWidth) ;
timeElem.style.fontSize = timeFontSize + "pt" ;
// We will hide the elements we're not sizing, so that they don't interfere
timeElem.style.display = 'none' ;
tempElem.style.display = 'block' ;
tempFontSize *= targetWidth / (tempElem.offsetWidth / clockElem.offsetWidth) ;
tempElem.style.fontSize = tempFontSize + 'pt' ;
timeElem.style.display = 'block' ;
}
}
function getTemps(tableElement) {
cityTempArray = [ [ 'NewYork', 34 ], ['Brisbain', 76 ] ] ;
}
function round(value, precision) {
var multiplier = Math.pow(10, precision || 0) ;
return Math.round(value * multiplier) / multiplier ;
}
getTemps() ;
updateClock() ;
window.addEventListener("resize", updateTextSize) ;
型
1条答案
按热度按时间at0kjp5o1#
看起来timeElem.offsetWidth和clockElem.offsetWidth总是相同的值,因为你设置了timeElem.style.display = 'block',我只是添加了一个风格flex,希望对你有帮助
字符串