基于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 Konami Code 实现代码
Jul 29 Javascript
ScrollDown的基本操作示例
Jun 09 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
JavaScript 过滤关键字
Mar 20 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 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
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
Element Input组件分析小结
2018/10/11 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
2020/10/31 Javascript
python字符串编码识别模块chardet简单应用
2015/06/15 Python
python3实现暴力穷举博客园密码
2016/06/19 Python
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
Pytorch之contiguous的用法
2019/12/31 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
澳大利亚最大的网上油画销售画廊:Direct Art Australia
2018/04/15 全球购物
Java面试题汇总
2015/12/06 面试题
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
2019各种保证书范文
2019/06/24 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
OpenCV-Python实现轮廓拟合
2021/06/08 Python
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android
把77A收信机改造成收音机
2022/04/05 无线电
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android