<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>虚拟宠物狗</title>
<script type="text/javascript">
//script一般放在head标签中;(当然也可以放在别的位置,但起码这是最好的习惯)
//script标签表示接下来是脚本语言;
//text/javascript指出使用的指令脚本为javascript;
//接下来是javascript内容;
//
function touchDog() {
var name = prompt('你叫什么名字?', '在此输入你的名字。');
//prompt负责制作弹出窗口,并向用户询问名字,当用户点击确定后返回true(相当于对话框)
if (name) {
alert('见到你很开心' + name + "。");
document.getElementById("rockImg").src = "smail.jpg";
}
}
//
//浏览器中有一种特殊的软件——javascript解析器;
//所以javascript是解释语言,与编绎语言相对;
//“事件”是种注记,表示我们可以用javascrip代码响应事件
//“函数”是一段执行常见任务且可重复利用的javascript代码
</script>
</head>
<body onload="alert('你好,我是你的宠物狗!')">
<!--javascript代码也可以放在事件处理器中;事件以javascript响应网页里发生的动静;
onload事件在网页载入完毕后触发;alert()是内置函数,用于弹出框-->
<div style="margin-top: 100px; text-align: center;">
<img id="rockImg" src="8_150709170804_10.jpg" alt="IDog" style="cursor: pointer"
onclick="touchDog()" /><!--cursor: pointer当鼠标移到图片上时呈手形-->
</div>
</body>
</html>
1 Javascript:交互式网络
最新推荐文章于 2024-08-27 21:15:00 发布
本文深入探讨了如何使用JavaScript增强网页的交互性,通过实例展示了如何利用JavaScript与网络API进行通信,实现动态更新和用户反馈,提升用户体验。
摘要由CSDN通过智能技术生成