dom 小练习1（开关灯）

最新推荐文章于 2023-01-09 20:39:37 发布
最新推荐文章于 2023-01-09 20:39:37 发布
阅读量238 收藏
点赞数
分类专栏： 客户端js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45827064/article/details/106164507
版权
本文通过一个简单的开关灯效果小练习，探讨如何利用DOM操作改变页面元素状态。通过对DOM节点的选择、属性修改及事件监听，实现点击按钮控制灯光亮灭的效果，深入理解JavaScript与网页动态交互的基本原理。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-eq
最低0.47元/天 解锁文章
qq_45827064
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM灯泡效果
sky_to_heaven的博客
07-25 298
DOM小练习-灯泡效果 要求：五个灯泡，默认选择一个：当点击其中一个变亮，其他黑色； 分析：五个灯泡可以用ul标签包裹5个li标签，左浮动并排显示，给li标签加上等长的宽高后，设置border-radius: 50%;使li盒子变成圆形，设置背景色灰色#aaaaaa 边框：border:5px solid skyblue; 设置选择状态：.on{ background-color: gold;border: 6px solid lawngreen; } 具体看下面代码： <!DOCTYPE html
DOM实例 （点击灯泡 开/关 灯）
柠夏
05-15 323
有趣心 寻找快乐 源码示意图： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> #Div{ /*居中显示*/ text-align: center; margin-top: 177px; } </style> </head> <body> <script> function c
dom操作之开关灯
weixin_34214500的博客
07-30 205
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <body> <script> function changeImage() { ...
电灯开光案例--JavaScript的DOM、事件实现
weixin_622464的博客
11-11 333
案例分析： 分析： 1.获取图片对象 2.绑定单击事件 3.每次点击切换图片 * 规则： * 如果灯是开的 on,切换图片为 off * 如果灯是关的 off,切换图片为 on * 使用标记flag来完成 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>电灯开关</title> </head> <bo
javascript案例电灯开关
weixin_43748647的博客
09-25 132
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>电灯开关</title> </head> <body> <img id="light" src="img/off.gif"> <script> var flag=false; var light = documen.
DOM相关练习题（页面开关灯效果 ，以及文本框点击时，里面的默认文字隐藏，鼠标离开文本时显示文字。）
weixin_52984349的博客
08-21 294
DOM相关练习题（页面开关灯效果 ，以及文本框点击时，里面的默认文字隐藏，鼠标离开文本时显示文字。）
学习DOM第一天——案例（用户名显示隐藏内容、关闭广告、下拉菜单、开关灯）
qq_46186155的博客
06-18 844
标题
jQuery的几个小练习
paradoxzl的博客
07-14 642
学习jQuery过程中的小练习
JavaScript——DOM(1)
Scccc_的博客
03-03 956
js学习笔记
Dom 网页开关灯
Lu_1u的博客
07-14 682
web前端 Dom 开关灯
js案例---开关灯效果
wind的博客
02-01 660
实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .current { .
javascriptDOM的基本操作
文武的博客
01-12 418
HTML DOM结构代码 <ul id = "box"> <li><input type="radio" name="color" id="color" value="green"/><label for="color">绿色</label></li> <li></li> <li></li> </ul> 获取节点一、document1、.
JavaScript_案例_标签的自定义属性_样式操作_开关灯操作_二维码显示操作_div样式操作_隔行变色高亮显示_Unit_6;
qq_38053395的博客
08-07 349
Topic 1 : 标签的自定义属性 代码示例： &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;自定义属性&lt;/title&gt; &lt;style&gt; .bg { background-color: red;
开灯关灯java script_Jquery实现视频播放页面的关灯开灯效果
weixin_36162883的博客
02-16 271
本示例使用Jquery实现视频播放页面的关灯开灯效果。其中视频显示使用embed 元素，该元素是html5的元素，所以使用支持html5的浏览器效果会更好。效果预览网址：http://www.keleyi.com/keleyi/phtml/guandeng/完整代码：张国荣《千千阙歌》--脚本之家关灯特效body {font-family:Arial, Sans-Serif; font-size:...
JS 基础 开关灯案例
weixin_60599272的博客
07-11 206
思路：因为要来回切换两种模式（开灯+关灯）所以要设置一个flag变量 效果展示：初始状态： 点击后：
DOM：dom练习开关灯效果，利用到flag
weixin_46682277的博客
03-18 418
<button>关灯</button> <script> // 开关灯效果 // 点击关灯，body背景色变黑且文字变为开灯 点击开灯，body背景色变白且文字变为关灯 利用到flag var btn = document.querySelector("button"); var flag = 1; // 默认是开灯状态 btn.onclick = function(){ if(flag == 1){
js操作元素练习题目（用户名的隐藏，开关灯效果，下拉菜单）
最新发布
m0_72711350的博客
01-09 85
练习题目
用JavaScript中的知识实现灯泡效果
qq_45742386的博客
10-12 317
实现灯泡图片更换与灯泡开关的时间记录： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点击更换图片并出来文字提示</title> </head> <body> <div> ...
使用JS实现灯泡开关动画效果
1. DOM操作：JavaScript通过`document.getElementById`获取DOM元素，如`showBulb`函数中的`getElementById('imgBulb')`用于获取灯泡图片元素。`setAttribute`和`getAttribute`用于设置和获取元素属性，如切换图片源...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值