Home > Article > Web Front-end > js implements the exquisite ninety-nine multiplication table effect code

js implements the exquisite ninety-nine multiplication table effect code

零下一度Original: 2017-04-19 15:58:223878browse

This article mainly introduces the sample code of js to achieve the gorgeous nine-nine multiplication table effect. It has a very good reference value. Let’s take a look at it with the editor.

Rendering:

Code As follows:

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

The above is the detailed content of js implements the exquisite ninety-nine multiplication table effect code. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JS generate barcode function sample codeNext article：JS generate barcode function sample code

See more

js implements the exquisite ninety-nine multiplication table effect code

Related articles