时间戳

首页 > 解决方案 > 我如何使用在 JavaScript 中创建的变量来设置 HTML 中图像的“src”属性？

javascript - 我如何使用在 JavaScript 中创建的变量来设置 HTML 中图像的“src”属性？

问题描述

我正在尝试制作一个非常简单的网页，该网页根据用户计算机上的时间全天旋转 3 个预先存在的图像。我已经设法设置了 if 语句，它可以检查一天中的时间并根据一天中的什么时间通过 if 语句执行操作（此功能按预期工作），但是我正在努力做我想做的事情在这个问题的标题中提到了..

下面是我为图像提供的 HTML 代码，它位于脚本标记上方，因此图像在 javascript 执行之前已经创建。

<img id="dayImage" src="" alt="Unable to load image" />

此后，是我拥有的执行此特定功能的内部 javascript：

<script>

            var image = document.getElementById('dayImage');

            var myDate = new Date();
            var hrs = myDate.getHours();

            if (hrs < 12)
                image.setAttribute("src", "~/Images/Morning.PNG");

            else if (hrs >= 12 && hrs <= 17)
                image.setAttribute("src", "~/Images/Noon.PNG");

            else if (hrs >= 17 && hrs <= 24)
                image.setAttribute("src", "~/Images/Evening.PNG");

        </script>

如果有任何帮助，我正在 ASP.NET MVC 项目文件中执行此操作。我不确定我是否在这里遗漏了一些非常明显的东西......任何帮助将不胜感激，谢谢:)

标签： javascriptasp.net-mvc

解决方案

传递"~/"给脚本可能是指存储视图的相对路径。使用Url.Content(path)从 web 根目录开始，将给出服务器中文件的绝对 url。

if (hrs < 12)
   image.setAttribute('src', '@Url.Content("~/Images/Morning.PNG")');
else if (hrs >= 12 && hrs <= 17)
   image.setAttribute('src', '@Url.Content("~/Images/Noon.PNG")');
else if (hrs >= 17 && hrs <= 24)
   image.setAttribute('src', '@Url.Content("~/Images/Evening.PNG")');

编辑：更改为单引号

推荐阅读