Create a mini vocabulary memorization tool based on jQuery_jquery

What I want to introduce today is a practical application of the load() function. I hope you will find it simple and practical after reading it. Below is a small tool similar to the word memorization tool in Kingsoft PowerWord. It has the same effect as scrolling text (pictures), but it uses the ajax function, which involves the execution of server-side scripts.

First I created a text file containing the English vocabulary I want to recite, and then the following PHP code is used to read the vocabulary and return a random vocabulary.

Copy code The code is as follows:

$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)];
?> ;

Finally, the following Javascript script is added with a little Ajax technology to call the server-side PHP code and display the return result in a specific DIV. Because it is played in a loop, I used the setInterval() function. In addition, the clearInterval() function is also used to implement the mouse-over-tentative playback function.

Copy code The code is as follows:

<script> <br>$( document).ready(function() <br>{ <br>//Calling the server-side php file every 3 seconds <br>var refreshId = setInterval(function() <br>{ <br>$('#timeval' ).load('reflesh.php'); <br>}, 3000); <br>//Mouse over - pause playback<br>$("#timeval").mouseover(function() <br>{ <br>clearInterval(refreshId); <br>}); <br>$("#timeval").mouseout(function(){ <br>refreshId = setInterval(function() <br>{ <br>$( '#timeval').load('reflesh.php'); <br>}, 3000); <br>}); <br>}); <br></script>

I think the code described above that calls the server at certain intervals is quite scalable. I just use it here to read a simple text file. You can also use it to call the database to update a certain data in real time.