javascript - 如何在一页上有两个 svg 时钟？

标签 javascript html css svg

第一个时钟工作正常，但如果我为第二个时钟复制另一组脚本，第二个时钟无法正常显示。我已经将第一个代码时钟标记为(对于桌面版)注释，另一个代码时钟标记为(对于移动版本)，以便大家区分两组代码。 

<!--For desktop version-->      
    <div id="svgtimedesktop">   

        <svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   onload="startUp()">

<script>

<![CDATA[

/* Evolved from DHTML version 
   @ http://www.dhteumeuleu.com */

var xmlns="http://www.w3.org/2000/svg";
var xlinkns = "http://www.w3.org/1999/xlink"; 

var backX0;
var backY0;
var backWidth;
var backHeight;

var O=[];
var TM=[];
var Tm=[];
var A = 1000;


var digits = [
" ###   #  #### #### #   ###### ### ##### ###  ###      ",
"#   #  #      #    ##   ##    #   #    ##   ##   #     ",
"#   #  #      #    ##   ##    #        ##   ##   #  #  ",
"#   #  #   ###  ### ######### ####     # ###  ####     ",
"#   #  #  #        #    #    ##   #    ##   #    #  #  ",
"#   #  #  #        #    #    ##   #    ##   ##   #     ",
" ###   #  #########     #####  ###     # ###  ###      "
];


function startUp() {

      var myBack = document.getElementById("backGround");
      backX0 = myBack.getAttributeNS(null,"x");
      backY0 = myBack.getAttributeNS(null,"y");
      backWidth = myBack.getAttributeNS(null,"width");
      backHeight = myBack.getAttributeNS(null,"height");

      dayDisplay();
    timer();

      /* 
         k        0  1  2  3  4  5  6  7   -> 1st args of Cdigit
        display   *  *  :  *  *  :  *  *   -> 2nd args of Cdigit 
                                              ('10' for ':')
      */
      var k=0;   
    for(var i=0;i<6;i++){
        O[k] = new Cdigit(k++, TM[i]);
        if(i==1 || i==3) O[k] = new Cdigit(k++, 10);
    }      
    mainloop();
}

/* Input for Cdigit
   N = 0-7
   d = 0-9 or 10 */

function Cdigit(N,d){
    // digit prototype: 5 x 7 dots for each of digit from 0 to 9
    this.O = [];
    for(var i=0;i<7;i++){
        for(var j=0;j<5;j++){
            if(digits[i].charAt(5*d+j)!=" "){
                this.O.push(
                              // COjb(this.a, this.z)
                    new CObj((
                        (28*N)+(j*5))/(180/Math.PI),
                        -42+i*12
                    )
                );
            }
        }
    }
}

function CObj(a,z){
    // create led element
    this.o = document.createElementNS(xmlns,"circle");
    document.getElementById("clock3D").appendChild(this.o);
    this.a=a;
    this.z=z;
    this.plot=true;
}

// leds lighting

// main 3D function
CObj.prototype.anim=function() {
        // z axis rotation
            var x=Math.sin(A+this.a)*100;
        var y=Math.cos(A+this.a)*100;
        // simple 3D
        var x1=y;
        var zz=this.z;
        var y1=-zz;
        zz=x;
        // 2D projection
        var r=396/(396+zz);
        x=Math.round(backWidth/2-x1/r)+parseFloat(backX0);
        y=Math.round(backHeight/2-y1/r)+parseFloat(backY0);

        // leds lighting
        if(zz>0){
                this.o.setAttributeNS(null,"fill","#ff0000");
                this.o.setAttributeNS(null,"cx",x);
                this.o.setAttributeNS(null,"cy",y);
                this.o.setAttributeNS(null,"r","5");
                this.o.setAttributeNS(null,"opacity","1.0");
        } 
        else {
                        this.o.setAttributeNS(null,"fill","#00ff00");
                this.o.setAttributeNS(null,"cx",x);
                this.o.setAttributeNS(null,"cy",y);
                this.o.setAttributeNS(null,"r","5");
                        this.o.setAttributeNS(null,"opacity","0.3");
        }   
    }

function mainloop() {
    // rotation speed
    A-=Math.PI/120; 
    // refresh time
    k=0;
    for(var i=0;i<6;i++){
        if(TM[i]!=Tm[i]){
            Tm[i]=TM[i];
            // destroy objects
            for(var j in O[k].O)document.getElementById("clock3D").removeChild(O[k].O[j].o);
            delete O[k];
            // create new digit
            O[k] = new Cdigit(k, TM[i]);
        }
            // skip colons
        k+=(i==1 || i==3)?2:1;
    }
    // call animation
    for(var i in O){
        for(var j in O[i].O){
            O[i].O[j].anim();
        }
    }
    setTimeout("mainloop()",20);
}

function timer(){
    // HH:MM:SS
    T = new Date();
    h = T.getHours();
    m = T.getMinutes();
    s = T.getSeconds();

    TM = [
        Math.floor(h/10),
        h%10,
        Math.floor(m/10),
        m%10,
        Math.floor(s/10),
        s%10
    ];
    setTimeout("timer()" ,1000); 
}

function dayDisplay()
{
    var dayName = 
         new Array("Sunday","Monday","Tuesday","Thursday",
                    "Friday","Saturday");
      var monthName = 
         new Array("January","February","March","April","May","June","July",
"August","September","October","November","December");

    var today = new Date();

    document.getElementById("date").firstChild.nodeValue = 
            dayName[today.getDay()-1]+", "
                + monthName[today.getMonth()]+" "
                + today.getDate()+", "+today.getFullYear();
}

]]>

