Tutorial zum Erstellen einer Multiplikationstabelle mit JavaScript-js-Tutorial-php.cn

Tutorial zum Erstellen einer Multiplikationstabelle mit JavaScript

巴扎黑

Freigeben： 2017-08-17 13:57:45

Original

1615 Leute haben es durchsucht

Rendering:

Bild: 1.png

Der Code ist wie folgt folgt:

<!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>&#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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonTutorial zum Erstellen einer Multiplikationstabelle mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!