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

183 阅读 0 评论 121 点赞

我是靠谱客的博主笑点低缘分，最近开发中收集的这篇文章主要介绍基于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> 