</script>


<rect id="backGround" x="50" y="50" width="300" height="200" fill="black" stroke="#444" stroke-width="5"/>
<rect id="backGround" x="53" y="53" width="294" height="194" fill="none" stroke="#fff" stroke-width="1"/>

<g id="clock3D">
 <circle id="red" cx="-150" cy="-150" r="4" fill="red"/>
 <circle id="green" cx="-150" cy="-150" r="4" fill="green" opacity="0.3"/>
</g>

<text id="date" x="80" y="240" font-size="20" fill="white">
date
    <animate attributeName="opacity" dur="5s" 
      values="1;0;1" repeatCount="indefinite"/>
</text>

</svg>

</div>









    <!--For mobile version-->   
            <div id="svgtimemobile"> 

            <svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   onload="startUp()">

<script>

<![CDATA[

/* Evolved from DHTML version 
   @ http://www.dhteumeuleu.com */

var xmlns="http://www.w3.org/2000/svg";
var xlinkns = "http://www.w3.org/1999/xlink"; 

var backX0;
var backY0;
var backWidth;
var backHeight;

var O=[];
var TM=[];
var Tm=[];
var A = 1000;


var digits = [
" ###   #  #### #### #   ###### ### ##### ###  ###      ",
"#   #  #      #    ##   ##    #   #    ##   ##   #     ",
"#   #  #      #    ##   ##    #        ##   ##   #  #  ",
"#   #  #   ###  ### ######### ####     # ###  ####     ",
"#   #  #  #        #    #    ##   #    ##   #    #  #  ",
"#   #  #  #        #    #    ##   #    ##   ##   #     ",
" ###   #  #########     #####  ###     # ###  ###      "
];


function startUp() {

      var myBack = document.getElementById("backGround");
      backX0 = myBack.getAttributeNS(null,"x");
      backY0 = myBack.getAttributeNS(null,"y");
      backWidth = myBack.getAttributeNS(null,"width");
      backHeight = myBack.getAttributeNS(null,"height");

      dayDisplay();
    timer();

      /* 
         k        0  1  2  3  4  5  6  7   -> 1st args of Cdigit
        display   *  *  :  *  *  :  *  *   -> 2nd args of Cdigit 
                                              ('10' for ':')
      */
      var k=0;   
    for(var i=0;i<6;i++){
        O[k] = new Cdigit(k++, TM[i]);
        if(i==1 || i==3) O[k] = new Cdigit(k++, 10);
    }      
    mainloop();
}

/* Input for Cdigit
   N = 0-7
   d = 0-9 or 10 */

function Cdigit(N,d){
    // digit prototype: 5 x 7 dots for each of digit from 0 to 9
    this.O = [];
    for(var i=0;i<7;i++){
        for(var j=0;j<5;j++){
            if(digits[i].charAt(5*d+j)!=" "){
                this.O.push(
                              // COjb(this.a, this.z)
                    new CObj((
                        (28*N)+(j*5))/(180/Math.PI),
                        -42+i*12
                    )
                );
            }
        }
    }
}

function CObj(a,z){
    // create led element
    this.o = document.createElementNS(xmlns,"circle");
    document.getElementById("clock3D").appendChild(this.o);
    this.a=a;
    this.z=z;
    this.plot=true;
}

// leds lighting

// main 3D function
CObj.prototype.anim=function() {
        // z axis rotation
            var x=Math.sin(A+this.a)*100;
        var y=Math.cos(A+this.a)*100;
        // simple 3D
        var x1=y;
        var zz=this.z;
        var y1=-zz;
        zz=x;
        // 2D projection
        var r=396/(396+zz);
        x=Math.round(backWidth/2-x1/r)+parseFloat(backX0);
        y=Math.round(backHeight/2-y1/r)+parseFloat(backY0);

        // leds lighting
        if(zz>0){
                this.o.setAttributeNS(null,"fill","#ff0000");
                this.o.setAttributeNS(null,"cx",x);
                this.o.setAttributeNS(null,"cy",y);
                this.o.setAttributeNS(null,"r","5");
                this.o.setAttributeNS(null,"opacity","1.0");
        } 
        else {
                        this.o.setAttributeNS(null,"fill","#00ff00");
                this.o.setAttributeNS(null,"cx",x);
                this.o.setAttributeNS(null,"cy",y);
                this.o.setAttributeNS(null,"r","5");
                        this.o.setAttributeNS(null,"opacity","0.3");
        }   
    }

function mainloop() {
    // rotation speed
    A-=Math.PI/120; 
    // refresh time
    k=0;
    for(var i=0;i<6;i++){
        if(TM[i]!=Tm[i]){
            Tm[i]=TM[i];
            // destroy objects
            for(var j in O[k].O)document.getElementById("clock3D").removeChild(O[k].O[j].o);
            delete O[k];
            // create new digit
            O[k] = new Cdigit(k, TM[i]);
        }
            // skip colons
        k+=(i==1 || i==3)?2:1;
    }
    // call animation
    for(var i in O){
        for(var j in O[i].O){
            O[i].O[j].anim();
        }
    }
    setTimeout("mainloop()",20);
}

function timer(){
    // HH:MM:SS
    T = new Date();
    h = T.getHours();
    m = T.getMinutes();
    s = T.getSeconds();

    TM = [
        Math.floor(h/10),
        h%10,
        Math.floor(m/10),
        m%10,
        Math.floor(s/10),
        s%10
    ];
    setTimeout("timer()" ,1000); 
}

function dayDisplay()
{
    var dayName = 
         new Array("Sunday","Monday","Tuesday","Thursday",
                    "Friday","Saturday");
      var monthName = 
         new Array("January","February","March","April","May","June","July",
"August","September","October","November","December");

    var today = new Date();

    document.getElementById("date").firstChild.nodeValue = 
            dayName[today.getDay()-1]+", "
                + monthName[today.getMonth()]+" "
                + today.getDate()+", "+today.getFullYear();
}

]]>

