基于jQuery制作迷你背詞匯工具
更新時(shí)間:2010年07月27日 23:13:21 作者:
jQuery提供的Load的函數(shù)可能可以說是實(shí)現(xiàn)ajax功能的最輕巧的方法。
今天我要介紹的是load()函數(shù)的一個(gè)實(shí)際運(yùn)用,希望你讀完以后會(huì)覺得它很簡單、而且很實(shí)用。下面是一個(gè)類似金山詞霸里背單詞的小工具,它和滾動(dòng)文字(圖片)的效果差不多,但是用到的是ajax功能,也就是涉及到服務(wù)器端的腳本的執(zhí)行。
首先我創(chuàng)建的一個(gè)文本文件包含有我要背誦的英文詞匯,然后是下面的PHP代碼,用來讀取詞匯,并且隨機(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)];
?>
最后是通過下面的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)滑過 - 暫定播放的功能。
<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>
我覺得上面介紹的間隔一定時(shí)間調(diào)用服務(wù)器的代碼,其擴(kuò)展性還是挺大的。我這里只是使用它來讀取一個(gè)簡單的文本文件,你還可以用它來調(diào)用數(shù)據(jù)庫,來實(shí)現(xiàn)對某個(gè)數(shù)據(jù)的實(shí)時(shí)更新。
首先我創(chuàng)建的一個(gè)文本文件包含有我要背誦的英文詞匯,然后是下面的PHP代碼,用來讀取詞匯,并且隨機(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)];
?>
最后是通過下面的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)滑過 - 暫定播放的功能。
復(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>
我覺得上面介紹的間隔一定時(shí)間調(diào)用服務(wù)器的代碼,其擴(kuò)展性還是挺大的。我這里只是使用它來讀取一個(gè)簡單的文本文件,你還可以用它來調(diào)用數(shù)據(jù)庫,來實(shí)現(xiàn)對某個(gè)數(shù)據(jù)的實(shí)時(shí)更新。
相關(guān)文章
jQuery中需要注意的細(xì)節(jié)問題小結(jié)
jQuery中需要注意的細(xì)節(jié)問題小結(jié),使用jquery的朋友可以參考下。2011-12-12使用jQuery實(shí)現(xiàn)圖片遮罩半透明墜落遮擋
這篇文章主要介紹了使用jQuery實(shí)現(xiàn)圖片遮罩半透明墜落遮擋,效果非常棒,小伙伴們做相冊的時(shí)候可以直接拿走使用。2015-03-03jquery 將當(dāng)前時(shí)間轉(zhuǎn)換成yyyymmdd格式的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨query 將當(dāng)前時(shí)間轉(zhuǎn)換成yyyymmdd格式的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考2016-06-06jQuery插件FusionCharts繪制的3D餅狀圖效果實(shí)例【附demo源碼下載】
這篇文章主要介紹了jQuery插件FusionCharts繪制的3D餅狀圖效果,結(jié)合完整實(shí)例形式分析了基于FusionCharts圖形插件繪制餅狀圖的操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jquery 全選、全不選、反選效果的實(shí)現(xiàn)代碼【推薦】
下面小編就為大家?guī)硪黄猨query 全選、全不選、反選效果的實(shí)現(xiàn)代碼【推薦】。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05