js灯泡开关的特效

最新推荐文章于 2023-05-15 19:36:36 发布

王中王喜之郎

最新推荐文章于 2023-05-15 19:36:36 发布

阅读量314

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_45746635/article/details/102535326

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

运用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>

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

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

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

王中王喜之郎

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js灯泡开关的特效

运用js代码显示灯泡的开关，以下是代码的具体实现效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div style="...
复制链接

扫一扫