使用JavaScript实现灯泡开关记录

使用JavaScript实现灯泡开关并记录

代码:

  <div style="margin-left: 500px;float: left">
        <img src="img/dark.png" id="img">
        <input type="button" value="开关" onclick="onOff()">
        <div style="height: 800px;width: 400px;background-color: antiquewhite;float: right;overflow:auto;padding-left: 20px" id="log"></div>
    </div>
<script type="text/javascript">
    var onORoff=false
    function getTime(){
    //获取时间
        var date = new Date()
        var hour = date.getHours()
        var min = date.getMinutes()
        var sec = date.getSeconds()
        return hour+"时"+min+"分"+sec+"秒"
    }
    function onOff() {
    //判断并输出记录信息
        if(onORoff){
            document.getElementById('img').src="img/dark.png"
            document.getElementById('log').innerHTML +=getTime()+ '关<br>'
            onORoff = false
        }else{
            document.getElementById('img').src="img/bright.png"
            document.getElementById('log').innerHTML += getTime()+ '开<br>'
            onORoff = true
        }
    }

</script>

效果