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