JavaScript事件练习

最新推荐文章于 2023-08-01 08:47:36 发布

weixin_33726943

最新推荐文章于 2023-08-01 08:47:36 发布

阅读量169

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cgdblog/p/6531196.html

版权

开始学习js一段时间了，开始练习了不少的代码，下面和大家分享一下事件的处理练习

，

<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	</head>
	<body>
	<button οnclick="imgChange(1)">第1张图片</button>
	<button οnclick="imgChange(2)">第2张图片</button>
	<button οnclick="imgChange(3)">第3张图片</button>
	<button οnclick="imgChange(4)">第4张图片</button>
	<div style="margin-top:20px;">
	<img src="img/1.jpg" alt="" id="imgShow" width="250" height="250">
	</div>
	<script>
	var imgShow = document.getElementById("imgShow");
	function imgChange(i)
	{
	imgShow.src = "img/"+i+".jpg";
	}
	</script>
	</body>
	</html>

这是一个点击按钮实现更换图片功能，这里应用了鼠标点击事件 onclick 以及配套的函数，能够提高用户的体验。

转载于:https://www.cnblogs.com/cgdblog/p/6531196.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

关注关注