JavaScript implémente 99 tables de multiplication et des exemples de changement de couleur entrelacé compétences code_javascript

Exigences du projet : Réaliser la sortie de 99 tables de multiplication sur la page. (Exigence : toutes les trois lignes sont regroupées pour obtenir un changement de couleur entrelacé (la couleur est blanche, rouge, jaune (peut également être définie par vous-même)). Lorsque la souris glisse sur chaque ligne, la couleur d'arrière-plan de la ligne passe au bleu, et lorsque la souris part, elle revient à la couleur d'origine. ), l'effet de changement de couleur entrelacé doit être obtenu en utilisant à la fois les méthodes de jugement if et switch ;

Euh, analysons les exemples d'exigences : une table de multiplication 99, un changement de couleur entrelacé multi-méthodes, la souris glisse pour changer une autre couleur, et la couleur d'origine est restaurée après l'avoir quittée. Eh bien, procédons étape par étape !

Je crois que beaucoup de gens savent comment implémenter la table de multiplication 99. Ce n'est rien de plus que le résultat de deux boucles for. Je ne l'expliquerai pas ici. Les étudiants qui ne la comprennent pas peuvent étudier attentivement le code et l'étudier. mise en œuvre. Le principe, je vais écrire un petit commentaire dans le code principal pour faciliter votre compréhension :

/*乘法表的表达式是 i*j 如： * *
所以第一个数从-，分别乘以-，就得到了乘法表
*/
//这里定义是为了记录id的
var cur = ;
//这里是第一位数
for(var i=;i<=;i++){
//这里是第二位数
for(var j=;j<=i;j++){
var sum = i*j;
//这里创建div
var Div = document.createElement("div");
Div.id = cur ;
Div.style.top = i* + 'px';
Div.style.left = j* + 'px';
cur++;
//这里赋值
Div.innerHTML = j+"*"+i+"="+sum;
document.body.appendChild(Div);
} 
}

Je n’écrirai pas le style CSS. Le résultat est comme ceci :

Tout le monde connaît la table de multiplication 99 à l'école primaire. Implémentons la deuxième fonction, en changeant les couleurs sur des lignes alternées. L'exigence est d'utiliser if et switch pour l'implémenter. Ensuite, nous utilisons d'abord for pour l'implémenter (les trois. les couleurs utilisées ici sont : vert, Gris, orange) :

var cur = 1;
var bg = null;
for(var i=0;i<=9;i++){
for(var j=0;j<=i;j++){
var sum = i*j;
var Div = document.createElement("div");
var num = "div" + cur;
Div.id = num ;
Div.style.top = i*35 + 'px';
Div.style.left = j*105 + 'px';
cur++;
Div.innerHTML = j+"*"+i+"="+sum;
document.body.appendChild(Div);
var oDiv = document.getElementById(num);
if(cur%3 == 0){
bg="green";
}else if(cur%3 == 1){
bg="grey";
}else if(cur%3 == 2){
bg="orange"; 
oDiv.style.backgroundColor= bg;
}
} 

L'effet est le suivant :

Utilisez la méthode switch pour implémenter :

var cur = 1;
var bg = null;
for(var i=0;i<=9;i++){
for(var j=0;j<=i;j++){
var sum = i*j;
var Div = document.createElement("div");
var num = "div" + cur;
Div.id = num ;
Div.style.top = i*35 + 'px';
Div.style.left = j*105 + 'px';
cur++;
Div.innerHTML = j+"*"+i+"="+sum;
document.body.appendChild(Div);
var oDiv = document.getElementById(num);
switch(cur%3){
case 0 :
bg="green";
break;
case 1 :
bg="grey";
break;
case 2 :
bg="orange";
break; 
}
oDiv.style.backgroundColor= bg;
}
} 

L'effet est le suivant :

L'effet semble être le même, haha. La méthode de mise en œuvre est assez simple. Voyons maintenant comment déplacer la couleur comme exemple :

var cur = ;
var bg = null;
for(var i=;i<=;i++){
for(var j=;j<=i;j++){
var sum = i*j;
var Div = document.createElement("div");
var num = "div" + cur;
Div.id = num ;
Div.style.top = i* + 'px';
Div.style.left = j* + 'px';
cur++;
Div.innerHTML = j+"*"+i+"="+sum;
document.body.appendChild(Div);
var oDiv = document.getElementById(num); 
switch(cur%){
case :
bg="green";
break;
case :
bg="grey";
break;
case :
bg="orange";
break; 
}
oDiv.style.backgroundColor= bg;
}
}
var oDiv = document.getElementsByTagName("div");
var len = oDiv.length;
for(var i=;i<len;i++){
//鼠标移入
oDiv[i].onmouseover = function(){
//第一种写法，可以获取行内样式（用style包起来的），也可以获取样式表中的样式，且值为计算过的
//var defaultBg = getStyle(this,'background-color');
//第二种写法，只能获取style包起来的行内样式，值没有经过计算
var defaultBg = this.style.backgroundColor; //这里是为了存元素刚移入时的背景颜色
this.style.backgroundColor = 'red';
this.onmouseout = function(){
this.style.backgroundColor = defaultBg;
}
} 
}
//这里是获取元素的样式值，兼容性写法
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr]; 
} 
}

