简易点击灯泡点亮

最新推荐文章于 2021-06-04 03:24:28 发布

我是牛小牛

最新推荐文章于 2021-06-04 03:24:28 发布

阅读量352

点赞数

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/weixin_45747700/article/details/102539016

版权

JavaScript 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的简单灯泡开关效果。通过点击按钮，页面上的图片（代表灯泡）会在亮灯和熄灯状态之间切换，并在控制台记录操作时间。该示例展示了基本的网页交互设计，适用于初学者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.简易点击灯泡点亮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<center>
<img src="1.jpg" width="500" height="300" id="image"/><br>
<input type="button" value="点击开灯" onclick="str()">
<script>
var  imgs =["2.jpg","1.jpg"];
var i=0;
var newDate =new Date();
function str() {
document.getElementById("image").src=imgs[i];
 if(i==0) {
     i = 1;
     alert(newDate.toLocaleString()+"已开灯");
 }else{
     i=0;
     alert(newDate.toLocaleString()+"已关灯");
 }
}
</script>
</center>
</body>
</html>