手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >基于jQuery制作迷你背词汇工具
基于jQuery制作迷你背词汇工具
摘要:今天我要介绍的是load()函数的一个实际运用,希望你读完以后会觉得它很简单、而且很实用。下面是一个类似金山词霸里背单词的小工具,它和滚动文...

今天我要介绍的是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制作迷你背词汇工具】相关文章:

光标定位等TextRange的操作的范例代码

jQuery预加载图片常用方法

jQuery结合ajax实现动态加载文本内容

jQuery实现返回顶部功能

实现placeholder效果的方案汇总

微信内置浏览器私有接口WeixinJSBridge介绍

JavaScript常用函数工具集:lao-utils

jQuery子窗体取得父窗体元素的方法

基于JavaScript实现智能右键菜单

纯javascript制作日历控件

精品推荐
分类导航