javascript实例:点亮灯泡
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name='description' content='本文来源于Apollo个人整理,仅供参考!'>
<title>点亮灯泡</title>
<style type="text/css">
div{
width: 500px;
height: 400px;
background-color:lightgoldenrodyellow;
} </style>
</head>
<body>
<div>
<img id="demo" src="./pic_bulboff.gif" alt="灯泡">
</div>
<script>
document.getElementById('demo').onclick = function () {
ele = document.getElementById('demo');
if (ele.src.match('bulbon')){
ele.src = './pic_bulboff.gif';
}else{
ele.src = './pic_bulbon.gif';
}
}
</script>
</body>
</html>
图片pic_bulboff.gif
图片pic_bulbon.gif
javascript实例:点亮灯泡的更多相关文章
- JavaScript实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- 每天一个JavaScript实例-从一个div元素删除一个段落
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 每天一个JavaScript实例-推断图片是否载入完毕
<!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 每天一个JavaScript实例-动态省份选择城市
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 每天一个JavaScript实例-递归实现反转数组字符串
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 每天一个JavaScript实例-html5拖拽
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 每天一个JavaScript实例-canvas绘图
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 一些有用的javascript实例分析(三)
原文:一些有用的javascript实例分析(三) 10 输入两个数字,比较大小 window.onload = function () { var aInput = document.getElem ...
- 一些有用的javascript实例分析(一)
原文:一些有用的javascript实例分析(一) 本文以http://fgm.cc/learn/链接的实例索引为基础,可参见其实际效果.分析和整理了一些有用的javascript实例,相信对一些初学 ...
随机推荐
- Connect China Azure Storage Blob By Container Token In Python SDK
简介: 基于Python SDK,使用Container Token操作container对象.关于Token的生成可以使用Storage SDK创建,也可以使用工具快速创建供测试. 示例代码: fr ...
- eclipse spring xml 无提示解决
增加自动提示的步骤: 1.window->preference.->xml-xml catalog 2.选中 user specified entried 3.选则Add..按钮 URI: ...
- OUTLOOK之不能直接发送邮件的Mapi错误解决方法
近期在从office2010直接升级到2013,发现右键文件不能发送到邮件了,同一时候在word文档里.也不能作为附件发送到邮件了. 提示错误是: Mapi Failure - "Unspe ...
- 在Telerik for silverlight控件radtreeview中如何通过路径得到节点（转载）
页面<telerik:RadTreeView Margin="8" x:Name="radTreeView" SelectionChanged=" ...
- Google I/O 2014 大会总结 Android开发新方向
昨天晚上,Google I/O 2014大会召开,会上主要展示了下面几个部分的创新内容: Android L 操作系统 首先是界面,谷歌又一次设计了一套 UI 规范.并称之为"Materia ...
- Ubuntu ko模块的编译
http://blog.csdn.net/tugouxp/article/details/69053633 Linux .ko模块的生成方式 http://blog.csdn.net/fouweng/ ...
- spring定时任务（@Scheduled注解）cron表达式详解
cron表达式详解: 一个cron表达式有至少6个(也可能7个)有空格分隔的时间元素. 按顺序依次为 秒(~) 分钟(~) 小时(~) 天(~) 月(~) 星期(~ =SUN 或 SUN,MON,TU ...
- 应用市场出新规，国内千款应用TargetSdkVersion调查分析
近期,谷歌针对Google Play上架应用发布强制性适配Android 8.0公告,要求自2018 年 8 月 1 日起,所有向 Google Play 首次提交的新应用都必须基于 Andro ...
- error: xslt-config not found. Please reinstall the libxslt >= 1.1.0 distribution
解决编译php扩展xsl时出现 error: xslt-config not found. Please reinstall the libxslt >= 1.1.0 distribution ...
- Thinkphp5 使用命令行模式（cli模式）
Tp5的cli模式跟Tp3.2变化较大,有自己的一套方式,在这里做个搬运工,把Tp文档的东西搬运过来,方便大家. 原出处截图 创建自定义命令行 第一步,配置command.php文件,目录在appli ...