<!DOCTYPE html>

<html lang="zh">

	<head>

		<meta charset="UTF-8" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

		<meta http-equiv="X-UA-Compatible" content="ie=edge" />

		<title>Document</title>

		<script type="text/javascript">

			window.onload = function(){

				var fruit = document.getElementById('fruit');

				//图片地址

				btn1.onclick = function(){

					alert(fruit.getAttribute('src'));

				}

				//喜欢的水果

				btn2.onclick =function(){

					var loves = document.getElementsByName('enjoy');

					//alert(loves.length);

					var str = "";

					for(var i in loves){

						if(loves[i].checked == true){

							str +=loves[i].value+"\n"

						}

					}

					alert(str);

				}

			}

			//图片改变

			function change(){

				var f = document.getElementById('fruit');

					if(f.getAttribute('src')=='img/grape.jpg'){

						f.src="img/fruit.jpg";

					}else{

						f.src="img/grape.jpg";

					}

				}

		</script>

	</head>

	<body>

		<img src="img/fruit.jpg" alt="水果图片" id="fruit" />

		<h1 id="love">选择你喜欢的水果：</h1>

		<input name="enjoy" type="checkbox" value="apple" />苹果

		<input name="enjoy" type="checkbox" value="banana" />香蕉

		<input name="enjoy" type="checkbox" value="grape" />葡萄

		<input name="enjoy" type="checkbox" value="pear" />梨

		<input name="enjoy" type="checkbox" value="watermelon" />西瓜

		<br />

		<input name="btn" type="button" value="显示图片路径" id="btn1" />

		<br /><input name="btn" type="button" value="喜欢的水果" id="btn2" />

		<br /><input name="btn" type="button" value="改变图片" onclick="change()"  id="btn3"/>

	</body>

</html>

2018.7.2 如何用js实现点击图片切换为另一图片，再次点击恢复到原图片的更多相关文章

  1. 360极速浏览器UA怪异以及如何用js判断360浏览器

    本文最后一次更新于7个月前,文章内容可能略有出入.若发现文章中有错误之处,可以留言评论告诉作者. 1.360极速浏览器UA因域名不同而异 今天在写一个判断浏览器.浏览器版本.操作系统.操作系统版本.浏 ...

  2. 如何用js检测判断时间日期的间距

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. 如何用js判断一个对象是不是Array

    .如何用js判断一个对象是不是Array 1.Array.isArray(obj) 调用数组的isArray方法 2.obj instanceof Array 判断对象是否是Array的实例 3.Ob ...

  4. 如何用 js 实现一个 class 类函数

    如何用 js 实现一个 class 类函数 原理 实现方式 总结 refs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refere ...

  5. 如何用 js 实现一个 apply 函数

    如何用 js 实现一个 apply 函数 原理 实现方式 总结 refs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referen ...

  6. 如何用 js 实现一个 call 函数

    如何用 js 实现一个 call 函数 原理 实现方式 总结 refs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referenc ...

  7. 如何用 js 实现一个 sleep 函数

    如何用 js 实现一个 sleep 函数 原理 实现方式 总结 refs js sleep xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!

  8. 如何用 js 实现一个 new 函数

    如何用 js 实现一个 new 函数 原理 new 关键字实现经过了如下过程 创建一个空对象 obj = {} 链接到原型 obj.proto = constructor.prototype 绑定 t ...

  9. 如何用 js 实现一个 bind 函数

    如何用 js 实现一个 bind 函数 原理 实现方式 总结 refs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referenc ...

随机推荐

  1. HyperLedger Explore 浏览器配置启动教程

    Hyperledger Fabric维护的实际上是一个区块链网络.为了能够直观的观察网络上的节点,交易等行为,Hyperledger Explore随之诞生. 本文讲述如何搭建 Hyperledger ...

  2. 洛谷P1349 广义斐波那契数列

    传送门 话说谁能告诉我矩阵怎么用latex表示…… 差不多就这样 //minamoto #include<iostream> #include<cstdio> #include ...

  3. thinkphp5.1使用支付宝接口（沙箱环境）

    接口文件以及沙箱的测试账号可以去支付宝开发中心获取,下面给出一个简单地例子 我新建了一个控制器Pay用来专门做支付 <?phpnamespace app\index\controller; us ...

  4. Poj 2096 (dp求期望 入门)

    / dp求期望的题. 题意:一个软件有s个子系统,会产生n种bug. 某人一天发现一个bug,这个bug属于某种bug,发生在某个子系统中. 求找到所有的n种bug,且每个子系统都找到bug,这样所要 ...

  5. <Linux系统isosize指令用法>

    isosize命令:iso9660文件系统大小显示 isosize命令用于显示iso9660文件系统的大小,还文件可以使普通文件,也可以是块设备,如/dev/sr0或者/dev/sda.如果没有相关选 ...

  6. Redis Windows环境搭建

    简介 Redis是一个开源(BSD许可),内存存储的数据结构服务器,可用作数据库,高速缓存和消息队列代理.它支持字符串.哈希表.列表.集合.有序集合,位图,hyperloglogs等数据类型.内置复制 ...

  7. ace admin 左侧菜单定位

    后台模版来自:Ace Admin http://ace.jeka.by/form-elements.html 左侧菜单,通过js根据url来判断显示哪块 window.location.pathnam ...

  8. 关于安卓visualizer的用法

    看别人显示播放wav文件显示频谱写的代码都是断断续续的,在这里我贴了完整的代码,给有需要的人做参考,显示频谱还没有完成,不知道怎么弄,已经可以得到byte[] fft数据了,参考别人的写法也可以开方取 ...

  9. Python之简易计算器

    思路:学会运用正则表达式把需要先进行计算的匹配出来,然后再一步步的去算,把先算出来的值替换原来的值,再进一步的把++,--等号变成我们正常的数学上的符号,然后再进行一步步的替换,最终把带括号的都计算出 ...

  10. javascript动态修改对象的属性名

    在做东钿业务系统的时候,经常碰到写很多重复的ajax对接,于是就想封装一个方法,但是接收data的字段名不一样,所以就需要用到动态对象属性名这个写法了.其实很简单.直接看一下代码吧.