js+css+html实现电灯的开关

最新推荐文章于 2024-09-09 15:56:10 发布

故事不故事

最新推荐文章于 2024-09-09 15:56:10 发布

阅读量1.2k

点赞数

分类专栏： html 文章标签： html js css

原创

本文链接：https://blog.csdn.net/weixin_45116533/article/details/102537959

版权

本文介绍了如何使用HTML、CSS和JavaScript来实现一个电灯开关的效果。通过展示项目结构、源码及效果，作者提供了两种实现思路：一是用JS切换class来改变显示样式，二是直接通过JS修改图片的src属性来达到开关效果。

摘要由CSDN通过智能技术生成

先上图,了解下项目结构

在这里插入图片描述

源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img{
				width: 100px;
				height: 180px;
			}
			.lamp_off{
				background: url("img/pic_bulboff.gif");
			}
			.lamp_on{
				background: url("img/pic_bulbon.gif");
			}
		</style>
		<script type="text/javascript">
			function fun(){
				var lamp=document.getElementById("lamp");
				var on_off=document.getElementById("on_off");
				var log=document.getElementById("log");
				var text=document.createElement("h1");
				
				if(lamp.className=="lamp_off"){
					log.appendChild(document.createTextNode(new Date().toString()+"打开