我一直在谷歌搜索并试图找到如何做到这一点,但我什么都没有。 如何在SVG中访问JavaScript变量?
我正在研究用SVG编写的接口,但我需要获取当前的日期和时间,格式化它们并显示它。
我正在尝试
<text id="epgDate" x="1130" class="epg-date text" text-anchor="end" width="180">
<script type="text/javascript"><![CDATA[
setInterval( currentDate, 1000);
]]></script>
</text>
<text id="epgTime" x="1170" class="epg-time text">
<script type="text/javascript"><![CDATA[
setInterval( currentTime, 1000);
]]></script>
</text>
“currentDate()”和“currentTime()”在别处定义。
这给了我一些形式的语法错误(我使用客户端的模拟器工具来运行这个接口,因此它没有告诉我任何更具体的内容)。 的修改 语法错误在其他地方,它已修复。 但是,这仍然不起作用。即使我尝试使用一个简单的函数,如“alert('x')”或“document.write('x')”。
有没有人知道如何在SVG中获取当前的DateTime,或者在JavaScript中获取它并使用setInterval()定期回显?
非常感谢您提前提供任何帮助!
答案 0 :(得分:0)
所以我看到的混乱似乎是SVG和HTML标记页面之间的区别。 SVG使用稍微不同的DOM,因此访问/设置元素并不总是以完全相同的方式工作或使用相同的方法。
我编写了这个脚本,我能够为SVG绘制的日期和时间元素设置日期时间:
<script type="text/ecmascript"><![CDATA[
// Format Date
var date = new Date();
var month = date.getMonth() + 1;
var day = date.getDate();
var year = date.getFullYear();
var monthsByName = ["January", "February", "March", "April", "May", "June", "July",
"August","September", "October", "November", "December"];
var formattedDate = monthsByName[month - 1] + " " + day + ", " + year;
var textNode = document.createTextNode(formattedDate);
document.getElementById("epg-date").appendChild(textNode);
// Format Time
// Source: bbrame @ StackOverflow
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12;
minutes = minutes < 10 ? "0"+minutes : minutes;
var formattedTime = hours + ':' + minutes + ' ' + ampm;
var timeNode = document.createTextNode(formattedTime);
document.getElementById("epg-time").appendChild(timeNode);
]]></script>