recherche

Maison >interface Web >js tutoriel >Code d'effet de chargement de page Web JS basé sur les compétences Ajax_javascript

Code d'effet de chargement de page Web JS basé sur les compétences Ajax_javascript

WBOY
WBOYoriginal
2016-05-16 15:34:491400parcourir

L'exemple de cet article décrit le code d'effet de chargement de page Web implémenté par JS basé sur Ajax. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Il s'agit d'un très bon effet de chargement Web. Il est souvent utilisé dans la conception Web interactive Ajax. Cliquez sur le bouton pour faire apparaître la boîte de chargement. Si la page Web est fermée lorsque la boîte de chargement n'est pas chargée, une boîte de dialogue de confirmation s'affiche. apparaîtra, ce qui est utile pour certains traitements interactifs de pages Web nécessitant des performances de sécurité élevées, telles que les opérations de paiement.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/js-ajax-web-loading-style-codes/

Le code spécifique est le suivant : 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>很不错的网页Ajax Loading效果</title>
</head>
<BODY STYLE="FONT-SIZE: 10pt; FONT-FAMILY: Verdana, Arial, Helvetica">
<SCRIPT LANGUAGE="JScript">
var NUMBER_OF_REPETITIONS = 40;
var nRepetitions = 0;
var g_oTimer = null;
function startLongProcess()
{
  divProgressDialog.style.display = "";
  resizeModal();
  btnCancel.focus();
  window.onresize = resizeModal;
  window.onbeforeunload = showWarning;
  continueLongProcess();
}
function updateProgress(nNewPercent)
{
  divProgressInner.style.width = (parseInt(divProgressOuter.style.width)
   * nNewPercent / 100)+ "px";
}
function stopLongProcess()
{
  if (g_oTimer != null)
  {
   window.clearTimeout(g_oTimer);
   g_oTimer = null;
  }
  // Hide the fake modal DIV
  divModal.style.width = "0px";
  divModal.style.height = "0px";
  divProgressDialog.style.display = "none";
  // Remove our event handlers
  window.onresize = null;
  window.onbeforeunload = null;
  nRepetitions = 0;
}
function continueLongProcess()
{
  if (nRepetitions < NUMBER_OF_REPETITIONS)
  {
   var nTimeoutLength = Math.random() * 250;
   updateProgress(100 * nRepetitions / NUMBER_OF_REPETITIONS);
   g_oTimer = window.setTimeout("continueLongProcess();", nTimeoutLength);
   nRepetitions++;
  }
  else
  {
   stopLongProcess();
  }
}
function showWarning()
{
  return "Navigating to a different page or refreshing the window could cause you to lose precious data.\n\nAre you*absolutely* certain you want to do this&#63;";
}
function resizeModal()
{
  divModal.style.width = document.body.scrollWidth;
  divModal.style.height = document.body.scrollHeight;
  divProgressDialog.style.left = ((document.body.offsetWidth -
divProgressDialog.offsetWidth) / 2);
  divProgressDialog.style.top = ((document.body.offsetHeight -
divProgressDialog.offsetHeight) / 2);
}
</SCRIPT>
<INPUT TYPE="BUTTON" VALUE="Click Me!" onclick="startLongProcess();">
<!-- BEGIN PROGRESS DIALOG -->
<DIV STYLE="BORDER: buttonhighlight 2px outset; FONT-SIZE: 8pt; Z-INDEX:
4; FONT-FAMILY: Tahoma; POSITION: absolute; BACKGROUND-COLOR: buttonface;
DISPLAY: none; WIDTH: 350px; CURSOR: default" ID="divProgressDialog"
onselectstart="window.event.returnValue=false;">
  <DIV STYLE="PADDING: 3px; FONT-WEIGHT: bolder; COLOR: captiontext;
BORDER-BOTTOM: white 2px groove; BACKGROUND-COLOR: activecaption">
   加载中……  </DIV>
  <DIV STYLE="PADDING: 5px">
   请稍等，网页正在处理中……
  </DIV>
  <DIV STYLE="PADDING: 5px">
   可能需要数秒钟.
  </DIV>
  <DIV STYLE="PADDING: 5px">
     <DIV ID="divProgressOuter" STYLE="BORDER: 1px solid threedshadow;
WIDTH: 336px; HEIGHT: 15px">
      <DIV ID="divProgressInner" STYLE="COLOR: white; TEXT-ALIGN:
center; BACKGROUND-COLOR: infobackground; MARGIN: 0px; WIDTH: 0px; HEIGHT:
13px;"></DIV>
     </DIV>
  </DIV>
  <DIV STYLE="BORDER-TOP: white 2px groove; PADDING-BOTTOM: 5px; PADDING-TOP: 3px;
BACKGROUND-COLOR: buttonface; TEXT-ALIGN: center">
     <INPUT STYLE="FONT-FAMILY: Tahoma; FONT-SIZE: 8pt" TYPE="button"
ID="btnCancel" onclick="stopLongProcess();" VALUE="取消">
  </DIV>
</DIV>
<!-- END PROGRESS DIALOG -->
<!-- BEGIN FAKE MODAL DIV-->
<DIV ID="divModal"
  STYLE="BACKGROUND-COLOR: white; FILTER: alpha(opacity=75); LEFT: 0px; POSITION:
 absolute; TOP: 0px; Z-INDEX: 3"
  onclick="window.event.cancelBubble=true; window.event.returnValue=false;">
</DIV>
<!-- END FAKE MODAL DIV -->
</body>
</html>

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de l'emplacement de la fenêtre et des objets d'historique dans la programmation JavaScript_Connaissances de baseArticle suivant：Explication détaillée de l'emplacement de la fenêtre et des objets d'historique dans la programmation JavaScript_Connaissances de base

Articles Liés

Voir plus