1

背景：我有一个简单的网页，显示后院气象站的当前天气状况。我正在尝试在网站上添加 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 等于当前的紫外线指数。但是当我尝试将其包装在 IMG 标签中时，我无法获得我想要的结果。

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

有什么建议么？

[编辑]

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

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

4

3 回答 3

2

由于您使用的是服务器框架，因此您可能应该在服务器端对数字进行四舍五入。另外，尽量避免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>
于 2012-10-20T16:23:41.793 回答
1

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>
于 2012-10-20T16:25:28.343 回答
0

你不能只是把一个标签塞到一个<script>标签的中间就<img>指望它起作用。它可以与 PHP 一起使用，因为 PHP 是在服务器端独立于 HTML 处理的，但 JavaScript 是 HTML 中的一个元素。

相反，请尝试document.write()围绕整个<img>标签使用 uding，例如：

<script type="text/javascript">
  document.write('<img src="UV_'+Math.round(STAT$UV:CURRENT$)+'.gif"/>');
</script>
于 2012-10-20T16:21:20.657 回答