</script>


<rect id="backGround" x="3" y="50" width="247" height="200" fill="black" stroke="#444" stroke-width="5"/>
<rect id="backGround" x="3" y="53" width="247" height="194" fill="none" stroke="#fff" stroke-width="1"/>

<g id="clock3D">
 <circle id="red" cx="-150" cy="1000" r="4" fill="red"/>
 <circle id="green" cx="-150" cy="-150" r="4" fill="green" opacity="0.3"/>
</g>

<text id="date" x="5" y="240" font-size="20" fill="white">
date
    <animate attributeName="opacity" dur="5s" 
      values="1;0;1" repeatCount="indefinite"/>
</text>

</svg>

</div>

我把数字 2 放在每个函数和 ID 后面，以及任何我认为需要在移动版本代码后面加上 2 的名称，但它仍然无法正常显示。我再也找不到需要数字 2 的地方了。如果我复制移动版本代码并粘贴到没有桌面版本代码的新页面中，它工作正常。只有当桌面版和移动版代码放在一起时，任何一个都不会正常显示。还有什么需要编辑的？以下是我为移动版本编辑的代码。

<!--For desktop version-->      
    <div id="svgtimedesktop">   


<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   onload="startUp()">

<script>

<![CDATA[

/* Evolved from DHTML version 
   @ http://www.dhteumeuleu.com */

var xmlns="http://www.w3.org/2000/svg";
var xlinkns = "http://www.w3.org/1999/xlink"; 

var backX0;
var backY0;
var backWidth;
var backHeight;

var O=[];
var TM=[];
var Tm=[];
var A = 1000;


var digits = [
" ###   #  #### #### #   ###### ### ##### ###  ###      ",
"#   #  #      #    ##   ##    #   #    ##   ##   #     ",
"#   #  #      #    ##   ##    #        ##   ##   #  #  ",
"#   #  #   ###  ### ######### ####     # ###  ####     ",
"#   #  #  #        #    #    ##   #    ##   #    #  #  ",
"#   #  #  #        #    #    ##   #    ##   ##   #     ",
" ###   #  #########     #####  ###     # ###  ###      "
];


function startUp() {

      var myBack = document.getElementById("backGround");
      backX0 = myBack.getAttributeNS(null,"x");
      backY0 = myBack.getAttributeNS(null,"y");
      backWidth = myBack.getAttributeNS(null,"width");
      backHeight = myBack.getAttributeNS(null,"height");

      dayDisplay();
    timer();

      /* 
         k        0  1  2  3  4  5  6  7   -> 1st args of Cdigit
        display   *  *  :  *  *  :  *  *   -> 2nd args of Cdigit 
                                              ('10' for ':')
      */
      var k=0;   
    for(var i=0;i<6;i++){
        O[k] = new Cdigit(k++, TM[i]);
        if(i==1 || i==3) O[k] = new Cdigit(k++, 10);
    }      
    mainloop();
}

/* Input for Cdigit
   N = 0-7
   d = 0-9 or 10 */

function Cdigit(N,d){
    // digit prototype: 5 x 7 dots for each of digit from 0 to 9
    this.O = [];
    for(var i=0;i<7;i++){
        for(var j=0;j<5;j++){
            if(digits[i].charAt(5*d+j)!=" "){
                this.O.push(
                              // COjb(this.a, this.z)
                    new CObj((
                        (28*N)+(j*5))/(180/Math.PI),
                        -42+i*12
                    )
                );
            }
        }
    }
}

function CObj(a,z){
    // create led element
    this.o = document.createElementNS(xmlns,"circle");
    document.getElementById("clock3D").appendChild(this.o);
    this.a=a;
    this.z=z;
    this.plot=true;
}

// leds lighting

// main 3D function
CObj.prototype.anim=function() {
        // z axis rotation
            var x=Math.sin(A+this.a)*100;
        var y=Math.cos(A+this.a)*100;
        // simple 3D
        var x1=y;
        var zz=this.z;
        var y1=-zz;
        zz=x;
        // 2D projection
        var r=396/(396+zz);
        x=Math.round(backWidth/2-x1/r)+parseFloat(backX0);
        y=Math.round(backHeight/2-y1/r)+parseFloat(backY0);

        // leds lighting
        if(zz>0){
                this.o.setAttributeNS(null,"fill","#ff0000");
                this.o.setAttributeNS(null,"cx",x);
                this.o.setAttributeNS(null,"cy",y);
                this.o.setAttributeNS(null,"r","5");
                this.o.setAttributeNS(null,"opacity","1.0");
        } 
        else {
                        this.o.setAttributeNS(null,"fill","#00ff00");
                this.o.setAttributeNS(null,"cx",x);
                this.o.setAttributeNS(null,"cy",y);
                this.o.setAttributeNS(null,"r","5");
                        this.o.setAttributeNS(null,"opacity","0.3");
        }   
    }

function mainloop() {
    // rotation speed
    A-=Math.PI/120; 
    // refresh time
    k=0;
    for(var i=0;i<6;i++){
        if(TM[i]!=Tm[i]){
            Tm[i]=TM[i];
            // destroy objects
            for(var j in O[k].O)document.getElementById("clock3D").removeChild(O[k].O[j].o);
            delete O[k];
            // create new digit
            O[k] = new Cdigit(k, TM[i]);
        }
            // skip colons
        k+=(i==1 || i==3)?2:1;
    }
    // call animation
    for(var i in O){
        for(var j in O[i].O){
            O[i].O[j].anim();
        }
    }
    setTimeout("mainloop()",20);
}

function timer(){
    // HH:MM:SS
    T = new Date();
    h = T.getHours();
    m = T.getMinutes();
    s = T.getSeconds();

    TM = [
        Math.floor(h/10),
        h%10,
        Math.floor(m/10),
        m%10,
        Math.floor(s/10),
        s%10
    ];
    setTimeout("timer()" ,1000); 
}

function dayDisplay()
{
    var dayName = 
         new Array("Sunday","Monday","Tuesday","Thursday",
                    "Friday","Saturday");
      var monthName = 
         new Array("January","February","March","April","May","June","July",
"August","September","October","November","December");

    var today = new Date();

    document.getElementById("date").firstChild.nodeValue = 
            dayName[today.getDay()-1]+", "
                + monthName[today.getMonth()]+" "
                + today.getDate()+", "+today.getFullYear();
}

]]>

