Question

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

我的天气软件输出一个小数点的UV索引。我想舍入到一个整数，然后使用该整数在网页上放置与该整数相关的图像。

我已经想出如何让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>

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>

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

3 个答案: