<!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. 清北刷题冲刺 11-02 a.m

    卖书 #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> ...

  2. 洛谷P1065 作业调度方案

    P1065 作业调度方案 题目描述 我们现在要利用m台机器加工n个工件,每个工件都有m道工序,每道工序都在不同的指定的机器上完成.每个工件的每道工序都有指定的加工时间. 每个工件的每个工序称为一个操作 ...

  3. 解决LINUX下SQLPLUS时上下左右键乱码问题

    window下的sqlplus可以通过箭头键,来回看历史命令,用起来非常的方便. 但是在linux里就没有这么方面了,错了一个命令,我们必须重新敲一次,辛苦了手指头叻. 看到一个文章,很方便的一招,给 ...

  4. 玩转Android---组件篇---Intent(意图)

    Intent的中文意思是“意图,目的”的意思,可以理解为不同组件之间通信的“媒介”或者“信使”. 目标组件一般要通过Intent来声明自己的条件,一般通过组件中的<intent-filter&g ...

  5. Filter&Listener

    Filter&Listener 内容待补充... ...

  6. HDU1729 Stone Game

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1729 思路:理解错题目了,以为SG模板直接套就行了.后来队友说了那个ci是不断变化的.那么每次可以放的石头 ...

  7. c语言中malloc函数的使用

    传送门:https://www.cnblogs.com/shiweihappy/p/4246372.html c语言中内存的管理:https://www.cnblogs.com/tuhooo/p/72 ...

  8. Jmeter 添加CSV Data set config 文件的相对路径及编码在Windows和Linux下的兼容性(转)

    简介: Jmeter实际上是不需要安装的,只需要有ApacheJMeter.jar.启动批处理文件(jmeter.bat或jmeter).配置文件(jmeter.properties.user.pro ...

  9. tomcat怎么优化

    Tomcat有很多方面,我从内存.并发.缓存四个方面介绍优化方法. 一.Tomcat内存优化 Tomcat内存优化主要是对 tomcat 启动参数优化,我们可以在 tomcat 的启动脚本 catal ...

  10. 四则运算 calc()

    它的出现还真的蛮令人惊喜的,很适用于百分比宽度.之前我们有box-sizng,而今又多了一个它,并且,calc的实用性更高.我们可以在border.margin.pading.font-size和wi ...