速算扑克牌 第三版

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

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

posted @ 2012-03-18 22:36  kumat  阅读(1813)  评论(6编辑  收藏  举报