如何在HTML标记中使用JavaScript math.round？

Question

背景:我有一个简单的网页显示目前的天气状况从后院气象站。我正试图在网站上添加一个紫外线图像。我对基本的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-ather.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>

Answer 2

不应该使用document.write。现代方式是：

<img id="set-me" />
...
<script>
  document.getElementByID("set-me").src = 
    "UV_"+Math.round(STAT$UV:CURRENT$)+".gif";
</script>

如果你愿意使用jQuery，

 <img id="set-me" />
 ...
 <script>
   $("#set-me").attr("src",
     "UV_"+Math.round(STAT$UV:CURRENT$)+".gif");
 </script>

Answer 3

您不能仅仅将一个<script>标记插入到<img>标记的中间，并期望它能够工作。它适用于PHP，因为PHP是独立于HTML的服务器端处理的，但是JavaScript是HTML中的一个元素。

相反，尝试在整个document.write()标记周围设置<img>，如下所示：

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