Javascript, exemples

Sommaire

Bouton de retour à la page précédente

<div class="bouton">
  <a title="Précédent" 
  onmouseover="self.status=document.referrer;return true" 
  href="javascript:history.go(-1)">
    <=
  </a>
</div>

Nom complet de la page html

function chempag() { 
var chempar = window.location.pathname;
return chempar
}

Date et heure

function horodat() { 
var dat = new Date();
var jma = dat.getFullYear() + '-' + (dat.getMonth()+1) + '-' + dat.getDate();
var hor = dat.getHours() + ':' + dat.getMinutes() + ':' + dat.getSeconds();
return jma + ' ' + hor;
}

Swipe horizontal + flèches clavier latérales

Swipe = balayage sur écran tactile. Touches flèches latérales (vers la gauche / droite) pour avoir un fonctionnement équivalent sur clavier. Ce script doit se trouver en fin de page. Il permet de déclencher automatiquement deux liens munis d’attributs id="pagpre" pour la page précédente, et id="pagsui" pour le suivant.

var dTX, dTY, fTX, fTY;
var seuil = 75; 
var swG = () => { document.getElementById("pagsui").click(); };
var swD = () => { document.getElementById("pagpre").click(); };
window.onload = function () {
 window.addEventListener
 ('touchstart', function (event) {
  dTX = event.touches[0].clientX;
  dTY = event.touches[0].clientY;
 });
 window.addEventListener
 ('touchend', function (event) {
  fTX = event.changedTouches[0].clientX;
  fTY = event.changedTouches[0].clientY;
  handleTouch(dTX, fTX, swG, swD);
 });
};
function handleTouch(startX, endX, onswG, onswD) {
 var horD = fTX - dTX;
 var verD = fTY - dTY;
 if (Math.abs(horD) > Math.abs(verD) && Math.abs(horD) > seuil) {
  if (fTX - dTX < 0) {
   onswG(); 
  } else {
   onswD(); 
  }
 }
}
document.onkeydown = function (e) {
 switch (e.key) {
  case 'ArrowLeft': document.getElementById("pagpre").click();
   break;
  case 'ArrowRight': document.getElementById("pagsui").click();
   break;
 }
};

Fenêtre “popup” paramétrable

Script :

function popUp(URL,Typ,Hei,Wid) {
var Opt="";
if (Typ=="console") Opt="resizable,height="+Hei+",width="+Wid;
if (Typ=="fixed") Opt="status,height="+Hei+",width="+Wid;
if (Typ=="elastic") Opt="toolbar,menubar,scrollbars,resizable,location,height="+Hei+",width="+Wid;
window.open(URL, 'newWin', Opt);
}

Redimensionnable, initialisée à 400x600 pixels. Appel :

<a href="../cpay.htm" rel="external" 
  onclick="popUp(this.href,'elastic',400,600);return false;">
  Codes pays
</a>