运用js实现电灯的开关并记录开关灯的时间

最新推荐文章于 2022-09-14 17:02:01 发布

wxm_1507448498

最新推荐文章于 2022-09-14 17:02:01 发布

阅读量318

点赞数

文章标签： html

本文链接：https://blog.csdn.net/wxm_1507448498/article/details/102538682

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p{
            height: 800px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="p">
        <img src="img/dark.png" id="bulb" width="520" height="717">
        <img src="img/on.png" id="btn" onclick="switcher()">
    </div>
    <div class="p">
        <p id="show"></p>
    </div>
<script type="text/javascript">
        var imgs = ["img/dark.png","img/bright.png","img/on.png","img/off.png"]
        var i = 1;
        var show = "";
        function switcher() {
            document.getElementById("bulb").src = imgs[i];
            document.getElementById("btn").src = imgs[i+2];
            if (i==0){
                i = 1;
                var str = "关灯";
            }else {
                i = 0;
                var str = "开灯";
            }
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var hour = date.getHours();
            var min = date.getMinutes();
            var sec = date.getSeconds();
            show +="<p>" + year + "年-" + month + "月-" + day + "日  " + hour + "时-" + min + "分-" + sec + "秒" + str+"</p>";
            document.getElementById("show").innerHTML = show;
        }
</script>
</body>
</html>

wxm_1507448498

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
运用js实现电灯的开关并记录开关灯的时间

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .p{ height: 800px; flo...
复制链接

扫一扫