dom操作之开关灯

最新推荐文章于 2023-09-15 15:45:33 发布
最新推荐文章于 2023-09-15 15:45:33 发布
阅读量202 收藏
点赞数
原文链接：https://yq.aliyun.com/articles/340704
版权 
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<body>
    <script>
    function changeImage() {
        element = document.getElementById('myimage');
        if (element.src.match("bulbon")) {
            element.src = "./images/pic_bulboff.gif";
        } else {
            element.src = "./images/pic_bulbon.gif";
        }
    }
    </script>
    
    <img id="myimage" onclick="changeImage()" border="0" src="./images/pic_bulboff.gif" width="100" height="180">
    <p>点击灯泡 开/关 灯</p>
</body>

</html>

422101-20160605122756539-1378563808.png


本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/5560463.html，如需转载请自行联系原作者

weixin_34214500
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript dom click使用 控制开关
SLL_boy的博客
09-08 485
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body id="body"> //在线表.
Dom 网页开关灯
Lu_1u的博客
07-14 672
web前端 Dom 开关灯
DOM电灯开关案例
weixin_46441425的博客
02-14 499
按钮开关灯 基础DOM操作
wuwenhao的博客
04-27 265
<body> <input type="button" value="按钮开关灯"> <script> var button = document.querySelector('input'); var bodyo = document.body; var flag = 0; button.onclick = function() { if(flag === 0.
js实现开关灯效果
10-16
这只是一个基础的示例，实际的网页开发中，你可能还会接触到DOM操作、事件委托、CSS3动画以及更高级的JavaScript库和框架，如jQuery、Vue.js或React.js等，它们能帮助你更高效地实现各种动态效果和交互功能。
JavaScript实现电灯开关小案例
10-15
在JavaScript编程中，实现电灯开关小案例是一个基础但有趣的实践，它可以帮助初学者更好地理解事件处理、DOM操作以及变量状态的控制。在这个案例中，我们利用JavaScript来模拟现实世界中的电灯开关行为，通过点击...
JavaScript实现的开关灯泡点击切换特效示例
10-16
2. **DOM操作**： - Document Object Model (DOM) 是HTML和XML文档的结构化表示。在JavaScript中，我们可以通过DOM API来操作页面元素。`document.getElementById('img')`用于获取ID为`img`的图片元素，这样我们就...
JS/jQuery实现简单的开关灯效果【案例】
10-17
总结来说，这两种方法都能实现开关灯的效果，原生JavaScript提供了基础的DOM操作和事件处理，而jQuery则提供了更便捷的DOM选择和事件绑定机制，简化了代码。在实际开发中，开发者可以根据项目需求和个人偏好选择合适...
jQuery图文开关灯切换特效.zip
07-11
该特效的核心在于利用jQuery的事件监听和DOM操作功能。首先，开发者会在HTML中为每个图文组合设置相应的标记，以便jQuery能够识别并绑定事件。通常，这些标记可能包括类名或者特定的数据属性，例如"data-slide"或...
用DOM操作改变灯泡的开关，点击关灯，再点击开灯。
最新发布
2301_79353184的博客
09-15 118
考察知识点为DOM常用操作、if语句等语句
DOM相关练习题（页面开关灯效果 ，以及文本框点击时，里面的默认文字隐藏，鼠标离开文本时显示文字。）
weixin_52984349的博客
08-21 256
DOM相关练习题（页面开关灯效果 ，以及文本框点击时，里面的默认文字隐藏，鼠标离开文本时显示文字。）
学习DOM第一天——案例（用户名显示隐藏内容、关闭广告、下拉菜单、开关灯）
qq_46186155的博客
06-18 821
标题
DOM：dom练习开关灯效果，利用到flag
weixin_46682277的博客
03-18 396
<button>关灯</button> <script> // 开关灯效果 // 点击关灯，body背景色变黑且文字变为开灯 点击开灯，body背景色变白且文字变为关灯 利用到flag var btn = document.querySelector("button"); var flag = 1; // 默认是开灯状态 btn.onclick = function(){ if(flag == 1){
JS——初始DOM的相关操作练习
Bonsoir777的博客
08-20 395
前文介绍了初识DOM的相关知识点（感兴趣的朋友欢迎翻阅），本文就向大家分享一些利用对DOM操作解决简单实际应用的过程。
DOM灯泡效果
sky_to_heaven的博客
07-25 271
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元素纯CSS实现hover开关
Ziuc的博客
04-29 689
用CSS实现一个开关样式，hover时触发，滑块为正方形，具体大小可随意
开关灯案例体会jQuery和DOM，还有click和onclick
weixin_64512346的博客
09-05 379
开关灯案例体会jQuery和DOM，还有click和onclick
DOM操作-电灯案例、 网页换肤、增删改元素
uzi2200的博客
08-22 243
DOM操作 DOM: (Document Object Model)文档对象模型，DOM是由W3C组织制定的一种处理HTML(包括xml)文件的标准API DOM提供了对整个HTML文档的访问模型，将文档作为一个树形结构，树的每个节点都表示了一个HTML标签或者标签中的文本。 在JS中，是将每一个HTML元素、属性、内容都当成一个一个的JS对象，利用对象的方法和属性，可以方便的访问、修改、添加、删除HTML中的元素、属性和内容 4.3.1 案例：电灯开关 点击电灯可以实现开/关灯，代码实现如下： &l
EasyExt深入解析：DOM操作与Ext.Element应用
本篇资源是关于Easy-Ext系列课程的第五讲，主题为"Ext基础架构_操作DOM（二）"，由讲师白鹤翔主讲。课程深入探讨了文档对象模型（DOM）在Web开发中的重要性。DOM是W3C定义的一种平台无关的API，用于访问、修改文档的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值