基于jQuery制作迷你背词汇工具

今天我要介绍的是load()函数的一个实际运用，希望你读完以后会觉得它很简单、而且很实用。下面是一个类似金山词霸里背单词的小工具，它和滚动文字(图片)的效果差不多，但是用到的是ajax功能，也就是涉及到服务器端的脚本的执行。首先我创建的一个文本文件包含有我要背诵的英文词汇，然后是下面的PHP代码，用来读取词汇，并且随机返回一个词汇。复制代码代码如下: <?php $buffer = array(); $handle = @fopen("toefl_listen.txt", "r"); if ($handle) { while (!feof($handle)) { array_push ($buffer, fgets($handle, 4096)); } fclose($handle); } echo $buffer[array_rand($buffer)]; ?> 最后是通过下面的Javascript脚本加上一点Ajax技术，调用服务器端的PHP代码，并把返回结果在特定DIV里显示。因为是循环播放，所以我用到了setInterval()函数。此外还使用clearInterval()函数，实现鼠标滑过 - 暂定播放的功能。复制代码代码如下: <script> $(document).ready(function() { //没隔3秒调用服务器端的php文件 var refreshId = setInterval(function() { $('#timeval').load('reflesh.php'); }, 3000); //鼠标滑过 - 暂停播放 $("#timeval").mouseover(function() { clearInterval(refreshId); }); $("#timeval").mouseout(function(){ refreshId = setInterval(function() { $('#timeval').load('reflesh.php'); }, 3000); }); }); </script> 我觉得上面介绍的间隔一定时间调用服务器的代码，其扩展性还是挺大的。我这里只是使用它来读取一个简单的文本文件，你还可以用它来调用数据库，来实现对某个数据的实时更新。

　　推荐阅读

　　JQuery Study Notes 学习笔记(一)

1. 使用jquery 　　到jquery.com下载jquery.js当前版本是1.4.2 　　新建一个html页面复制代码代码如下: <!DOCTYPE html><BR><html lang="en"><BR><head><BR> <meta http-equiv="Content-Type" content="text/h>>>详细阅读

本文标题：基于jQuery制作迷你背词汇工具

地址：http://www.17bianji.com/kaifa2/JS/25920.html

1/2 1