1.js-pet rock

最新推荐文章于 2025-08-26 22:24:15 发布

转载最新推荐文章于 2025-08-26 22:24:15 发布 · 385 阅读

收录于

Head First Javascript

当前文章被收录于：

Head First Javascript

1 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一个简单的互动式网页设计案例，通过HTML、CSS及JavaScript实现了用户与网页中图片元素的交互。当用户点击页面中的石头图片时，会弹出对话框提示用户输入姓名，并根据输入展示个性化的欢迎信息，同时改变石头图片的状态。

iRock.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<script type="text/javascript">
		function touchRock(){
			var userName = prompt("What is your name?", "Enter your name here.");
			if(userName){
				alert("It is good to meet you,"+userName+".");
				document.getElementById("rockImg").src = "rock_happy.png";
			}
		}
	</script>
</head>
<body onload="alert('Hello, I am your pet rock.');">
	<div style="margin-top:100px; text-align:center">
		<img id="rockImg" src="rock.png" alt="iRock" style="cursor: pointer" onclick="touchRock()"/>
	</div>
</body>
</html>

onload事件完成，出现alert窗口

style=“cursor:pointer" 光标移到<img>变手型

onclick,点击图片调用touchRock()