JavaScript模拟跳舞_JS舞蹈图片资源-CSDN文库

需积分: 9 195 浏览量 2009-07-12 18:49:48 上传评论收藏 2KB TXT 举报

根据提供的文件信息，我们可以深入探讨以下几个关键的知识点： ### 1. JavaScript 在 Web 特效中的应用在 Web 开发中，JavaScript 是一种非常强大的工具，可以用来创建各种动态效果和交互体验。本例中展示了一个简单的动画效果，即通过 JavaScript 实现了一个“模拟跳舞”的功能。 ### 2. 用户代理检测 #### 代码示例： ```javascript var agt = navigator.userAgent.toLowerCase(); if (agt.indexOf("mac") != -1) { var vara = "\r"; } else { var vara = "\n"; } ``` #### 解析：这段代码首先获取了用户的 User Agent 字符串，并将其转换为小写形式以便后续比较。接着判断用户是否使用的是 Mac 操作系统。如果是，则将 `vara` 变量设置为 `\r`；否则，设置为 `\n`。这种做法是为了兼容不同操作系统上的换行符差异。 ### 3. 自定义对象与数组 #### 代码示例： ```javascript function tlist() { max = tlist.arguments.length; for (i = 0; i < max; i++) { this[i] = tlist.arguments[i]; } } tl = new tlist( "o" + vara + "/|\\..." // 省略部分动画帧 ); ``` #### 解析：这里定义了一个名为 `tlist` 的构造函数，它接受任意数量的参数，并将这些参数存储在新创建的对象的索引位置上。通过这种方式，我们创建了一个名为 `tl` 的实例，该实例包含了多个字符串，每个字符串代表一个动画帧。 ### 4. 动画逻辑处理 #### 代码示例： ```javascript var x = 0; function tick() { document.animation.cheerleader.value = "" + vara + tl[x]; x++; if (x != max) { setTimeout("tick()", 200); } else { x = 0; } } ``` #### 解析： - `x` 变量用于跟踪当前显示的动画帧。 - `tick` 函数每次被调用时都会更新页面上的文本区域 (`cheerleader`) 的值，使其显示为当前的动画帧。 - 使用 `setTimeout` 来定时调用 `tick` 函数，从而实现连续播放的效果。每次调用之间的延迟为 200 毫秒。 - 当所有的动画帧都被播放过后，重置 `x` 的值回到 0，以便循环播放。 ### 5. HTML 表单与按钮事件处理 #### 代码示例： ```html <form name="animation"> <textarea name="cheerleader" rows="5" cols="20"></textarea> <br> <input type="button" value="Start Again" onClick="javascript:tick()"> </form> ``` #### 解析： - 创建了一个名为 `animation` 的表单。 - 表单内包含了一个文本区域 (`cheerleader`) 和一个按钮。 - 文本区域用于显示动画帧。 - 按钮的 `onClick` 事件绑定到了 `tick` 函数上，点击按钮时会重新开始播放动画。 ### 6. 页面加载时自动启动动画 #### 代码示例： ```html <BODY bgcolor="#fef4d9" OnLoad="tick()"> ``` #### 解析： - 设置了页面背景颜色为 `#fef4d9`。 - 使用 `OnLoad` 事件来确保页面加载完成后自动调用 `tick` 函数开始播放动画。通过以上解析可以看出，这个简单的“模拟跳舞”示例涉及了 JavaScript 的多种基本用法和技术点，包括但不限于用户代理检测、自定义对象与数组、动画逻辑处理、HTML 表单与按钮事件处理以及页面加载时的自动触发事件等。这些技术点在实际开发中也非常有用，可以灵活应用于更复杂的项目之中。

资源推荐

资源详情

资源评论

脚本说明:
第一步:把如下代码加入<body>区域中
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var agt=navigator.userAgent.toLowerCase();
if (agt.indexOf("mac") != -1)
var a="\r";
else
var a="\n";
var max=0;
function tlist() {
max=tlist.arguments.length;
for (i=0; i<max; i++)
this[i]=tlist.arguments[i];
}
tl = new tlist(
" o"+a+
" /|\\"+a+
" */ \\* 跳舞"+a,

" o_"+a+
" \<| *"+a+
" *\>\\ 跳舞"+a,

" _o/*"+a+
" * |"+a+
" / \\ 跳舞"+a,

" *\o_"+a+
" / *"+a+