JavaScript工作文本
现在让用户知道背景中的某些东西正在工作,这是网站可用性的重要组成部分。如果什么都没有发生,那么用户很可能会再试一次或去其他地方。做到这一点的一种好方法是在文本上写一些“正在工作”并在其后面设置动画点。这是一个可以做到这一点的功能。
var strDots = ''; var dotLength = 10; var timeout = 500; function dots() { strDots += '.'; if (strDots.length== dotLength ) { strDots = '.'; } document.getElementById('working').innerHTML = "Working"+strDots+""; dotTimer = setTimeout('dots()', timeout); }
然后,您需要在页面上添加以下HTML,以消除点。第一个将打印出来:
Working
其次是:
Working.
等等。为了使代码在您的页面上正常工作,请创建一个ID为工作ID的HTML元素,并在该元素下方添加以下内容。
要停止此操作,您需要然后调用第二个函数。
function stopDots() { //停止点 if ( typeof(dotTimer) != 'undefined' ) { clearTimeout(dotTimer); } document.getElementById('working').innerHTML = "Done!"; }
当您调用此功能时,“正在工作”将由文本“完成!”代替。如果要在AJAX中加载内容,则可以在AJAX启动时启动动画,然后在从服务器取回数据时停止动画。
使用此脚本的另一种方法是,如果您要使用PHP将内容刷新到浏览器,则可以通过打印出工作功能来开始页面,然后以该stopDots()功能结束页面。浏览器将在运行时运行JavaScript,因此您可以在需要较长时间加载的页面上创建一个不错的工作通知。这是使用JavaScript的一种怪异方法,但是在加载缓慢的页面上确实可以使用。