Javascript 单击图像集右侧或左侧的运动图像_Javascript_Html

Javascript 单击图像集右侧或左侧的运动图像

javascript html

Javascript 单击图像集右侧或左侧的运动图像,javascript,html,Javascript,Html,所以我试着这样做，当点击页面底部的青蛙时，它每次都会转到它旁边图像的另一侧。到目前为止，我已经能够做到一次，但我不知道如何做更多的过去这两种方法。任何帮助都将不胜感激。（我删除了一些个人信息，如果你想知道为什么有些东西丢失了。）作业4 函数AlertStudent（）{ 警报（“”）； } 函数控制台学生（）{ 控制台日志（“”）； } 函数ShowStudent（）{ var x=document.getElementById（“学生”）； x、 style.display=“block”

所以我试着这样做，当点击页面底部的青蛙时，它每次都会转到它旁边图像的另一侧。到目前为止，我已经能够做到一次，但我不知道如何做更多的过去这两种方法。任何帮助都将不胜感激。（我删除了一些个人信息，如果你想知道为什么有些东西丢失了。）


作业4
函数AlertStudent（）{
警报（“”）；
}
函数控制台学生（）{
控制台日志（“”）；
}
函数ShowStudent（）{
var x=document.getElementById（“学生”）；
x、 style.display=“block”；
}
函数HideStudent（）{
var x=document.getElementById（“学生”）；
x、 style.display=“无”；
}
函数AlertSubject（）{
警报（“”）；
}
函数ConsoleSubject（）{
控制台日志（“”）；
}
函数ShowSubject（）{
var x=document.getElementById（“主题”）；
x、 style.display=“block”；
}
函数HideSubject（）{
var x=document.getElementById（“主题”）；
x、 style.display=“无”；
}
函数AlertAssignment（）{
警报（“任务4-2019年9月14日”）；
}
函数控制台设计（）{
控制台日志（“任务4-2019年9月14日”）；
}
函数ShowAssignment（）{
var x=document.getElementById（“赋值”）；
x、 style.display=“block”；
}
函数HideAssignment（）{
var x=document.getElementById（“赋值”）；
x、 style.display=“无”；
}
函数AlertLab（）{
警报（“星期三8:30-10:30”）；
}
函数ConsoleLab（）{
控制台日志（“星期三8:30-10:30”）；
}
函数ShowLab（）{
var x=document.getElementById（“实验室”）；
x、 style.display=“block”；
}
函数HideLab（）{
var x=document.getElementById（“实验室”）；
x、 style.display=“无”；
}
函数（）{
var p1Text=p1.textContent；
p1.textContent=p2.textContent；
p2.textContent=p1Text；
}
函数Cat（）{
document.getElementById（“myText”）.value=“用户单击Cat”；
var displaySpan=document.getElementById（“显示”）；
displaySpan.innerHTML=“单击Cat”；
var image=document.getElementById（“displayImg”）；
image.src=“cat.png”；
}
功能狗（）{
document.getElementById（“myText”）.value=“用户点击狗”；
var displaySpan=document.getElementById（“显示”）；
displaySpan.innerHTML=“单击狗”；
var image=document.getElementById（“displayImg”）；
image.src=“dog.png”；
}
函数Frog（）{
document.getElementById（“myText”）.value=“用户点击青蛙”；
var displaySpan=document.getElementById（“显示”）；
displaySpan.innerHTML=“青蛙被点击”；
var image=document.getElementById（“displayImg”）；
image.src=“frog.png”；
}
var计数器=0；
var=1=0；
活动时间（）{
计数器=计数器+1；
var counterSpan=document.getElementById（“计数器小时”）；
counterSpan.innerHTML=计数器；
如果（计数器>=23）{
计数器=-1；
}
}
功能分钟（）{
计数器1=计数器1+1；
var counterSpan=document.getElementById（“计数器分钟”）；
counterSpan.innerHTML=counter1；
如果（计数器1>=59）{
计数器1=-1；
}
}
功能（动物）{
警惕（“不要点击我，点击青蛙”）；
}
函数FrogChange（）{
var image=document.getElementById（“displayImg1”）；
image.src=“frog.png”；
var x=document.getElementById（“frog”）；
x、 style.display=“无”；
}
函数FrogClick2（）{
var image=document.getElementById（“displayImg3”）；
image.src=“frog.png”；
var x=document.getElementById（“displayImg1”）；
x、 style.display=“无”；
}
显示
隐藏
警觉的
安慰




显示
隐藏
警觉的
安慰




任务4-2019年9月14日
显示
隐藏
警觉的
安慰




星期三8:30-10:30
显示
隐藏
警觉的
安慰






切换段落


猫
狗
青蛙

不要使用不同的javascript函数来移动青蛙，只使用一个。通过在功能参数中使用“this”，提供青蛙所在的当前元件

        <script>
        function AlertStudent() {
            alert("");
        }

        function ConsoleStudent() {
            console.log("");
        }

        function ShowStudent() {
            var x = document.getElementById("student");
            x.style.display = "block";
        }

        function HideStudent() {
            var x = document.getElementById("student");
            x.style.display = "none";
        }

        function AlertSubject() {
            alert("");
        }

        function ConsoleSubject() {
            console.log("");
        }

        function ShowSubject() {
            var x = document.getElementById("subject");
            x.style.display = "block";
        }

        function HideSubject() {
            var x = document.getElementById("subject");
            x.style.display = "none";
        }

        function AlertAssignment() {
            alert("Assignment 4 - 14th September 2019");
        }

        function ConsoleAssignment() {
            console.log("Assignment 4 - 14th September 2019");
        }

        function ShowAssignment() {
            var x = document.getElementById("assignment");
            x.style.display = "block";
        }

        function HideAssignment() {
            var x = document.getElementById("assignment");
            x.style.display = "none";
        }

        function AlertLab() {
            alert("Wednesday 8:30-10:30");
        }

        function ConsoleLab() {
            console.log("Wednesday 8:30-10:30");
        }

        function ShowLab() {
            var x = document.getElementById("lab");
            x.style.display = "block";
        }

        function HideLab() {
            var x = document.getElementById("lab");
            x.style.display = "none";
        }

        function SwitchParagraphs() {
            var p1Text = p1.textContent;
            p1.textContent = p2.textContent;
            p2.textContent = p1Text;
        }

        function Cat() {
            document.getElementById("myText").value = "User clicks Cat";

            var displaySpan = document.getElementById("display");
            displaySpan.innerHTML = "Cat is clicked";

            var image = document.getElementById("displayImg");
            image.src = "cat.png";
        }

        function Dog() {
            document.getElementById("myText").value = "User clicks Dog";

            var displaySpan = document.getElementById("display");
            displaySpan.innerHTML = "Dog is clicked";

            var image = document.getElementById("displayImg");
            image.src = "dog.png";
        }

        function Frog() {
            document.getElementById("myText").value = "User clicks Frog";

            var displaySpan = document.getElementById("display");
            displaySpan.innerHTML = "Frog is clicked";

            var image = document.getElementById("displayImg");
            image.src = "frog.png";
        }

        var counter = 0;
        var counter1 = 0;

        function Hour() {
            counter = counter + 1;
            var counterSpan = document.getElementById("counterHour");
            counterSpan.innerHTML = counter;
            if (counter >= 23) {
                counter = -1;
            }
        }

        function Minute() {
            counter1 = counter1 + 1;
            var counterSpan = document.getElementById("counterMinute");
            counterSpan.innerHTML = counter1;
            if (counter1 >= 59) {
                counter1 = -1;
            }
        }

        function AlertAnimal() {
            alert("Don’t click me, click the frog");
        }

        function FrogChange(el) {
            console.log(el.id);
            if(el.id == "displayImg3" ){
                document.getElementById("displayImg3").src = "";
                document.getElementById("displayImg1").src = "frog.png";
            }
            else {
                document.getElementById("displayImg3").src = "frog.png";
                document.getElementById("displayImg1").src = "";            
            }

    //        var image = document.getElementById("displayImg1");
    //        image.src = "frog.png";
    //
    //        var x = document.getElementById("frog");
    //        x.style.display = "none";
        }

        function FrogClick2() {
            var image = document.getElementById("displayImg3");
            image.src = "frog.png";
            var x = document.getElementById("displayImg1");
            x.style.display = "none";
        }
    </script>

        <div id="student"></div>
    <button onClick="ShowStudent()">Show</button>
    <button onClick="HideStudent()">Hide</button>
    <button onClick="AlertStudent()">Alert</button>
    <button onClick="ConsoleStudent()">Console</button>
    <br>
    <br>
    <div id="subject"></div>
    <button onClick="ShowSubject()">Show</button>
    <button onClick="HideSubject()">Hide</button>
    <button onClick="AlertSubject()">Alert</button>
    <button onClick="ConsoleSubject()">Console</button>
    <br>
    <br>
    <div id="assignment">Assignment 4 - 14th September 2019</div>
    <button onClick="ShowAssignment()">Show</button>
    <button onClick="HideAssignment()">Hide</button>
    <button onClick="AlertAssignment()">Alert</button>
    <button onClick="ConsoleAssignment()">Console</button>
    <br>
    <br>
    <div id="lab">Wednesday 8:30-10:30</div>
    <button onClick="ShowLab()">Show</button>
    <button onClick="HideLab()">Hide</button>
    <button onClick="AlertLab()">Alert</button>
    <button onClick="ConsoleLab()">Console</button>
    <br>
    <br>
    <hr />
    <p id="p1"></p>
    <button onClick="SwitchParagraphs()">Switch Paragraphs</button>
    <p id="p2"></p>
    <hr />
    <button onClick="Cat()">Cat</button>
    <button onClick="Dog()">Dog</button>
    <button onClick="Frog()">Frog</button>
    <br>
    <br>
    <input type="text" id="myText" />
    <br>
    <br>
    <span id="display"></span>
    <br>
    <br>
    <img id="displayImg" />
    <hr />
    <button onClick="Hour()">Hour</button>
    <font size="7">
    <span id="counterHour">0</span>:<span id="counterMinute">0</span></font>
    <button onClick="Minute()">Minute</button>
    <hr />
    <img id="displayImg1" onClick="FrogChange(this)" />
    <img src="cat.png" onClick="AlertAnimal();" id="cat" />
    <img src="dog.png" id="dog" onClick="AlertAnimal();" />
    <img id="displayImg3" src="frog.png" onClick="FrogChange(this);" />


函数AlertStudent（）{
警报（“”）；
}
函数控制台学生（）{
控制台日志（“”）；
}
函数ShowStudent（）{
var x=document.getElementById（“学生”）；
x、 style.display=“block”；
}
函数HideStudent（）{
var x=document.getElementById（“学生”）；
x、 style.display=“无”；
}
函数AlertSubject（）{
警报（“”）；
}
函数ConsoleSubject（）{
控制台日志（“”）；
}
函数ShowSubject（）{
var x=document.getElementById（“主题”）；
x、 style.display=“block”；
}
函数HideSubject（）{
var x=document.getElementById（“主题”）；
x、 style.display=“无”；
}
函数AlertAssignment（）{
警报（“任务4-2019年9月14日”）；
}
函数控制台设计（）{
控制台日志（“任务4-2019年9月14日”）；
}
函数ShowAssignment（）{
var x=document.getElementById（“赋值”）；
x、 style.display=“block”；
}
函数HideAssignment（）{
var x=document.getElementById（“赋值”）；
x、 style.display=“无”；
}
函数AlertLab（）{
警报（“星期三8:30-
        <script>
        function AlertStudent() {
            alert("");
        }

        function ConsoleStudent() {
            console.log("");
        }

        function ShowStudent() {
            var x = document.getElementById("student");
            x.style.display = "block";
        }

        function HideStudent() {
            var x = document.getElementById("student");
            x.style.display = "none";
        }

        function AlertSubject() {
            alert("");
        }

        function ConsoleSubject() {
            console.log("");
        }

        function ShowSubject() {
            var x = document.getElementById("subject");
            x.style.display = "block";
        }

        function HideSubject() {
            var x = document.getElementById("subject");
            x.style.display = "none";
        }

        function AlertAssignment() {
            alert("Assignment 4 - 14th September 2019");
        }

        function ConsoleAssignment() {
            console.log("Assignment 4 - 14th September 2019");
        }

        function ShowAssignment() {
            var x = document.getElementById("assignment");
            x.style.display = "block";
        }

        function HideAssignment() {
            var x = document.getElementById("assignment");
            x.style.display = "none";
        }

        function AlertLab() {
            alert("Wednesday 8:30-10:30");
        }

        function ConsoleLab() {
            console.log("Wednesday 8:30-10:30");
        }

        function ShowLab() {
            var x = document.getElementById("lab");
            x.style.display = "block";
        }

        function HideLab() {
            var x = document.getElementById("lab");
            x.style.display = "none";
        }

        function SwitchParagraphs() {
            var p1Text = p1.textContent;
            p1.textContent = p2.textContent;
            p2.textContent = p1Text;
        }

        function Cat() {
            document.getElementById("myText").value = "User clicks Cat";

            var displaySpan = document.getElementById("display");
            displaySpan.innerHTML = "Cat is clicked";

            var image = document.getElementById("displayImg");
            image.src = "cat.png";
        }

        function Dog() {
            document.getElementById("myText").value = "User clicks Dog";

            var displaySpan = document.getElementById("display");
            displaySpan.innerHTML = "Dog is clicked";

            var image = document.getElementById("displayImg");
            image.src = "dog.png";
        }

        function Frog() {
            document.getElementById("myText").value = "User clicks Frog";

            var displaySpan = document.getElementById("display");
            displaySpan.innerHTML = "Frog is clicked";

            var image = document.getElementById("displayImg");
            image.src = "frog.png";
        }

        var counter = 0;
        var counter1 = 0;

        function Hour() {
            counter = counter + 1;
            var counterSpan = document.getElementById("counterHour");
            counterSpan.innerHTML = counter;
            if (counter >= 23) {
                counter = -1;
            }
        }

        function Minute() {
            counter1 = counter1 + 1;
            var counterSpan = document.getElementById("counterMinute");
            counterSpan.innerHTML = counter1;
            if (counter1 >= 59) {
                counter1 = -1;
            }
        }

        function AlertAnimal() {
            alert("Don’t click me, click the frog");
        }

        function FrogChange(el) {
            console.log(el.id);
            if(el.id == "displayImg3" ){
                document.getElementById("displayImg3").src = "";
                document.getElementById("displayImg1").src = "frog.png";
            }
            else {
                document.getElementById("displayImg3").src = "frog.png";
                document.getElementById("displayImg1").src = "";            
            }

    //        var image = document.getElementById("displayImg1");
    //        image.src = "frog.png";
    //
    //        var x = document.getElementById("frog");
    //        x.style.display = "none";
        }

        function FrogClick2() {
            var image = document.getElementById("displayImg3");
            image.src = "frog.png";
            var x = document.getElementById("displayImg1");
            x.style.display = "none";
        }
    </script>

        <div id="student"></div>
    <button onClick="ShowStudent()">Show</button>
    <button onClick="HideStudent()">Hide</button>
    <button onClick="AlertStudent()">Alert</button>
    <button onClick="ConsoleStudent()">Console</button>
    <br>
    <br>
    <div id="subject"></div>
    <button onClick="ShowSubject()">Show</button>
    <button onClick="HideSubject()">Hide</button>
    <button onClick="AlertSubject()">Alert</button>
    <button onClick="ConsoleSubject()">Console</button>
    <br>
    <br>
    <div id="assignment">Assignment 4 - 14th September 2019</div>
    <button onClick="ShowAssignment()">Show</button>
    <button onClick="HideAssignment()">Hide</button>
    <button onClick="AlertAssignment()">Alert</button>
    <button onClick="ConsoleAssignment()">Console</button>
    <br>
    <br>
    <div id="lab">Wednesday 8:30-10:30</div>
    <button onClick="ShowLab()">Show</button>
    <button onClick="HideLab()">Hide</button>
    <button onClick="AlertLab()">Alert</button>
    <button onClick="ConsoleLab()">Console</button>
    <br>
    <br>
    <hr />
    <p id="p1"></p>
    <button onClick="SwitchParagraphs()">Switch Paragraphs</button>
    <p id="p2"></p>
    <hr />
    <button onClick="Cat()">Cat</button>
    <button onClick="Dog()">Dog</button>
    <button onClick="Frog()">Frog</button>
    <br>
    <br>
    <input type="text" id="myText" />
    <br>
    <br>
    <span id="display"></span>
    <br>
    <br>
    <img id="displayImg" />
    <hr />
    <button onClick="Hour()">Hour</button>
    <font size="7">
    <span id="counterHour">0</span>:<span id="counterMinute">0</span></font>
    <button onClick="Minute()">Minute</button>
    <hr />
    <img id="displayImg1" onClick="FrogChange(this)" />
    <img src="cat.png" onClick="AlertAnimal();" id="cat" />
    <img src="dog.png" id="dog" onClick="AlertAnimal();" />
    <img id="displayImg3" src="frog.png" onClick="FrogChange(this);" />