速算扑克牌 第三版
请先看 速算扑克牌,开发数学潜能【开发计划】 第一版 第二版
目前只在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.cnblogs.com/IT-Bear/
关于作者:一头写代码的熊
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接
如有问题,可以通过kumat@foxmail.com 联系我,非常感谢。