</script>


<rect id="backGround" x="50" y="50" width="300" height="200" fill="black" stroke="#444" stroke-width="5"/>
<rect id="backGround" x="53" y="53" width="294" height="194" fill="none" stroke="#fff" stroke-width="1"/>

<g id="clock3D">
 <circle id="red" cx="-150" cy="-150" r="4" fill="red"/>
 <circle id="green" cx="-150" cy="-150" r="4" fill="green" opacity="0.3"/>
</g>

<text id="date" x="80" y="240" font-size="20" fill="white">
date
    <animate attributeName="opacity" dur="5s" 
      values="1;0;1" repeatCount="indefinite"/>
</text>

</svg>

</div>








    <!--For mobile version-->   
            <div id="svgtimemobile"> 

            <svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   onload="startUp2()">

<script>

<![CDATA[

/* Evolved from DHTML version 
   @ http://www.dhteumeuleu.com */

var xmlns="http://www.w3.org/2000/svg";
var xlinkns = "http://www.w3.org/1999/xlink"; 

var backX0;
var backY0;
var backWidth;
var backHeight;

var O=[];
var TM=[];
var Tm=[];
var A = 1000;


var digits = [
" ###   #  #### #### #   ###### ### ##### ###  ###      ",
"#   #  #      #    ##   ##    #   #    ##   ##   #     ",
"#   #  #      #    ##   ##    #        ##   ##   #  #  ",
"#   #  #   ###  ### ######### ####     # ###  ####     ",
"#   #  #  #        #    #    ##   #    ##   #    #  #  ",
"#   #  #  #        #    #    ##   #    ##   ##   #     ",
" ###   #  #########     #####  ###     # ###  ###      "
];

function startUp2() {

      var myBack2 = document.getElementById("backGround2");
      backX0 = myBack2.getAttributeNS(null,"x");
      backY0 = myBack2.getAttributeNS(null,"y");
      backWidth = myBack2.getAttributeNS(null,"width");
      backHeight = myBack2.getAttributeNS(null,"height");

      dayDisplay2();
    timer2();

      /* 
         k        0  1  2  3  4  5  6  7   -> 1st args of Cdigit
        display   *  *  :  *  *  :  *  *   -> 2nd args of Cdigit 
                                              ('10' for ':')
      */
      var k=0;   
    for(var i=0;i<6;i++){
        O[k] = new Cdigit2(k++, TM[i]);
        if(i==1 || i==3) O[k] = new Cdigit2(k++, 10);
    }      
    mainloop2();
}

/* Input for Cdigit
   N = 0-7
   d = 0-9 or 10 */

function Cdigit2(N2,d2){
    // digit prototype: 5 x 7 dots for each of digit from 0 to 9
    this.O = [];
    for(var i=0;i<7;i++){
        for(var j=0;j<5;j++){
            if(digits[i].charAt(5*d2+j)!=" "){
                this.O.push(
                              // COjb(this.a, this.z)
                    new CObj2((
                        (28*N2)+(j*5))/(180/Math.PI),
                        -42+i*12
                    )
                );
            }
        }
    }
}

function CObj2(a2,z2){
    // create led element
    this.o = document.createElementNS(xmlns,"circle");
    document.getElementById("clock3D2").appendChild(this.o);
    this.a=a2;
    this.z=z2;
    this.plot2=true;
}

// leds lighting

// main 3D function
CObj2.prototype.anim2=function() {
        // z axis rotation
            var x=Math.sin(A+this.a)*100;
        var y=Math.cos(A+this.a)*100;
        // simple 3D
        var x1=y;
        var zz=this.z;
        var y1=-zz;
        zz=x;
        // 2D projection
        var r=396/(396+zz);
        x=Math.round(backWidth/2-x1/r)+parseFloat(backX0);
        y=Math.round(backHeight/2-y1/r)+parseFloat(backY0);

        // leds lighting
        if(zz>0){
                this.o.setAttributeNS(null,"fill","#ff0000");
                this.o.setAttributeNS(null,"cx",x);
                this.o.setAttributeNS(null,"cy",y);
                this.o.setAttributeNS(null,"r","5");
                this.o.setAttributeNS(null,"opacity","1.0");
        } 
        else {
                        this.o.setAttributeNS(null,"fill","#00ff00");
                this.o.setAttributeNS(null,"cx",x);
                this.o.setAttributeNS(null,"cy",y);
                this.o.setAttributeNS(null,"r","5");
                        this.o.setAttributeNS(null,"opacity","0.3");
        }   
    }

function mainloop2() {
    // rotation speed
    A-=Math.PI/120; 
    // refresh time
    k=0;
    for(var i=0;i<6;i++){
        if(TM[i]!=Tm[i]){
            Tm[i]=TM[i];
            // destroy objects
            for(var j in O[k].O)document.getElementById("clock3D2").removeChild(O[k].O[j].o);
            delete O[k];
            // create new digit
            O[k] = new Cdigit2(k, TM[i]);
        }
            // skip colons
        k+=(i==1 || i==3)?2:1;
    }
    // call animation
    for(var i in O){
        for(var j in O[i].O){
            O[i].O[j].anim2();
        }
    }
    setTimeout("mainloop2()",20);
}

function timer2(){
    // HH:MM:SS
    T = new Date();
    h = T.getHours();
    m = T.getMinutes();
    s = T.getSeconds();

    TM = [
        Math.floor(h/10),
        h%10,
        Math.floor(m/10),
        m%10,
        Math.floor(s/10),
        s%10
    ];
    setTimeout("timer2()" ,1000); 
}

function dayDisplay2()
{
    var dayName = 
         new Array("Sunday","Monday","Tuesday","Thursday",
                    "Friday","Saturday");
      var monthName = 
         new Array("January","February","March","April","May","June","July",
"August","September","October","November","December");

    var today = new Date();

    document.getElementById("date2").firstChild.nodeValue = 
            dayName[today.getDay()-1]+", "
                + monthName[today.getMonth()]+" "
                + today.getDate()+", "+today.getFullYear();
}

]]>

