Maison > Article > interface Web > js implémente l'exquis code d'effet de table de multiplication quatre-vingt-dix-neuf

js implémente l'exquis code d'effet de table de multiplication quatre-vingt-dix-neuf

零下一度original: 2017-04-19 15:58:223840parcourir

Cet article présente principalement l'exemple de code de js pour obtenir le magnifique effet de table de multiplication. Il a une très bonne valeur de référence. Jetons un coup d'œil avec l'éditeur ci-dessous

Rendu :

Code. Comme suit :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>span实现的乘法表</title>
 <style type="text/css">
  .wrap {
   width: 800px;
   margin: 20px auto;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
  }
  span {
   padding: 3px;
   font-weight: 700;
   display: inline-block;
   line-height: 30px;
   border-bottom: 2px solid #000000;
   border-left: 2px solid #000000;
   width: 80px;
   cursor: pointer;
  }
  .last {
   margin-top: -2px;
   border-top: 2px solid #000000;
   border-right: 2px solid #000000;
  }

  .bg0 {
   background-color: yellow;
  }

  .bg1 {
   background-color: lawngreen;
  }

  .bg2 {
   background-color: lightblue;
  }
  .hover {
   background-color: #BB3BD9;
  }
  .only{
   background-color: lightsalmon;
  }
 </style>
</head>
<body>
<script>
 function multiplication(a) {
  var str = &#39;<p class="wrap">&#39;;
  for (var i = 1; i <= a; i++) {
   for (var j = 1; j <= i; j++) {
    var curstr = j + &#39; x &#39; + i + &#39;= &#39; + i * j;
    j !== i ? str += &#39;<span class="&#39; + &#39;bg&#39; + (i % 3) + &#39;">&#39; + curstr + &#39;</span>&#39; : str += &#39;<span class="&#39; + &#39;last bg&#39; + (i % 3) + &#39;">&#39; + curstr + &#39;</span><br/>&#39;;
   }
  }
  str += "</p>";
  document.write(str);
 }
 i

 multiplication(9);

 var oSpans = document.getElementsByTagName("span");
 for (var i = 0; i < oSpans.length; i++) {
  oSpans[i].onclick = function () {
   //alert("我是第 "+parseInt(this.innerHTML)+" 行");
   alert(this.innerHTML + " 我在第 " + this.innerHTML.charAt(4) + " 行");
  }
  oSpans[i].onmouseover = function () {
   //console.log(111);
   var num = this.innerHTML.charAt(4);
   //console.log(num);
   for (var j = 0; j < oSpans.length; j++) {
    if (oSpans[j].innerHTML.charAt(4) === num) {
     oSpans[j].classList.add("hover");
    }
   }
   this.classList.add("only");
  }
  oSpans[i].onmouseout = function () {
   var num = this.innerHTML.charAt(4);
   for (var j = 0; j < oSpans.length; j++) {
    if (oSpans[j].innerHTML.charAt(4) === num) {
     oSpans[j].classList.remove("hover");
    }
   }
   this.classList.remove("only");
  }
 }
</script>
</body>
</html>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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：JS génère un exemple de code de fonction de code à barresArticle suivant：JS génère un exemple de code de fonction de code à barres

Articles Liés

Voir plus