点击按钮更换图片 - HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			var flag = 1;
			function change(){
				var img = document.getElementById("img");
				var text = document.getElementById("text");
				switch(flag){
					case 0: img.src = "img/伞.png"; flag++; 	text.innerHTML = "雨伞~~";	break;
					case 1: img.src = "img/冰棍.png"; flag++; text.innerHTML = "冰棍~~";	break;
					case 2: img.src = "img/冰淇淋.png"; flag++; text.innerHTML = "冰淇淋~~";	break;
					case 3: img.src = "img/冰箱.png"; flag++; text.innerHTML = "冰箱~~";	break;
					case 4: img.src = "img/水.png"; flag = 0; text.innerHTML = "水~~";	break;
				}
			}
		</script>
	</head>
	<body>
		<input type="button" value="img"  onclick="change()" style="width:60px;height: 40px;background-color:mediumseagreen;color: white;font-size: 20px;border: 0px;"/>
		<br />
		<br />
		<img style="width: 120px;" id="img" src="img/伞.png" />
		<p id="text" style="font-size: 30px;font: '黑体';color: dodgerblue;" ><b>雨伞~~</b></p>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_42108487/article/details/80875817
今日推荐