</script>


<rect id="backGround2" x="3" y="50" width="247" height="200" fill="black" stroke="#444" stroke-width="5"/>
<rect id="backGround2" x="3" y="53" width="247" height="194" fill="none" stroke="#fff" stroke-width="1"/>

<g id="clock3D2">
 <circle id="red2" cx="-150" cy="1000" r="4" fill="red"/>
 <circle id="green2" cx="-150" cy="-150" r="4" fill="green" opacity="0.3"/>
</g>

<text id="date2" x="5" y="240" font-size="20" fill="white">
date
    <animate attributeName="opacity" dur="5s" 
      values="1;0;1" repeatCount="indefinite"/>
</text>

</svg>

</div>

最佳答案

您在页面上有多个具有相同 ID 的元素，例如

<rect id="backGround" x="3" y="50" width="247" height="200" fill="black" stroke="#444" stroke-width="5"/>
<rect id="backGround" x="3" y="53" width="247" height="194" fill="none" stroke="#fff" stroke-width="1"/>

(您实际上有 4 个具有相同 ID 的矩形)。

这是无效的，并且使一切都无法正常工作。您需要为所有内容提供唯一 ID 并调整代码，以便它引用适当的元素 ID。

您还复制了相同的 javascript 函数，但由于它们完全相同，目前并不重要，一旦您为所有元素提供唯一 ID，它就会发生。所以你可以改变移动功能，例如例如，在移动案例中，startUp 可以变成 mobileStartUp

