javascript - 如何在 HTML IMG 标签中使用 JavaScript math.round？

Question

背景:我有一个简单的网页，显示后院气象站的当前天气状况。我正在尝试在网站上添加 UV 图像。我对基本的 HTML 很满意，但 JavaScript 对我来说似乎是一门外语。我找到了关于使用 Math.round 和在 JavaScript 中调用图像的线程，但还没有想出如何将两者结合起来。

我的天气软件输出带有一位小数点的紫外线指数。我想四舍五入为一个整数，然后使用该整数在网页上放置与该整数相关的图像。

我已经想出如何让 Math.round 将模板的 UV 标注替换为整数。软件的 UV 模板标签是 STAT$UV:CURRENT$。当我把它放在 JavaScript 中时(前后都有文本给出整个图像文件名)，它看起来像这样:

UV_<script type="text/javascript">document.write(Math.round(STAT$UV:CURRENT$));</script>.gif

这导致 UV_X.gif 显示在我的网页上，正如预期的那样，其中 X 等于当前的 UV 指数。但是当我尝试将它包装在 IMG 标签中时，我无法获得我想要的结果。

我想我需要使用一个变量，但我不了解变量和调出图像所需的语法。

有什么建议吗？

[编辑]

我测试了以下答案中的三个建议。没有结果显示图像，所以我可能没有很好地解释我的问题。

天气软件在我的电脑上本地运行。它从室外气象站接收数据包，处理该数据，并将其显示在屏幕上。它还会填充本地存储的模板，然后通过 FTP 将其上传到我的网站。除了服务器上的几个预打包脚本外，所有内容都在本地处理。我对这些建议的测试页面位于 avon-weather.com/test.html 看一看，看看您是否发现我做错了什么？谢谢!

Answer 1

由于您使用的是服务器框架，因此您可能应该将服务器端的数字四舍五入。此外，如果可以，尽量避免使用 document.write，如果您不完全理解它可能会导致一些棘手的问题(特别是如果您混合使用服务器端和客户端呈现)。但是，这里有一个如何在客户端执行此操作的示例:

<img id="myImage" />

<script type="text/javascript">
    var imgSrc = "UV_" + Math.round(STAT$UV:CURRENT$) + ".gif";
    document.getElementById("myImage").setAttribute('src', imgSrc);
</script>