基于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 jQuery插件练习
Dec 24 Javascript
浅析JavaScript中的delete运算符
Nov 30 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
Jan 05 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
JS基于递归实现网页版计算器的方法分析
Dec 20 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 Javascript
JavaScript基于用户照片姓名生成海报
May 29 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
咖啡的植物学知识
2021/03/03 咖啡文化
CodeIgniter CLI模式简介
2014/06/17 PHP
php截取字符串函数分享
2015/02/02 PHP
js AspxButton的客户端操作
2009/06/26 Javascript
Javascript计算时间差的函数分享
2011/07/04 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
跟老齐学Python之print详解
2014/09/28 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
Python2包含中文报错的解决方法
2018/07/09 Python
python读取文本中的坐标方法
2018/10/14 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
python 两种方法删除空文件夹
2020/09/29 Python
基于PyTorch中view的用法说明
2021/03/03 Python
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
We Fashion荷兰:一家国际时装公司
2018/04/18 全球购物
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
成都思必达公司C#程序员招聘面试题
2013/06/26 面试题
化学实验员岗位职责
2013/12/28 职场文书
奠基仪式主持词
2014/03/20 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
医生个人年度总结
2015/02/28 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang
使用Python脚本对GiteePages进行一键部署的使用说明
2021/05/27 Python