一个更复杂且重复更少的解决方案是调整 javascript，以便方法采用元素 ID 名称，例如

function startUp() {

      var myBack = document.getElementById("backGround");

可能成为

function startUp(backgroundName) {

      var myBack = document.getElementById(backgroundName);

然后你会调整调用为

在一种情况下是 startUp("background")，在另一种情况下可能是 startUp("mobileBackground")，因此您不需要单独的函数。

关于javascript - 如何在一页上有两个 svg 时钟？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20871677/

上一篇：image - 为什么我的图像不尊重其父级(部分)的填充

下一篇：javascript - JQuery Mobile 文本输入不聚焦

相关文章：

css - 传出 HTML 链接被 CSS 破坏

javascript - 无法使用 $.Deferred() 对象和 $.then() 中断递归

javascript - 如何制作jquery轮播

html - 当按钮在 Firefox 中处于事件状态时如何防止按钮文本移动？

javascript - 我想将ul的第一个li的href设置为 "#1"？

html & css, 定义不同 "types of tag"

php - 如何使用 PHP 向多个用户发送消息

css - 如果 div 内容是图像，固定标题不起作用

javascript - 如何使用 javascript 将相对路径的脚本注入(inject)到 html

javascript - CSS - 使用 :nth-child to select an element

©2024 IT工具网  联系我们