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


Posted in Javascript onJuly 27, 2010

今天我要介绍的是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>

我觉得上面介绍的间隔一定时间调用服务器的代码,其扩展性还是挺大的。我这里只是使用它来读取一个简单的文本文件,你还可以用它来调用数据库,来实现对某个数据的实时更新。
Javascript 相关文章推荐
JavaScript RegExp方法获取地址栏参数(面向对象)
Mar 10 Javascript
基于jquery的checkbox下拉框插件代码
Jun 25 Javascript
functional继承模式 摘自javascript:the good parts
Jun 20 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
JavaScript之filter_动力节点Java学院整理
Jun 28 Javascript
在React 组件中使用Echarts的示例代码
Nov 08 Javascript
vue+iview写个弹框的示例代码
Dec 05 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
vscode中使用npm安装babel的方法
Aug 02 Javascript
微信小程序实现轮播图指示器
Jun 25 Javascript
IE之动态添加DOM节点触发window.resize事件
Jul 27 #Javascript
js操作二级联动实现代码
Jul 27 #Javascript
jquery.jstree 增加节点的双击事件代码
Jul 27 #Javascript
基于jsTree的无限级树JSON数据的转换代码
Jul 27 #Javascript
XENON基于JSON变种
Jul 27 #Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 #Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 #Javascript
You might like
利用static实现表格的颜色隔行显示
2006/10/09 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
PHP实现的策略模式示例
2019/03/20 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
python http基本验证方法
2018/12/26 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
python属于跨平台语言码
2020/06/09 Python
晚会邀请函范文
2014/01/24 职场文书
创建省级文明单位实施方案
2014/02/27 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python