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

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

我觉得上面介绍的间隔一定时间调用服务器的代码，其扩展性还是挺大的。我这里只是使用它来读取一个简单的文本文件，你还可以用它来调用数据库，来实现对某个数据的实时更新。

赞 (0)

相关推荐

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

    今天我要介绍的是load()函数的一个实际运用,希望你读完以后会觉得它很简单.而且很实用.下面是一个类似金山词霸里背单词的小工具,它和滚动文字(图片)的效果差不多,但是用到的是ajax功能,也就是涉及到服务器端的脚本的执行. 首先我创建的一个文本文件包含有我要背诵的英文词汇,然后是下面的PHP代码,用来读取词汇,并且随机返回一个词汇. 复制代码 代码如下: <?php $buffer = array(); $handle = @fopen("toefl_listen.txt",

  • python基于tkinter制作无损音乐下载工具(附源码)

    python基于tkinter制作无损音乐下载工具(附源码)

    继续写GUI,本次依然使用Tkinter设计一款图形界面,使用Tkinter做一款音乐下载软件,听起来听平常的,但是我这款软件能够下载 无损音乐下载软件,听起来不错吧,Let`s go! 一．准备工作 python Tkinter 二．预览 1.搜索 2.下载 3.结果 无损音乐就这样下载完了. 三.详细设计 这里仅展示我设计的整体思路. 四.源代码 4.1 Music_Search-v1.0.py from tkinter import * from tkinter import ttk fr

  • python基于tkinter制作m3u8视频下载工具

    python基于tkinter制作m3u8视频下载工具

    这是我为了学习tkinter用python 写的一个下载m3u8视频的小程序,程序使用了多线程下载,下载后自动合并成一个视频文件,方便播放. 目前的众多视频都是m3u8的播放类型,只要知道视频的m3u8地址,就可以完美下载整个视频. m3u8地址获取 打开浏览器,点开你要获取地址的视频 重要的来了,右键>>审查元素或者按F12也可以 根据开发或测试的实际环境选择相应的设备,选择iphone6 plus 选择好了以后,刷新页面,点击漏斗,选择media,一定刷新之后再点击,没出来的话切换几下选项

  • 基于Python制作一键桌面整理工具

    基于Python制作一键桌面整理工具

    目录 前言 效果展示 开发思路 完整代码 前言 我承认我不是一个爱整理桌面的人,因为我觉得乱糟糟的桌面,反而容易找到文件. 哈哈,可是最近桌面实在是太乱了,自己都看不下去了,几乎占满了整个屏幕.虽然一键整理桌面的软件很多,但是对于其他路径下的文件,我同样需要整理,于是我想到使用Python,完成这个需求. 效果展示 我一共为将文件分为9个大类,分别是图片.视频.音频.文档.压缩文件.常用格式.程序脚本.可执行程序和字体文件. # 不同文件组成的嵌套字典 file_dict = { '图片': [

  • 基于Python制作一个文件解压缩工具

    基于Python制作一个文件解压缩工具

    经常由于各种压缩格式的不一样用到文件的解压缩时就需要下载不同的解压缩工具去处理不同的文件,以至于桌面上的压缩工具就有三四种,于是使用python做了一个包含各种常见格式的文件解压缩的小工具. 常见的压缩格式主要是下面的四种格式: zip 格式的压缩文件,一般使用360压缩软件进行解压缩. tar.gz 格式的压缩文件,一般是在linux系统上面使用tar命令进行解压缩. rar 格式的压缩文件,一般使用rar压缩软件进行解压缩. 7z 格式的压缩文件,一般使用7-zip压缩软件进行解压缩. 导入

  • 基于PyQt5制作一个截图翻译工具

    基于PyQt5制作一个截图翻译工具

    目录 功能介绍 UI 界面 截图 翻译 文字识别 全局热键(快捷键) 托盘管理 主代码 功能介绍 1.翻译功能 2.截图功能(快捷键 + 截图存储到剪切板中) 3.文字识别OCR(基于百度API的文字识别) UI 界面 截图 截图可以使用第三方截图 或 使用PyQt5截图 此文章使用PyQt5的截图 class Snipper(QtWidgets.QWidget): def __init__(self, parent=None, flags=Qt.WindowFlags()): super().

  • 基于Jquery制作图片文字排版预览效果附源码下载

    基于Jquery制作图片文字排版预览效果附源码下载

    基于jQuery图文排版图片预览特效.这是一款基于jQuery+CSS3实现的鼠标点击图片弹出画廊切换特效. 效果图如下所示,怎么样感兴趣吗,感兴趣的朋友继续往下学习哦. 效果演示    源码下载 html代码: <div id="fullscreen"> <div id="fullscreen-inner"> <div id="fullscreen-inner-left" class="fullscree

  • 基于JQuery制作的产品广告效果

    基于JQuery制作的产品广告效果

    效果图.如下: 动画效果介绍:这组广告效果是打开页面后图片会自动播放,从1-5共计5张图片,如果属标放到右下角的1.2.3.4.5列表上,可以自由进行切换到自己想看的图片上去.图片切换是由下到上变换的.制作思路:先将这5张图片分别放入到ul的5个li列表中, <1>求出图片个的总个数. 并当我们如果在单击1.2.3.4.5时就将它对应的数字传过去,就它显示对应的图片. <2>如果属标放上,就停止动画(可以利用clearIntval() ),如果属标移到,我们可以利用 setIntv

  • 基于jQuery制作小图标上下滑动特效

    基于jQuery制作小图标上下滑动特效

    一个小图标特效,挺有趣的,代码也很容易懂. jQ小图标上下滑动特效: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <link rel="stylesheet" href="css/normalize.css"> <style&

  • 基于Jquery制作的幻灯片图集效果打包下载

    待改进部分 1.大图可根据浏览器分辨率自动缩放,目前是按照固定的宽和高显示,超出部分隐藏. 2.大图现在是直接载入了所有,若图片很多时,体验不好.可改为异步加载,或者延迟加载,这个可以用jquery控件lazyload实现. 3.缩略图是根据上传时设定的参数直接生成的,如果是竖形图片,会出现被压缩的情况.可以改为只显示局部,超出部分隐藏. 4.缩略图列表的滑动采用了jcarousellite插件,如果将幻灯片提取为插件的话,需要整合为一个. 5.目前大图区域和缩略图区域是相对独立的,优点是比较直

随机推荐