基于jQuery制作迷你背詞匯工具
更新時(shí)間：2010年07月27日 23:13:21 作者：
jQuery提供的Load的函數(shù)可能可以說(shuō)是實(shí)現(xiàn)ajax功能的最輕巧的方法。
今天我要介紹的是load()函數(shù)的一個(gè)實(shí)際運(yùn)用，希望你讀完以后會(huì)覺(jué)得它很簡(jiǎn)單、而且很實(shí)用。下面是一個(gè)類(lèi)似金山詞霸里背單詞的小工具，它和滾動(dòng)文字(圖片)的效果差不多，但是用到的是ajax功能，也就是涉及到服務(wù)器端的腳本的執(zhí)行。
首先我創(chuàng)建的一個(gè)文本文件包含有我要背誦的英文詞匯，然后是下面的PHP代碼，用來(lái)讀取詞匯，并且隨機(jī)返回一個(gè)詞匯。
<?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)];
?>
最后是通過(guò)下面的Javascript腳本加上一點(diǎn)Ajax技術(shù)，調(diào)用服務(wù)器端的PHP代碼，并把返回結(jié)果在特定DIV里顯示。因?yàn)槭茄h(huán)播放，所以我用到了setInterval()函數(shù)。此外還使用clearInterval()函數(shù)，實(shí)現(xiàn)鼠標(biāo)滑過(guò) - 暫定播放的功能。
<script>
$(document).ready(function()
{
//沒(méi)隔3秒調(diào)用服務(wù)器端的php文件
var refreshId = setInterval(function()
{
$('#timeval').load('reflesh.php');
}, 3000);
//鼠標(biāo)滑過(guò) - 暫停播放
$("#timeval").mouseover(function()
{
clearInterval(refreshId);
});
$("#timeval").mouseout(function(){
refreshId = setInterval(function()
{
$('#timeval').load('reflesh.php');
}, 3000);
});
});
</script>
我覺(jué)得上面介紹的間隔一定時(shí)間調(diào)用服務(wù)器的代碼，其擴(kuò)展性還是挺大的。我這里只是使用它來(lái)讀取一個(gè)簡(jiǎn)單的文本文件，你還可以用它來(lái)調(diào)用數(shù)據(jù)庫(kù)，來(lái)實(shí)現(xiàn)對(duì)某個(gè)數(shù)據(jù)的實(shí)時(shí)更新。
首先我創(chuàng)建的一個(gè)文本文件包含有我要背誦的英文詞匯，然后是下面的PHP代碼，用來(lái)讀取詞匯，并且隨機(jī)返回一個(gè)詞匯。
復(fù)制代碼 代碼如下:
<?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)];
?>
最后是通過(guò)下面的Javascript腳本加上一點(diǎn)Ajax技術(shù)，調(diào)用服務(wù)器端的PHP代碼，并把返回結(jié)果在特定DIV里顯示。因?yàn)槭茄h(huán)播放，所以我用到了setInterval()函數(shù)。此外還使用clearInterval()函數(shù)，實(shí)現(xiàn)鼠標(biāo)滑過(guò) - 暫定播放的功能。
復(fù)制代碼 代碼如下:
<script>
$(document).ready(function()
{
//沒(méi)隔3秒調(diào)用服務(wù)器端的php文件
var refreshId = setInterval(function()
{
$('#timeval').load('reflesh.php');
}, 3000);
//鼠標(biāo)滑過(guò) - 暫停播放
$("#timeval").mouseover(function()
{
clearInterval(refreshId);
});
$("#timeval").mouseout(function(){
refreshId = setInterval(function()
{
$('#timeval').load('reflesh.php');
}, 3000);
});
});
</script>
我覺(jué)得上面介紹的間隔一定時(shí)間調(diào)用服務(wù)器的代碼，其擴(kuò)展性還是挺大的。我這里只是使用它來(lái)讀取一個(gè)簡(jiǎn)單的文本文件，你還可以用它來(lái)調(diào)用數(shù)據(jù)庫(kù)，來(lái)實(shí)現(xiàn)對(duì)某個(gè)數(shù)據(jù)的實(shí)時(shí)更新。
相關(guān)文章
使用jQuery同時(shí)控制四張圖片的伸縮實(shí)現(xiàn)代碼
控制圖片的伸縮想必大家都有看到過(guò)吧，不過(guò)同時(shí)控制四張圖片的伸縮卻不是那么的常見(jiàn)吧，接下來(lái)為大家詳細(xì)介紹下jQuery同時(shí)控制四張圖片的伸縮2013-04-04
這篇文章主要介紹了jQuery的文檔處理程序,結(jié)合實(shí)例形式詳細(xì)分析了jQuery文檔處理程序的概念、原理、使用方法與相關(guān)注意事項(xiàng),并詳細(xì)講述了文檔處理程序的優(yōu)勢(shì),需要的朋友可以參考下2016-05-05
這篇文章主要介紹了jquery操作select中使用到的方法和示例,需要的朋友可以參考下2014-04-04
jQuery正則驗(yàn)證注冊(cè)頁(yè)面經(jīng)典實(shí)例
這篇文章主要介紹了jQuery正則驗(yàn)證注冊(cè)頁(yè)面功能,涉及針對(duì)用戶(hù)名、密碼、郵箱、手機(jī)號(hào)等的正則驗(yàn)證操作技巧,需要的朋友可以參考下2017-06-06
jQuery提供css()的方法來(lái)實(shí)現(xiàn)嵌入式改變?cè)貥邮?，css()方法在使用上具有多樣性。2010-02-02
jQuery 重復(fù)加載錯(cuò)誤以及修復(fù)方法
本文主要記錄了在項(xiàng)目中遇到j(luò)Query重復(fù)加載導(dǎo)致依賴(lài)jQuery的js全部失效然后一步步分析，得出最終解決方案的全部過(guò)程，主要是記錄下來(lái)，提醒自己以后不要再犯相同錯(cuò)誤。2014-12-12
jQuery實(shí)現(xiàn)點(diǎn)擊行選中或取消CheckBox的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊行選中或取消CheckBox的方法,涉及jQuery針對(duì)頁(yè)面元素的循環(huán)遍歷與屬性操作相關(guān)技巧,需要的朋友可以參考下2016-08-08
Jquery判斷$("#id")獲取的對(duì)象是否存在的方法
如何判斷獲取的對(duì)象是否存在，貌似有很多方法實(shí)現(xiàn)，下面以$("#id")舉例，為大家詳細(xì)介紹下具體的判斷過(guò)程2013-09-09
這篇文章主要介紹了jquery動(dòng)態(tài)增加刪減表格行特效實(shí)現(xiàn)代碼，2015-11-11
本篇文章主要介紹了jquery編寫(xiě)日期選擇器的實(shí)現(xiàn)過(guò)程與方法，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03