Je ne prendrai pas de captures d'écran des résultats que j'ai obtenus, je vais juste me décider ou les écrire moi-même. À ce stade, toutes les exigences ont été écrites ! Pensez-vous que c'est vraiment par ici ? Selon mon style habituel, bien sûr ce n’est pas fini, il y a encore quelque chose à venir ! Regardez en bas :

Vous ne trouvez pas que c'est un peu bizarre que la couleur change une ligne sur deux ? C'est bien la couleur qui change toutes les deux lignes. S'il s'agit d'un div 100*100, l'effet est génial, mais pour des résultats comme la multiplication 99. table, je peux seulement dire haha, est-ce possible ? Comment faire en sorte que la table de multiplication 99 réalise un changement de couleur entrelacé comme un div 100*100 ? Quand on parle d’esprit artisanal, il suffit de se soucier de ces petits détails. Écrivez-en et voyez !

Principe : 100*100 div, si je numérote chacun, utilise les axes horizontal et vertical pour le représenter, comme ceci :

Ensuite nous saurons quelle valeur correspond à quelle couleur. La conversion en table de multiplication 99 est comme ceci :

Ensuite, voici l'idée. Si j'ajoute une marque à chaque div pour indiquer de quelle ligne et colonne il s'agit, je saurai de quelle couleur il s'agit. Le code est le suivant :

var cur = ;
var bg = null;
for(var i=;i<=;i++){
for(var j=;j<=i;j++){
var sum = i*j;
var Div = document.createElement("div");
var num = "div" + cur;
Div.id = num ;
Div.style.top = i* + 'px';
Div.style.left = j* + 'px';
Div.setAttribute('abc',i+''+j);//核心代码就是这里啦，给每一个div 自定义一个属性abc，将坐标赋值给它
cur++;
Div.innerHTML = j+"*"+i+"="+sum;
document.body.appendChild(Div);
}
}
var oDiv = document.getElementsByTagName("div");
for(var i=;i<oDiv.length;i++){
var val = oDiv[i].getAttribute('abc');//这里获取自定义属性的值
//用这个值来判断什么位置应该是什么颜色
switch(val%){ 
case :
bg="green";
break;
case :
bg="grey";
break;
case :
bg="orange";
break; 
}
oDiv[i].style.backgroundColor= bg;
}

Le résultat est le suivant :

L'effet n'est-il pas génial ? C'est beaucoup plus confortable que celui ci-dessus. Alors, rappelez-vous la fonction puissante des attributs personnalisés. Si vous avez le temps, je parlerai de la génialité de la personnalisation. attributs.Application, haha!

Dans un esprit d'artisanat, développons-le un peu, organisons un peu le code ci-dessus, créons un simple petit package, et cela devient une petite application de changement de couleur entrelacé qui calcule les factorielles. La sensation devient instantanément : tout comme. ça, ça fait deux fois plus de bien !

function multiTable(m){
var cur = ;
var bg = null;
for(var i=;i<=m;i++){
for(var j=;j<=i;j++){
var sum = i*j;
var Div = document.createElement("div");
var num = "div" + cur;
Div.id = num ;
Div.style.top = i* + 'px';
Div.style.left = j* + 'px';
Div.setAttribute('abc',i+''+j);//核心代码就是这里啦，给每一个div 自定义一个属性abc，将坐标赋值给它
cur++;
Div.innerHTML = j+"*"+i+"="+sum;
document.body.appendChild(Div);
}
}
var oDiv = document.getElementsByTagName("div");
for(var i=;i<oDiv.length;i++){
var val = oDiv[i].getAttribute('abc');//这里获取自定义属性的值
//用这个值来判断什么位置应该是什么颜色
switch(val%){ 
case :
bg="green";
break;
case :
bg="grey";
break;
case :
bg="orange";
break; 
}
oDiv[i].style.backgroundColor= bg;
}
}
multiTable();

Il s'agit de l'implémentation JavaScript de 99 tables de multiplication et d'un exemple de code de changement de couleur entrelacé introduit par l'éditeur. J'espère que cela vous sera utile !