欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript實現(xiàn)99乘法表及隔行變色實例代碼

 更新時間:2016年02月24日 10:52:37   作者:凌云之翼  
最近做了個項目是要求實現(xiàn)99乘法表隔行變色,本文給大家分享通過多種方式實現(xiàn)js 99 乘法表,感興趣的朋友一起看看吧

項目需求:實現(xiàn)在頁面中輸出99乘法表。(要求:以每三行為一組,實現(xiàn)隔行變色(顏色為白,紅,黃(也可自己定義)),鼠標(biāo)滑過每一行,行背景顏色變?yōu)樗{(lán)色,鼠標(biāo)離開又恢復(fù)原來的顏色),隔行變色的效果需要用if和switch兩種判斷方式都能實現(xiàn);

額,分析一下實例要求:一個99乘法表,一個多方法的隔行變色,鼠標(biāo)滑過變另外一個顏色,離開恢復(fù)原色。 嗯,我們一步步來吧!

99乘法表的實現(xiàn),我相信很多人都知道怎么實現(xiàn),無非是2個for循環(huán)得到的結(jié)果,這里我就不多做解釋,還不理解的同學(xué)可以仔細(xì)研究一下代碼,研究一下實現(xiàn)的原理,我在核心代碼那里寫一點小注釋,方便你理解:

/*乘法表的表達(dá)式是 i*j 如: * *
所以第一個數(shù)從-,分別乘以-,就得到了乘法表
*/
//這里定義是為了記錄id的
var cur = ;
//這里是第一位數(shù)
for(var i=;i<=;i++){
//這里是第二位數(shù)
for(var j=;j<=i;j++){
var sum = i*j;
//這里創(chuàng)建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);
} 
}

css樣式我就不寫了,分到的效果就是這樣的:

小學(xué)99乘法表,大家都很熟悉,那我們實現(xiàn)第二個功能,隔行變色,要求是用if和switch實現(xiàn),那我們先用for來實現(xiàn)(這里用的3種顏色是:綠,灰,橙):

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;
}
} 

實現(xiàn)效果是這樣的:


用switch方法實現(xiàn):

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;
}
} 

實現(xiàn)效果是這樣的:

效果好像無差,哈哈,說來實現(xiàn)方法也是挺簡單的,現(xiàn)在看看移入表色是怎么做的,以switch判斷為例:

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++){
//鼠標(biāo)移入
oDiv[i].onmouseover = function(){
//第一種寫法,可以獲取行內(nèi)樣式(用style包起來的),也可以獲取樣式表中的樣式,且值為計算過的
//var defaultBg = getStyle(this,'background-color');
//第二種寫法,只能獲取style包起來的行內(nèi)樣式,值沒有經(jīng)過計算
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]; 
} 
}

得到的效果我就不截圖了,自行腦補(bǔ),或者自己也寫一下,到此,所以的要求都寫完了!你以為真的到這里就完了嗎?按照我一貫的風(fēng)格,當(dāng)然沒有完,后面還有料!往下看:

你不覺得這個隔行變色有點奇怪嗎,確實是隔行變了色,如果是100*100的div,效果杠杠的,但是像99乘法表這樣的結(jié)果,我只能說呵呵,那能不能讓99乘法表實現(xiàn)像100*100的div那樣的隔行變色呢?咱們說工匠精神,就是要在乎這些細(xì)枝末節(jié),寫寫看唄!

原理:100*100的div,如果我給每一個編一個號,用橫軸和縱軸表示,像這樣:

那我們就知道,什么數(shù)值對應(yīng)什么顏色了,轉(zhuǎn)化成99乘法表就是這樣:

那,思路就來了,如果我給每個div加一個標(biāo)記,表示他是第幾行的第幾列,我就知道他是什么顏色,那代碼就如下:

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,將坐標(biāo)賦值給它
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');//這里獲取自定義屬性的值
//用這個值來判斷什么位置應(yīng)該是什么顏色
switch(val%){ 
case :
bg="green";
break;
case :
bg="grey";
break;
case :
bg="orange";
break; 
}
oDiv[i].style.backgroundColor= bg;
}

得到的效果就是這樣的:

效果是不是棒棒噠,比上面的感覺還是舒服許多,所以,記住自定義屬性的強(qiáng)大功能,它能做很多棒棒噠事情,有時間,專門講講自定義屬性的牛X應(yīng)用,哈哈!

