Collection de codes classiques Javascript couramment utilisés sur les pages Web

Auteur：Eve Cole Date de mise à jour：2009-06-11 16:26:18

1. Ajouter aux favoris

le code HTML
<Langage de script="Javascript">
fonction bookmarkit()
{
window.external.addFavorite('<a href="http://" target="_blank" rel="external">http://</a>votre URL','le nom de votre site Web')
}
if (document.all)document.write('<a href="#" onClick="bookmarkit()">Ajouter aux favoris</a>')
</script>
[Ctrl+A Sélectionner tous les conseils : vous pouvez d'abord modifier une partie du code, puis appuyer sur Exécuter]

2. Faire en sorte que les hyperliens n'affichent pas

le code HTML

souligné

Code HTML

qui désactive l'action du bouton droit de la souris

4. Définir cette page comme

code HTML de la page d'accueil <body bgcolor="#FFFFFF" text="#000000">

</script>
[Ctrl+A Tous les conseils de sélection : Vous pouvez d'abord modifier une partie du code, puis cliquer sur Exécuter]

9. Chargez

le code HTML

de la page Web spécifiée après 2 secondes

<tête>
<meta http-equiv="refresh" content="2;URL=http://votre URL">
</tête>
[Ctrl+A Sélectionner tous les conseils : vous pouvez d'abord modifier une partie du code, puis appuyer sur Exécuter]

10.

Code HTML

du compte à rebours des vacances

<Langage de script="Javascript">
var timedate= new Date("25 décembre 2003");
var times="Noël";
var maintenant = new Date();
var date = timedate.getTime() - now.getTime();
var time = Math.floor(date / (1000 * 60 * 60 * 24));
si (temps >= 0)
document.write("Il y a maintenant : "+time +"days" à partir de "+times+")</script>
[Ctrl+A Sélectionner tous les conseils : vous pouvez d'abord modifier une partie du code, puis appuyer sur Exécuter]

11.

Code HTML

de l'effet de réflexion de l'eau

<img id="reflect" src="Votre propre nom de fichier image" width="175" height="59">
<langage de script="Javascript">
fonction f1()
{
setInterval("mdiv.filters.wave.phase+=10",100);
}
si (document.all)
{
document.write('<img id=mdiv src="'+document.all.reflect.src+'"
style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30) flou() flipv()">')
window.onload=f1
}
</script>
[Ctrl+A Sélectionner tous les conseils : vous pouvez d'abord modifier une partie du code, puis appuyer sur Exécuter]

12.

Code HTML

de fenêtre à croissance lente

<Langage de script="Javascript">

</script>
<p> <a href="javascript:openwindow(<a href=" http://www.code-123.com " target="_blank" rel="external"> http://www.code-123. com</a>)">Entrer</a>
[Ctrl+A Sélectionner tous les conseils : vous pouvez d'abord modifier une partie du code, puis appuyer sur Exécuter]

13. Pour modifier l'icône IE dans la barre d'adresse IE

et copier le contenu dans le presse-papiers, nous devons d'abord créer une icône 16*16 (fichier d'icône) et l'enregistrer sous index.ico. Téléchargez ce fichier d'icône dans le répertoire racine et ajoutez le code suivant entre <head></head> sur la page d'accueil :

14. Cliquez sur le bouton pour imprimer

le code HTML

de la page en cours

<Langage de script="Javascript">

</script>
[Ctrl+A Sélectionner tous les conseils : vous pouvez d'abord modifier une partie du code, puis appuyer sur Exécuter]

15. Cliquez sur le bouton "Enregistrer sous"

le code HTML

de la page actuelle

<input type="bouton" nom="Bouton" valeur="Enregistrer cette page"
onClick="document.all.button.ExecWB(4,1)">
<identifiant de l'objet="bouton"
largeur=0
hauteur=0
idclass="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2">
<embed width="0" height="0"></embed>
</objet>
[Ctrl+A Sélectionner tous les conseils : vous pouvez d'abord modifier une partie du code, puis appuyer sur Exécuter]

16.

Afficher le

code HTML

de la date actuelle du système

<langage de script=Javascript>
aujourd'hui=nouvelle Date();
fonction date(){
this.length=date.arguments.length
pour(var i=0;i<this.length;i++)
ceci[i+1]=date.arguments }
var d=nouvelle date("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");
document.write(
"<font color=##000000 style='font-size:9pt;font-family: 宋体'> ",
aujourd'hui.getYear(),"année", aujourd'hui.getMonth()+1,"mois", aujourd'hui.getDate(),"jour",
d[aujourd'hui.getDay()+1],"</font>" );
</script>
[Ctrl+A Sélectionner tous les conseils : vous pouvez d'abord modifier une partie du code, puis appuyer sur Exécuter]

17. Afficher différents

codes HTML

de salutation à différentes périodes

<Langage de script="Javascript">

</script>
[Ctrl+A Tous les conseils de sélection : vous pouvez d'abord modifier certains codes, puis appuyer sur Exécuter]

18.

Code HTML

de musique non-stop

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href=" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " target= "_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href=" http://www.w3.org/1999/xhtml " target="_blank" rel="external">http://www.w3.org/1999/xhtml</ une>">
<tête>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
</tête>
<corps>
<p>
<input name="src" type="file" id="src" value="E:music2fighter.mp3" />
</p>
<p>
<input type="button" name="button" id="button" value="Play" onclick="play(document.getElementById('src').value)" />
<input type="button" name="button2" id="button2" value="Stop" onclick="stop()" />
<input type="button" name="button2" id="button2" value="Pause" onclick="pause()" />
</p>
</corps>
</html>
<script>
var player = new ActiveXObject("MediaPlayer.MediaPlayer");
fonction jouer(pSrc){
si(pSrc == ""){
alert("Veuillez sélectionner la musique que vous souhaitez écouter !");
retour ;
}
joueur.Open(pSrc);
}
fonction stop(){
joueur.Stop();
}
fonction pause(){
joueur.Pause();
}
</script>
[Ctrl+A Tous les conseils de sélection : vous pouvez d'abord modifier une partie du code, puis appuyer sur Exécuter]

19. L'effet du défilement transparent des images vers le haut, le bas, la gauche et la droite (compatible avec Firefox et IE)

Code HTML
<html xmlns="<a href=" http://www.w3.org/1999/xhtml " target="_blank" rel="external">http://www.w3.org/1999/xhtml</ une>">
<tête>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>L'effet du défilement transparent des images vers le haut, le bas, la gauche et la droite (compatible avec Firefox et IE)</title>
</tête>
<body>

<div id=jsweb8_cn_top style=overflow:hidden;height:100;width:90;>
<div id=jsweb8_cn_top1>
<img src="<a href= " <img src="<a href=" <img src="< a href=" <img src="<a href=" <img src="<a href=" <img src="<a href=" <img src=" <a href=" <img src="<a href=" <img src="<a href=" </div>
<div id=jsweb8_cn_top2></div>
</div>
<script>
vitesse variable = 30
jsweb8_cn_top2.innerHTML=jsweb8_cn_top1.innerHTML //Cloner jsweb8_cn_top1 en tant que jsweb8_cn_top2
fonction Marquee1(){
//Lors du défilement jusqu'à la jonction de jsweb8_cn_top1 et jsweb8_cn_top2
si(jsweb8_cn_top2.offsetTop-jsweb8_cn_top.scrollTop<=0)
jsweb8_cn_top.scrollTop-=jsweb8_cn_top1.offsetHeight //jsweb8_cn_top saute vers le haut
autre{
jsweb8_cn_top.scrollTop++ ;
}
}
var MyMar1=setInterval(Marquee1,speed)//Définir la minuterie
// Efface le minuteur lorsque la souris monte pour arrêter le défilement
jsweb8_cn_top.onmouseover=function() {clearInterval(MyMar1)}
// Réinitialise le timer lorsque la souris s'éloigne
jsweb8_cn_top.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script>

<br>

<div id=jsweb8_cn_bottom style=overflow:hidden;height:100;width:90;>
<div id=jsweb8_cn_bottom1>
<img src="<a href= " <img src="<a href=" <img src="< a href=" <img src="<a href=" <img src="<a href=" <img src="<a href=" <img src=" <a href=" <img src="<a href=" <img src="<a href=" </div>
<div id=jsweb8_cn_bottom2></div>
</div>
<script>
vitesse variable = 30
jsweb8_cn_bottom2.innerHTML=jsweb8_cn_bottom1.innerHTML
jsweb8_cn_bottom.scrollTop=jsweb8_cn_bottom.scrollHeight
fonction Marquee2(){
si(jsweb8_cn_bottom1.offsetTop-jsweb8_cn_bottom.scrollTop>=0)
jsweb8_cn_bottom.scrollTop+=jsweb8_cn_bottom2.offsetHeight
autre{
jsweb8_cn_bottom.scrollTop--
}
}
var MonMar2=setInterval(Marquee2,vitesse)
jsweb8_cn_bottom.onmouseover=function() {clearInterval(MyMar2)}
jsweb8_cn_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
</script>

<br>

<div id="jsweb8_cn_left" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellpacing="0" border="0">
<tr><td id="jsweb8_cn_left1" valign="top" align="center">
<table cellpadding="2" cellpacing="0" border="0">
<tr align="centre">
<td><img src="<a href=" <td><img src="<a href=" <td><img src="<a href=" <td><img src="<a href =" <td><img src="<a href=" <td><img src="<a href=" <td><img src="<a href=" </tr>
</table>
</td>
<td id="jsweb8_cn_left2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=30//Plus la valeur de vitesse est grande, plus la vitesse est lente
jsweb8_cn_left2.innerHTML=jsweb8_cn_left1.innerHTML
fonction Marquee3(){
si(jsweb8_cn_left2.offsetWidth-jsweb8_cn_left.scrollLeft<=0)
jsweb8_cn_left.scrollLeft-=jsweb8_cn_left1.offsetWidth
autre{
jsweb8_cn_left.scrollLeft++
}
}
var MyMar3=setInterval(Marquee3,vitesse)
jsweb8_cn_left.onmouseover=function() {clearInterval(MyMar3)}
jsweb8_cn_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
</script>

<br>

<div id="jsweb8_cn_right" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellpacing="0" border="0">
<tr><td id="jsweb8_cn_right1" valign="top" align="center">
<table cellpadding="2" cellpacing="0" border="0">
<tr align="centre">
<td><img src="<a href=" <td><img src="<a href=" <td><img src="<a href=" <td><img src="<a href =" <td><img src="<a href=" </tr>
</table>
</td>
<td id="jsweb8_cn_right2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=30//Plus la valeur de vitesse est grande, plus la vitesse est lente
jsweb8_cn_right2.innerHTML=jsweb8_cn_right1.innerHTML
fonction Marquee4(){
si(jsweb8_cn_right.scrollLeft<=0)
jsweb8_cn_right.scrollLeft+=jsweb8_cn_right2.offsetWidth
autre{
jsweb8_cn_right.scrollLeft--
}
}
var MyMar4=setInterval(Marquee4,vitesse)
jsweb8_cn_right.onmouseover=function() {clearInterval(MyMar4)}
jsweb8_cn_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}
</script>

</body>
</html>

[Ctrl+A Tous les conseils de sélection : Vous pouvez d'abord modifier une partie du code, puis cliquer sur Exécuter]

20. Faites défiler continuellement

le code HTML

vers la gauche

<div id=demo style=overflow:hidden;height:139;width:232;background:#f4f4f4;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id =demo1 valign=top><img src="<a href=" <script>
vitesse variable = 30
demo2.innerHTML=demo1.innerHTML
fonction Marquee(){
si (demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
autre{
démo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,vitesse)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
[Ctrl+A Sélectionner tous les conseils : vous pouvez d'abord modifier une partie du code, puis appuyer sur Exécuter]

21. Faites défiler

le code HTML

vers la droite sans interruption

<div id=demo style=overflow:hidden;height:139;width:232;background:#f4f4f4;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id =demo1 valign=top><img src="<a href=" <script>
vitesse variable = 30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
fonction Marquee(){
si (démo. scrollLeft <= 0)
demo.scrollLeft+=demo2.offsetWidth
autre{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,vitesse)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
[Ctrl+A Sélectionner tous les conseils : vous pouvez d'abord modifier une partie du code, puis appuyer sur Exécuter]

Le défilement continu ou le code de défilement ininterrompu (diverses méthodes de défilement) est compatible avec IE et FireFox Opera Maxthon et le code de défilement à intervalles d'autres navigateurs

de gauche à droite Méthode 1 :

code HTML
<div id=demo style="OVERFLOW : caché ; LARGEUR : 980 px ; hauteur : 80 px ; aligner : centre">
<table cellpacing="0" cellpadding="0" align="center"
bordure="0">
<corps>
<tr>
<td id="marquePic1" valign="top">

<table width="980" height="80" border="0" cellpadding="0" cellpacing="0">
<tr>
<td width="148" height="60" bgcolor="#F2F6FB"><a href="#" target="_blank"><img src="/img/bottom_ad01.gif" border="0"> </a></td>
<td width="148" height="60" bgcolor="#F2F6FB"><a href="#" target="_blank"><img src="/img/bottom_ad02.gif" border="0"> </a></td>
<td width="148" height="60" bgcolor="#F2F6FB"><a href="#" target="_blank"><img src="/img/bottom_ad03.gif" border="0"> </a></td>
<td width="148" height="60" bgcolor="#F2F6FB"><a href="#" target="_blank"><img src="/img/bottom_ad04.gif" border="0"> </a></td>
<td width="148" height="60" bgcolor="#F2F6FB"><a href="#" target="_blank"><img src="/img/bottom_ad05.gif" border="0"> </a></td>
<td width="148" height="60" bgcolor="#F2F6FB"><a href="/info/about.asp?id=4" target="_blank"><img src="/img/bottom_ad06 .gif" border="0"></a></td>
</tr>

</table>

</td>
<td id="marquePic2" valign="top"></td>
</tr>
</tbody>
</table>
</div>
<type de script=texte/javascript>
var speed=80 
marquePic2.innerHTML=marquePic1.innerHTML
fonction Marquee(){
if(demo.scrollLeft>=marquePic1.scrollWidth){
démo.scrollLeft=0
}autre{
démo.scrollLeft++
}}
var MyMar=setInterval(Marquee,vitesse)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
[Ctrl+A Sélectionner tous les conseils : vous pouvez d'abord modifier une partie du code, puis appuyer sur Exécuter]

Méthode 1 de bas en haut :

code HTML
<table width="100%" border="0" cellpacing="2" cellpadding="2">
<tr> <td align="center"> <table width="150" border="0" align="center" cellpadding="0" Cellpacing="0">
<tr>
<td width="194" style="padding-top:8px" valign="top">
<DIV id=rolllinkk style="OVERFLOW : caché ; LARGEUR : 145 px ; HAUTEUR : 200 px">
<DIV id=rolllinkk1>

<table width="100%" border="0" cellpacing="2" cellpadding="2">