速算扑克牌 第三版

请先看 速算扑克牌，开发数学潜能【开发计划】 第一版 第二版

目前只在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如何换行  去除空格