js灯泡开关的特效

运用js代码显示灯泡的开关，
以下是代码的具体实现效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div style="margin-left: 500px;float: left">
    <input type="button" value="开关" onclick="onOff()">
    <img src="on.jpg " id="img" width="300px" height="400px">
    <div  id="show"></div>
</div>

<script type="text/javascript">
    var onORoff=false
    function getTime(){
        //获取时间
        var date = new Date()
        var year = date.getFullYear()
        var mon = date.getMonth()+1
        var day = date.getDate()
        var hour = date.getHours()
        var min = date.getMinutes()
        var sec = date.getSeconds()
        return year +"年"+mon+"月"+day+"日"+hour+"时"+min+"分"+sec+"秒"
    }
    function onOff() {
        //判断并输出记录信息
        if(onORoff){
            document.getElementById('img').src = "on.jpg"
            document.getElementById('show').innerHTML +=getTime()+ '开<br>'
            onORoff = false
        }else{
            document.getElementById('img').src = "off.jpg"
            document.getElementById('show').innerHTML += getTime()+ '关<br>'
            onORoff = true
        }
    }
</script>

</body>
</html>

以下是代码运行的效果，图片可自选，本图有水印

这是点亮的效果
在这里插入图片描述

这是关灯的效果图
在这里插入图片描述

Demo_layui

发布了27 篇原创文章 · 获赞 45 · 访问量 2683

私信关注

js灯泡开关的特效

猜你喜欢