基于jQuery制作迷你背词汇工具
更新时间：2010年07月27日 23:13:21 作者：
jQuery提供的Load的函数可能可以说是实现ajax功能的最轻巧的方法。
今天我要介绍的是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>
我觉得上面介绍的间隔一定时间调用服务器的代码，其扩展性还是挺大的。我这里只是使用它来读取一个简单的文本文件，你还可以用它来调用数据库，来实现对某个数据的实时更新。
首先我创建的一个文本文件包含有我要背诵的英文词汇，然后是下面的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同时控制四张图片的伸缩2013-04-04
这篇文章主要介绍了jQuery的文档处理程序,结合实例形式详细分析了jQuery文档处理程序的概念、原理、使用方法与相关注意事项,并详细讲述了文档处理程序的优势,需要的朋友可以参考下2016-05-05
这篇文章主要介绍了jquery操作select中使用到的方法和示例,需要的朋友可以参考下2014-04-04
这篇文章主要介绍了jQuery正则验证注册页面功能,涉及针对用户名、密码、邮箱、手机号等的正则验证操作技巧,需要的朋友可以参考下2017-06-06
jQuery提供css()的方法来实现嵌入式改变元素样式，css()方法在使用上具有多样性。2010-02-02
本文主要记录了在项目中遇到jQuery重复加载导致依赖jQuery的js全部失效然后一步步分析，得出最终解决方案的全部过程，主要是记录下来，提醒自己以后不要再犯相同错误。2014-12-12
这篇文章主要介绍了jQuery实现点击行选中或取消CheckBox的方法,涉及jQuery针对页面元素的循环遍历与属性操作相关技巧,需要的朋友可以参考下2016-08-08
如何判断获取的对象是否存在，貌似有很多方法实现，下面以$("#id")举例，为大家详细介绍下具体的判断过程2013-09-09
这篇文章主要介绍了jquery动态增加删减表格行特效实现代码，2015-11-11
本篇文章主要介绍了jquery编写日期选择器的实现过程与方法，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
最新评论