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

Question

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

<!--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的任何名称，它仍然无法正常显示。我已经无法找到需要排名第二的人了。如果我复制移动版本代码并粘贴到没有桌面版本代码的新页面，它工作正常。仅当桌面版和移动版本代码在一起时，任何一个都无法正常显示。还需要编辑什么？以下是我编辑的移动版代码。

<!--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>

Answer 1

页面上有多个元素具有相同的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的rects。）

这是无效的，并且使一切都无法正常运行。您需要为所有内容提供唯一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”），因此您不需要具有单独的功能。