JavaScript事件图片切换

JS简单的图片切换-电灯泡明灭事件


目录列表
JavaScript事件图片切换_第1张图片
以下就是我的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <img src="灭灯.gif" id="imgShow"><br>
    <img src="关闭.jpg" id="imgOff" onclick="f2()">
    <span id="time" ></span>
<script type="text/javascript">
    var i =0;
    var n =0;
    var imgs=["亮灯.gif","灭灯.gif"];
    var imgSwitch=["关闭.jpg","打开.png"];
    function f() {
     
        document.getElementById("imgShow").src = imgs[i];
        i++;
        if(i%2==0){
     
            document.getElementById('imgShow').src='灭灯.gif';

        }else{
     
            document.getElementById('imgShow').src='亮灯.gif';
        }
    }
    function f2() {
     
        f();
        var now = new Date();
        var year = now.getFullYear();       //获取当前年
        var month = now.getMonth();         //获取当前月
        var day = now.getDate();            //获取当前日
        var hour = now.getHours();          //获取当前时
        var minu = now.getMinutes();        //获取当前分
        var send = now.getSeconds();        //获取当前秒
        var p = document.createElement('p');
        document.getElementById("imgOff").src = imgSwitch[n];
        n++;
        if(n%2==0){
     
            document.getElementById('imgOff').src='关闭.jpg';
            p.innerText=year+"年"+month+"月"+day+"日"+hour+"时"+minu+"分"+send+"秒"+"灯关了";
        }else{
     
            document.getElementById('imgOff').src='打开.png';
            p.innerText=year+"年"+month+"月"+day+"日"+hour+"时"+minu+"分"+send+"秒"+"灯开了";
        }
            document.getElementById('time').appendChild(p);
    }
</script>
</body>
</html>

页面内容:其实就是几个img标签

实现原理:通过修改Img标签的src属性,实现图片的切换

备注:代码中flag变量仅仅用作标记,也可以直接用Img标签的src属性进行判断

本博文只是一个简单的实现逻辑,适用于初学Javascript的新手作为参考
如有不正,请指出,谢谢!

你可能感兴趣的:(JavaScript,JavaScript)