Js implements exquisite code for 9-9 multiplication tables

This article mainly introduces the sample code for js to implement the gorgeous 9-9 multiplication table effect. It has good reference value. Let's take a look at it below. This article mainly introduces the sample code for js to implement the gorgeous 9-9 multiplication table effect. It has good reference value. Let's take a look at it together with the small Editor.

:

The Code is as follows:

 
  Multiplication Table implemented by span Script function multiplication (a) {var str ='
'; For (var I = 1; I <= a; I ++) {for (var j = 1; j <= I; j ++) {var curstr = j + 'X' + I + '=' + I * j; j! = I? Str + = ''+ curstr +'': str + = ''+ curstr +'
';} Str + ="
"; Document. write (str);} I multiplication (9); var oSpans = document. getElementsByTagName ("span"); for (var I = 0; I <oSpans. length; I ++) {oSpans [I]. onclick = function () {// alert ("I am the first" + parseInt (this. innerHTML) + "line"); alert (this. innerHTML + "I am in the" + this. innerHTML. charAt (4) + "row");} 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

The above is the details of js Code for implementing exquisite 9-9 multiplication tables. For more information, see other related articles in the first PHP community!