用js实现电灯的开与关

最新推荐文章于 2022-07-06 12:32:44 发布

Single-person

最新推荐文章于 2022-07-06 12:32:44 发布

阅读量279

点赞数

本文链接：https://blog.csdn.net/QQ134321678QQ/article/details/102539802

版权

用js实现电灯的开与关

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

<script type="text/javascript">
    //图片放入数组
    var img = ["Open.png", "Off.png"];
    var i = 0;
    function f() {
        document.getElementById("image").src = img[i];
        //判断变量的值，切换图片
        if (i == 0) {
            i =1;
            document.getElementById("name").innerHTML += time()+':开灯了<br/>';
        } else {
            i = 0;
            document.getElementById("name").innerHTML += time()+':关灯了<br/>';
        }
        //判断值
        function TextTime(j) {
            if (j < 10) {
                j = '0' + j;
            }
            return j;
        }
        //获取时间，返回值
        function time() {
            var time = document.getElementById("name");
            var myDate = new Date();
            var year = myDate.getFullYear();
            var month = myDate.getMonth() + 1;
            var date = myDate.getDate();
            var h = myDate.getHours();
            var m = myDate.getMinutes();
            var s = myDate.getSeconds();
            m = TextTime(m);
            s = TextTime(s);
            h = TextTime(h);
            var d = myDate.getDay();
            var weekday = ['今天星期天，没课', '今天星期一，有课', '今天星期二，有课', '今天星期三，有课', '今天星期四，有课', '今天星期五，有课', '今天星期六，没课'];
            time = year + '.' + month + '.' + date + '.' + weekday[d] + h + ':' + m + ':' + s;
            return time;
        }
    }
</script>

<div  style="float: left;margin-left: 550px;height: 1000px">
    <img src="Open.png" width="350" height="450" id="image"/><br/>

</div>
<div style="float: contour;">
    <input type="button" value="请点击" onclick="f()" style="margin-left:100px;background: #FF0000"/>
</div>
<br/><br/><br/>
<div id="name"  ></div>
</body>
</html>

代码中所用的图片

Single-person

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用js实现电灯的开与关

用js实现电灯的开与关<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>开与关</title></head><body><script type="text/javascript"&...
复制链接

扫一扫