Question

对于大学，我们必须＆＃34;建立＆＃34;一个圣诞树（svg）和使用javascript使星星（ger stern（e））旋转和球（ger（kugel（n））改变颜色 - 一个明星必须是一个流星。一切都工作满分..但是一个惩罚点，因为它在Firefox中不起作用有谁知道为什么不呢？

SVG低于。

https://www.dropbox.com/s/vi4lxgortgyeq3f/uebung4.svg

提前致谢...请记住，这是我第一次使用javascript：D

<script type="text/javascript">
function farbe()
    {
    var a = "#ff0000";
    var b = "#007f00";

    if (document.getElementById("kugeln").style.fill == a)
     {
      document.getElementById("kugeln").style.setProperty('fill', b);
      }
      else
      {
      document.getElementById("kugeln").style.setProperty('fill', a);
      }
    }

 var initialTheta = 0; 
var thetaDelta = 0.3; 
var delay = 10; 

var stern; 
var timer;

function drehen()

{
  stern = document.getElementById("stern_1"); 
  stern.currentTheta = initialTheta; 
  timer = setInterval(Animation, delay);    

  stern_2 = document.getElementById("stern_2"); 
  stern_3 = document.getElementById("stern_3");
  stern_4 = document.getElementById("stern_4");

}



function stop()

{
  clearInterval(timer); 
  return; 
}



function Animation()

{ 
  stern.setAttribute("transform", "rotate(" + stern.currentTheta + " 50,50)"); 
  stern.currentTheta += thetaDelta;  

  stern_2.setAttribute("transform", "rotate(" + stern.currentTheta + " 50,50)");
  stern.currentTheta += thetaDelta;

  stern_3.setAttribute("transform", "rotate(" + stern.currentTheta + " 50,50)"); 
  stern.currentTheta += thetaDelta;   

  stern_4.setAttribute("transform", "rotate(" + stern.currentTheta + " 0,2000)"); 
  stern.currentTheta += thetaDelta;
}

Answer 1

每个鼠标都会连续两次调用drehen函数，因此您调用两次setInterval但仅记录最后一个返回值。在设置新版本之前，您应该致电clearInterval。

尝试类似

的内容

if(timer != undefined){
    clearInterval(timer);
}
timer = setInterval(Animation, delay);

Answer 2

您正在将颜色与十六进制值进行比较

var a = "#ff0000";
if (document.getElementById("kugeln").style.fill == a)

UAs不必将颜色作为十六进制值返回，实际上Firefox不会。它会将您的颜色转换为rgb或rgba表示。如果您添加提醒

alert(document.getElementById("kugeln").style.fill);

你会看到Firefox返回rgb（255,0,0）作为与以不同方式表示的＃ff0000相同的颜色。所以你可以添加这种颜色格式的支票或......

更强大的解决方案是使用visiblity：隐藏元素和要比较的颜色，然后检查其填充属性。

我的（简单）javascript适用于每个浏览器，但Firefox - 为什么？

2 个答案: