基于jQuery制作迷你背词汇工具
2023-06-13 09:14:23 时间
今天我要介绍的是load()函数的一个实际运用,希望你读完以后会觉得它很简单、而且很实用。下面是一个类似金山词霸里背单词的小工具,它和滚动文字(图片)的效果差不多,但是用到的是ajax功能,也就是涉及到服务器端的脚本的执行。
首先我创建的一个文本文件包含有我要背诵的英文词汇,然后是下面的PHP代码,用来读取词汇,并且随机返回一个词汇。
复制代码代码如下:
首先我创建的一个文本文件包含有我要背诵的英文词汇,然后是下面的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文件
varrefreshId=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选择器用法_jQuery属性选择器
- jQuery实现的进度条效果详解编程语言
- jQuery表单插件jquery.form.js详解编程语言
- jQuery图片切换插件jquery.cycle.js详解编程语言
- jQuery核心及其工具详解编程语言
- JQuery初体验(建议学习jquery)
- JQUERY浏览器判断实现函数
- 使用jQuery简化Ajax开发
- jquery多浏览器捕捉回车事件代码
- JQuery从头学起第二讲
- Jquery从头学起第四讲jquery入门教程
- jQuery.extend函数详解
- jquery图片延迟加载前端开发技能必备系列
- 精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
- JQuery验证工具类搜集整理
- jQuery方法简洁实现隔行换色及toggleClass的使用
- jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
- 基于JQuery滑动与动画的说明介绍
- 使用jQuery实现的网页版的个人简历(可换肤)
- 7款吸引人眼球的jQuery/CSS3特效实例分享
- Jquery动态进行图片缩略的原理及实现
- 使用JQUERY进行后台页面布局控制DIV实现左右式
- jQuery判断div随滚动条滚动到一定位置后停止
- 用jquery实现的一个超级简单的下拉菜单