DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 基於jQuery制作迷你背詞匯工具
基於jQuery制作迷你背詞匯工具
編輯: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>

我覺得上面介紹的間隔一定時間調用服務器的代碼,其擴展性還是挺大的。我這裡只是使用它來讀取一個簡單的文本文件,你還可以用它來調用數據庫,來實現對某個數據的實時更新。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved