基于jQuery制作迷你背詞匯工具
更新時間:2010年07月27日 23:13:21 作者:
jQuery提供的Load的函數(shù)可能可以說是實現(xiàn)ajax功能的最輕巧的方法。
今天我要介紹的是load()函數(shù)的一個實際運(yùn)用,希望你讀完以后會覺得它很簡單、而且很實用。下面是一個類似金山詞霸里背單詞的小工具,它和滾動文字(圖片)的效果差不多,但是用到的是ajax功能,也就是涉及到服務(wù)器端的腳本的執(zhí)行。
首先我創(chuàng)建的一個文本文件包含有我要背誦的英文詞匯,然后是下面的PHP代碼,用來讀取詞匯,并且隨機(jī)返回一個詞匯。
<?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腳本加上一點(diǎn)Ajax技術(shù),調(diào)用服務(wù)器端的PHP代碼,并把返回結(jié)果在特定DIV里顯示。因為是循環(huán)播放,所以我用到了setInterval()函數(shù)。此外還使用clearInterval()函數(shù),實現(xiàn)鼠標(biāo)滑過 - 暫定播放的功能。
<script>
$(document).ready(function()
{
//沒隔3秒調(diào)用服務(wù)器端的php文件
var refreshId = setInterval(function()
{
$('#timeval').load('reflesh.php');
}, 3000);
//鼠標(biāo)滑過 - 暫停播放
$("#timeval").mouseover(function()
{
clearInterval(refreshId);
});
$("#timeval").mouseout(function(){
refreshId = setInterval(function()
{
$('#timeval').load('reflesh.php');
}, 3000);
});
});
</script>
我覺得上面介紹的間隔一定時間調(diào)用服務(wù)器的代碼,其擴(kuò)展性還是挺大的。我這里只是使用它來讀取一個簡單的文本文件,你還可以用它來調(diào)用數(shù)據(jù)庫,來實現(xiàn)對某個數(shù)據(jù)的實時更新。
首先我創(chuàng)建的一個文本文件包含有我要背誦的英文詞匯,然后是下面的PHP代碼,用來讀取詞匯,并且隨機(jī)返回一個詞匯。
復(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腳本加上一點(diǎn)Ajax技術(shù),調(diào)用服務(wù)器端的PHP代碼,并把返回結(jié)果在特定DIV里顯示。因為是循環(huán)播放,所以我用到了setInterval()函數(shù)。此外還使用clearInterval()函數(shù),實現(xiàn)鼠標(biāo)滑過 - 暫定播放的功能。
復(fù)制代碼 代碼如下:
<script>
$(document).ready(function()
{
//沒隔3秒調(diào)用服務(wù)器端的php文件
var refreshId = setInterval(function()
{
$('#timeval').load('reflesh.php');
}, 3000);
//鼠標(biāo)滑過 - 暫停播放
$("#timeval").mouseover(function()
{
clearInterval(refreshId);
});
$("#timeval").mouseout(function(){
refreshId = setInterval(function()
{
$('#timeval').load('reflesh.php');
}, 3000);
});
});
</script>
我覺得上面介紹的間隔一定時間調(diào)用服務(wù)器的代碼,其擴(kuò)展性還是挺大的。我這里只是使用它來讀取一個簡單的文本文件,你還可以用它來調(diào)用數(shù)據(jù)庫,來實現(xiàn)對某個數(shù)據(jù)的實時更新。
相關(guān)文章
jQuery中需要注意的細(xì)節(jié)問題小結(jié)
jQuery中需要注意的細(xì)節(jié)問題小結(jié),使用jquery的朋友可以參考下。2011-12-12jquery 將當(dāng)前時間轉(zhuǎn)換成yyyymmdd格式的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨query 將當(dāng)前時間轉(zhuǎn)換成yyyymmdd格式的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考2016-06-06jQuery插件FusionCharts繪制的3D餅狀圖效果實例【附demo源碼下載】
這篇文章主要介紹了jQuery插件FusionCharts繪制的3D餅狀圖效果,結(jié)合完整實例形式分析了基于FusionCharts圖形插件繪制餅狀圖的操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jquery 全選、全不選、反選效果的實現(xiàn)代碼【推薦】
下面小編就為大家?guī)硪黄猨query 全選、全不選、反選效果的實現(xiàn)代碼【推薦】。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05