基于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 相关文章推荐
仿百度输入框智能提示的js代码
Aug 22 Javascript
原始XMLHttpRequest方法详情回顾
Nov 28 Javascript
使用GruntJS构建Web程序之合并压缩篇
Jun 06 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
解决Vue编译时写在style中的路径问题
Sep 21 Javascript
vue中$nextTick的用法讲解
Jan 17 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
keep-alive保持组件状态的方法
Dec 02 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 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
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
PHP二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
Thinkphp微信公众号支付接口
2016/08/04 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
javascript 对象比较实现代码
2009/04/27 Javascript
JSON 入门指南 想了解json的朋友可以看下
2009/08/26 Javascript
jQuery 使用手册(四)
2009/09/23 Javascript
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
Python yield使用方法示例
2013/12/04 Python
python自动化测试之连接几组测试包实例
2014/09/28 Python
Python学习笔记之os模块使用总结
2014/11/03 Python
Python实现删除文件但保留指定文件
2015/06/21 Python
浅析Python中yield关键词的作用与用法
2016/11/29 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
Tensorflow的梯度异步更新示例
2020/01/23 Python
商务日语专业自荐信
2014/04/17 职场文书
书香校园建设方案
2014/05/02 职场文书
生日祝酒词大全
2015/08/10 职场文书
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs