速算撲克牌 第三版

請先看 速算撲克牌，開發數學潛能【開發計划】 第一版 第二版

目前只在Chrome瀏覽器、IE8瀏覽器中效果較好，其余還未測試，后期將考慮瀏覽器兼容問題

這個第三版用了三天零碎時間，主要是調整了下樣式，還研究了很奇葩的方法

改進地方

1.更改了樣式，去除了開始按鈕和下拉框

2.全頁面均采用button完成，並使用getElementByNames循環賦值取值判斷

效果

 算法：　　

 把牌的順序洗亂，然后拿在手里一張一張地出，出第一張時，嘴里念出牌上的數字；

 出第二張時，直接說出第一張牌與第二張牌相加的和；

 出第三張牌時，說出跟前一個得數相加的和……

 注意：在連加的過程中既不要叨念也不要默想“幾加幾等與幾”而要直接說出兩數的和。 
 例如：第一張牌是3，第二張牌是5，要直接說“8”而不要說也不要默想“3+5=8”。

 當然你也可以選擇減法，如1-10相加為55，則第一張牌為5，55-5=50

 操作提示：

 1.選擇要循環的次數和運算方式后，點擊開始。

 2.點擊數字出現下一個。

---

運算方式 循環次數

評估值=時間/循環次數（若運算方法為-，則-8）

x>=20 速度太慢了

15<=x<20 有點慢哦

10<x<15還待提高

6<x<=10速度很快哦

x<=6 你是預編譯的吧

功能分析

1.去空格

在按鈕循環時，是根據按鈕的顏色來判斷的。

以顏色#ccc為例，在Chrome中為rgb(204, 204, 204),在IE8中則為rgb(204,204,204)。只好將其去空格

str=str.replace(/\s+/g,"");  

相關資料 去除空格
2.為了簡化代碼，我用了很奇葩的方式

//getStyle
function getStyle(id){
 return document.getElementById(id).style;    
}
//getClassName
function getClassName(id){
 return document.getElementById(id).className;
}
//getEle
function getEle(id){
 return document.getElementById(id);    
}
//getBgColor
function getBgColor(obj){
    return obj.style.backgroundColor;
}

3.還用了很奇葩的判斷方式和加載樣式

onload=function (){
    
    getEle("InfoDIV").style.cursor="pointer";
    var types=document.getElementsByName("btnType");
    for(var i=0;i<types.length;i++){
        var btnStyle=types.item(i).style;
        btnStyle.border="0px";
        btnStyle.width="20px";
        btnStyle.height="20px";
        btnStyle.color="#ffffff";
        if(i==0)
        btnStyle.backgroundColor=bg1;
        else
        btnStyle.backgroundColor=bg2;
    }
    types.item(0).backgroundColor=bg1;
    var timess=document.getElementsByName("btnTimes");
    for(var i=0;i<timess.length;i++){
        var btnStyle=timess.item(i).style;
        btnStyle.border="0px";
        btnStyle.width="20px";
        btnStyle.height="20px";
        btnStyle.color="#ffffff";
        if(i==0)
        btnStyle.backgroundColor=bg1;
        else
        btnStyle.backgroundColor=bg2;
    }
    
 }

//運算方式改變
function TypeChange(id){
var divID="btnType";
var types=document.getElementsByName("btnType");
    for(var i=1;i<=types.length;i++){
        if(id==types.item(i-1).id){
            getEle(divID+i).style.backgroundColor=bg1;
            }else{
            getEle(divID+i).style.backgroundColor=bg2;
        }
    }
}
//循環次數
function TimesChange(id){
    var divID="btnTimes";
    var types=document.getElementsByName("btnTimes");
    for(var i=1;i<=types.length;i++){
        if(id==types.item(i-1).id){
            getEle(divID+i).style.backgroundColor=bg1;
            }else{
            getEle(divID+i).style.backgroundColor=bg2;
        }
    }
}

如果大家覺得用別的方法更好，請舉例告訴我吧。比如html5，JQuery或者更有效率的方法。

 后續

其實第三版在功能上沒有什么亮點，只是為了美觀並兼容，我選擇了一種很懶的方式，用button

1.瀏覽器兼容問題

2.考慮效率和代碼質量

資料來源

《劉亦婷學習方法及細節培養》中提到過該速算訓練的方法

http://www.yijide.com/news/102.htm

http://www.codefans.net/jscss/code/941.shtml

 JS打亂數組  JS不重復隨機數  JS計時腳本   confirm如何換行和alert如何換行  去除空格