工匠精神,我們再擴(kuò)展一下,把上面的代碼稍微整理一下,做一個簡單的小封裝,就變成了一個求階乘的隔行變色的小應(yīng)用,感覺瞬間變得:就這樣 feel 倍爽!

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,將坐標(biāo)賦值給它
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');//這里獲取自定義屬性的值
//用這個值來判斷什么位置應(yīng)該是什么顏色
switch(val%){ 
case :
bg="green";
break;
case :
bg="grey";
break;
case :
bg="orange";
break; 
}
oDiv[i].style.backgroundColor= bg;
}
}
multiTable();

關(guān)于小編給大家介紹的JavaScript實現(xiàn)99乘法表及隔行變色實例代碼就給大家介紹這么多,希望對大家有所幫助!

相關(guān)文章

  • JS訪問DOM節(jié)點方法詳解

    JS訪問DOM節(jié)點方法詳解

    這篇文章主要介紹了JS訪問DOM節(jié)點方法,結(jié)合實例形式較為詳細(xì)的分析了JS訪問DOM節(jié)點的相關(guān)函數(shù)與使用方法,需要的朋友可以參考下
    2016-11-11
  • SWFUpload多文件上傳及文件個數(shù)限制的方法

    SWFUpload多文件上傳及文件個數(shù)限制的方法

    這篇文章主要介紹了SWFUpload多文件上傳及文件個數(shù)限制的方法,較為詳細(xì)的分析了SWFUpload組件實現(xiàn)多文件上傳的原理、使用方法與相關(guān)注意事項,需要的朋友可以參考下
    2016-05-05
  • JS面向?qū)ο缶幊虦\析

    JS面向?qū)ο缶幊虦\析

    下面就結(jié)合我自己的體會和所學(xué)習(xí)的東東和大家一起來學(xué)習(xí)在JS中如何使用面向?qū)ο蟮木幊獭?/div> 2011-08-08
  • js簡單的表拖拽

    js簡單的表拖拽

    用js實現(xiàn)表格的拖拽效果代碼
    2008-05-05
  • JavaScript中?this?的綁定指向規(guī)則

    JavaScript中?this?的綁定指向規(guī)則

    這篇文章主要介紹了JavaScript中?this?的綁定指向規(guī)則,this的指向問題存在各種各樣的,關(guān)于如何綁定指向,下面文章作簡單介紹需要的小伙伴可以參考一下
    2022-06-06
  • JavaScript實現(xiàn)簡單日期特效

    JavaScript實現(xiàn)簡單日期特效

    這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)簡單日期特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-04-04
  • IE 條件注釋詳解總結(jié)(附實例代碼)

    IE 條件注釋詳解總結(jié)(附實例代碼)

    IE的有條件注釋是一種專有的(因此是非標(biāo)準(zhǔn)的)、對常規(guī)(X)HTML注釋的Miscrosoft擴(kuò)展。
    2009-08-08
  • 基于HTML5+JS實現(xiàn)本地圖片裁剪并上傳功能

    基于HTML5+JS實現(xiàn)本地圖片裁剪并上傳功能

    這篇文章主要為大家詳細(xì)介紹了HTML5本地圖片裁剪并上傳的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-03-03
  • XMLHTTP 亂碼的解決方法(UTF8,GB2312 編碼 解碼)

    XMLHTTP 亂碼的解決方法(UTF8,GB2312 編碼 解碼)

    XMLHTTP 亂碼的解決方法(UTF8,GB2312 編碼 解碼)(附帶解決DHTMLX不能用中文的問題)
    2011-01-01
  • 詳解JavaScript中Canvas的高級繪圖和動畫技術(shù)

    詳解JavaScript中Canvas的高級繪圖和動畫技術(shù)

    JavaScript中的Canvas 是一個強(qiáng)大的 HTML5 元素,允許你通過編程方式創(chuàng)建圖形、繪制圖像和實現(xiàn)復(fù)雜的動畫效果,在本文中,我們將深入探討 JavaScript Canvas 的高級繪圖和動畫技術(shù),并提供一個復(fù)雜的案例,以展示其潛力,需要的朋友可以參考下
    2023-10-10

最新評論