关于javascript的弹跳问题,求高手指点迷津

风潇萧曦 2015-07-02 10:33:34
“增加 TODO 按钮的点击效果,点击这个按钮,就会从 0 开始积累次数,点第一次 0 变成 1 。(这个次数需要显示出来,我认为显示在按钮上为宜)那么,在方块触底之前,点击按钮积累的次数,将表现为方块的反弹次数。比如积累了 3 次,则反弹 4 次;反弹 1 次为一上一下。
如果各方块依次下落,那么当新方块开始下落之后,点击 TODO 按钮就得重新为新方块积累次数了”

这是原问题,我已经实现了让TODO按钮计数并且显示在按钮上,但是怎样才能让按钮的计数转化为文本的弹跳次数呢?下面我贴出我改的代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
article
{
position: absolute;
display: block;
top: 10px;
border: 1px solid gray;
padding: 4px;
width: 96px;
height: 96px;
overflow: hidden;
cursor: pointer;
}
#article_1
{
left: 10px;
}
#article_2
{
left: 130px;
}
input
{

position: absolute;
display: block;
top: 40px;
left: 260px;
}

/* 下落动画 */
@-webkit-keyframes drop
{
from {top:10px; width:96px; height:96px;}
to {top:510px; width: 296px; height: 296px;}
}
.dropping
{
-webkit-animation: drop 3s cubic-bezier(.40,0,.66,.48);
-webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes jump
{
from {top:510px; width: 296px; height: 296px;}
to {top:410px; width: 296px; height: 296px;}
}
.jumping
{
-webkit-animation: jump 0.5s cubic-bezier(.41,.56,.62,1) 0s 2 alternate;

-webkit-animation-fill-mode: forwards;
}

</style>
<script type="text/javascript">
/** 此函数用来方便获取页面元素 */
var $ = function(id)
{
return document.getElementById(id);
}
/** 页面控制对象 */
var ctrl = {};
var i=2;
/** 启动初始化方法 */
ctrl.start = function()
{
$("article_1").onclick = this.click;
$("article_2").onclick = this.click;
};
/** 下落 */
ctrl.click = function()
{

ctrl.inital();
this.className = "dropping";
var targetId = this.getAttribute("id");
console.log(targetId);

setTimeout("ctrl.jump('" + targetId + "');", 3000);
while(i>0)
{
i=i-1;
setTimeout("ctrl.jump('" + targetId + "');", 500);
}
};
ctrl.xunhuan=function(id)
{
while(i>0)
{
i-=1;
setTimeout("ctrl.jump('" + targetId + "');", 500);
}
}
/** 弹跳 */
ctrl.jump = function(id)
{

console.log("id = " + id);


$(id).className = "jumping";
};
ctrl.inital = function()
{
i=0;
mybtn.value="TODO:"+i;
}
function change(){

i+=1;
mybtn.value="TODO:"+i;
}

</script>
</head>
<body onLoad="ctrl.start();">

<section>
<article id="article_1" onselectstart="return false;">
前段时间招聘。因为我一直在我的部门推行一些有效却被绝大多数中国公司忽视的开发理念,比如平级人事结构、测试驱动开发、制度化绩效、设计先行、迭代开发等等,所以招软件设计师非常困难。最终问题还算解决了吧。以下是我的面试总结。


  一般来说,作为迎接面试的人,我会借着询问路况、接引进会议室或者索要简历,来表达出自己的礼貌,让对方有一定紧张感。这样我认为有利于对方表现出自然状态的思路。
  然后我会根据简历,大概咨询下对方工作中所做过的设计工作。因为我在招软件设计师,所以只问设计,看看他对设计的理解是什么样子。通过这种询问,可以考察对方的简历是否作假,如果作假那么无法明确讲述其过往工作。还需要看对方的表达能力,即主动展现自己思路的能力。按照我这一批面试的人看,大多数人会讲述其项目经历的业务或者架构。只有一个人能够把软件设计和架构设计、软件开发分离出来。

  然后就会开始做面试题了。面试题附在下边。我会先让其看第一大题,设计能力,请ta选择一道题目作答。看题之后,对方一般会陷入思考沉默。那么根据对方眼神不再在题目间扫动,表示对方已经针对某一个题目思考。当然,如果是沟通能力好的人,这这之前会主动告诉我,ta准备作答哪道题目。此时需要打断沉默,对对方说,希望对方谈一谈想法,任何一点想法都可以说出来。这个时候如果对方能够针对题目问一些具体没表示明白的细节,或者自行设定细节,都表明此人沟通能力极好,否则应该认为其沟通能力打折扣。

  当对方陆陆续续讲述自己的设计时,作为面试的人,需要指出其没有思考到的地方,或者赞扬对方想的很合理。一般来说,面试的人在经历了之前的客套和紧张之后,不太容易沉下心来仔细思考。凡是这时候依然能保持有序高效的思考能力,说明这个人抗压能力极强,至少是心理调节能力极好。通过这时的回答,就可以看出此人对设计是否了解,设计能力怎么样。

  以 1.1 为例,我随便说几个要点。比如说,我们应该抽象出牌局状态这么一个类,作为传输给每一个玩家的内容。比如说,我们可以抽象出一张牌这么一类,作为出牌的玩家上报的内容。比如说,此场景应该有一个短连接请求处理类,还应该有一个房间控制类;房间控制类里边维护一个个开通的房间;当每一个进入房间的请求来临时,都应该通过房间控制类,将连接转移到这个对应的房间编号;那么房间编号可以由客户端通过参数传递上来。比如说,每一个房间能够维护一组长连接,这可以开一个线程来处理;线程由一个单例的线程维护器对象来启动。比如说,房间在新线程中执行的代码,应该是轮询每个长连接看谁发来了“牌”,然后调用数据计算模块,通过牌和原有牌局(保存在房间对象里),得到新牌局,发送给每一个连接。当然了,如果能对断链识别什么的做出设计就更好了。不过控制此题时间不要超过 10 分钟,所以一般不可能讲述出太多内容。

  接下来,要根据刚才设计方面的能力,中转到 2 或者 3 。如果设计能力不错,则应该转移到 3 ;如果设计能力不好,则应该转移到 2 。这个设计能力的好不好,是根据面试者觉得达标不达标,够用不够用来说的。

  先来说说转到 2 编程能力测试的情况。首先,应让其在 2.1 和 2.2 中选一道作答。2.1 的要点,是建立合适的数据结构。最佳的是 money 与 id 双排序的基础对象构建的 TreeSet ,通过 NavigableSet 提供的子树功能,以 size() 获取名次。自己前后几位可通过正反向迭代器取得。当然,也可以使用链表和散列集合的二重结构。这要慢不少,但是也还算在可接受范围内能实现功能。

  此题非常多的面试者会联想到 SQL 的 order by 子句。问题是这些人应该设计不出合适的二维表结构,配合 SQL 实现想要的功能。如果面试者能够实现,那也至少算能够做出来一种实现,不应苛求。

  2.2 我认为用二维表传统关系型数据库很合适。应该有二个表,一个是历史表,一个是实际操作记录表。每次受影响玩家登录,都会激活从实际操作记录表到历史记录表的总结过程;这是一种最小型的数据挖掘。受试者能够正确写出总结过程,能够正确写出读取历史表的合并过程,则是满分。

  编程过程测试,可以随时提供设计思路指导。旨在督促受试者利用短暂的面试时间,认真思考,发挥出最强的思维能力,以检测其通过自己思考解决问题的水平。如果能在不断的设计方案提示下,指出语句写法,则应该认为设计能力为零,但编程基本功很扎实。如果算法也需要提示,则认为编写程序的技能本身不好,但语言知识尚可。

  做完 2.1 和 2.2 其中一题,应准备查资料的条件,也就是连接互联网的浏览器,让其做第 3 题。如果其对 Java5.0 多线程类库非常了解,则认为此人关注技术新闻,有很强的技术敏感性和学习能力。否则则应通过观察其查资料选用关键词的方式、查看内容的耐心敏感度,来判断此人的学习能力和心性。至此,您应该对面试的人有了较全面的认识。推荐记录下来,以便比较不同的面试者,谁综合看来更适用。

  我们再来说说直接从 1 题转移到 3 题的情况。同样是 3.1 和 3.2 选做一题,来测试受试者的架构能力。以和设计能力测评同样的节奏进入互动,然后探寻受试者思路。架构的核心,在于指派分布,即指派哪些逻辑运行在什么地方,以及这些“地方”的布局方式。非常多的受试者无法分清软件设计和架构设计的区别。每当这个时候,面试官就应该主动给受试者讲述架构的含义,同时记录受试者不具备可用的架构工作经验,但应根据接下来的思路表现,来判断其架构见识、思路以及资质。

  3.1 的要点在于网络存档应该与应用服务分离。应用服务做负载均衡的话,应制作单独的数据服务以支持网络存档。这样可以保证无论是运营后台还是玩家都能够看到全部的数据。如果受试者无法摆脱分区的概念,则应指出,运营后台页面,能够选择分区,每次选择,程序能够连接到不同区的数据服务。

  3.2 首先这种全球性质或者打地理范围的系统,肯定要使用地域分流的域名服务(DNS)负载均衡。那么也需要建立专门的用户数据传输机制,以保证用户大范围移动物理位置之时,能够在对应区域取得自己的数据。为此,也就需要设置统一的数据中心,以登记不同区域的位置关系以及服务器地址。考虑到系统不可能一次性完成,使用能够自动加载的云基础结构,应该会是一个最合理的选择。

  通过架构测评,如果受试者能够展现出关于自由软件的很多知识,则说明此人在技术进步上有较高追求。架构这边如果用时很短,也就是受试者表示出了对架构的恐惧和放弃,应该认为受试者面对困难问题的解决决心坚韧程度打折扣。这时应将其引导至 2.3 题,以考察其通过查资料解决问题的水平和心性。面试完毕之后,您应该记录面试情况,以便比较不同的面试者,谁综合看来更适用。

  最后我想说一句。很多面试官都相信自己对受试者的感觉。其实面试流程的目的,就是通过流程,让受试者更多地表现自己,以丰富面试官的感觉,以防以偏概全、认识不足等情况发生。
</article>
<article id="article_2" onselectstart="return false;">
看到了一篇日志,51CTO 用户 gfdsaokm 所写的《由辞职引发的一次谈话》,地址是 http://asthenia.blog.51cto.com/4072837/1213121
以下是我的感想。


唉,我总在想,做 IT 工作为的是什么。升职加薪,就是各位所欲吗?每每都有人告诉我社会很现实,人们很势利,但我工作这么多年,我觉得完全可以过出不同的日子。我这些年的工作,从来不用专门注意什么人喜好,从来都只做自己喜欢的事情。所以别人上了一天班都盼着下班,我是越上越开心。不但我能做到,我招来的人以及愿意跟我谈谈心的同事,大都能做到这样。

  我觉得明确自己的追求,找到自己的追求与上级想要的、单位需要的之间共同之处,是非常重要的。不应该为了升职加薪而工作,而应该在找到了利益一致的方向之后,为了自己的“所欲”而做事。因为自己和别人和单位利益一致,所以每做一个自己最想干的事情,都能得到别人的认可。

  具体来说,比如我追求规范化,我在的公司本来认为做文档浪费开发时间。但是一个项目进入调试期,我之前坚持要求大家做的文档,提供了很多追溯的作用。于是项目调试时间成倍缩短。这样别人就认识到了我之前所做的意义。那么之后我为了自己对规范化的追求所做的事情,领导都在支持,我也被认作是别人难以替代的重要员工。

  机要秘书的工作职责如此,当然应该注意那些东西。但是一个技术人员注意这些东西,真的是应该的吗?比如轮胎的事情,这样做自己是会优先得到提拔,但这破坏了一个公司因才升职的文化氛围。该提拔某人的时候,老板抹不开面子,提拔了自己;可是因此公司的运作变得低效了;扩散开来,整个中国企业竞争能力下降了。这样自己的收益还是会下降。咱也知道,自己不做这样的事情,有别人做,公司氛围还是会变腐败;但是能少一点是一点啊,最终的大利,才是每个人都能有最好收益的结局。

  从上海回北京的火车上和一个做数控机床的人聊天。他是技术员,年景好的时候,一年分成接近 10 万,年景不好一年分成是 1 万。他们老板要从技术员里边提拔设计师出来,他们就会很自觉地推荐技术最好的人,而不是推荐自己。为什么?技术员工资 5000 上下,设计师工资 8000-9000 ,但是如果上的设计师有本事,整个公司状况好,那分成就比自己上位工资多的这点儿要多多了。这就是重视远期,重视大利,对自己的意义。

  在公司里做事,大家都是在看着的。咱们自己每做一个事情,都会对别人产生或多或少的影响。所以我觉得一定要花心思来想自己每一个所作所为,究竟给员工环境造成了什么方向的推动。整个公司因为自己不正常手段谋得某一个小利而变得堕落百分之一,自己将来得到的大利就会削弱百分之好几。这其实是亏本的。

  另外,回归最开始一段。咱们追求的究竟是什么?真的只是日子越过越好这唯一一点吗?那我觉得你们不如去做生意,比做 IT 要更容易致富——虽然风险也会大一些。我觉得咱们或多或少总有咱们的职业追求。上位,争宠,其实都浪费了自己追求目标的精力。与其把心分成两份,一份求理想,一份求生活,不如找到二者的结合。

本文还发布在我的日
ITeye: http://surmounting.iteye.com/blog/1887894
中国开源社区: http://my.oschina.net/shane1984/blog/138076
51CTO: http://shanelooli.blog.51cto.com/5523233/1223401
</article>
<input type="button" id="mybtn" value="TODO" onclick=change();></input>
</section>
</body>
</html>
...全文
70 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

87,954

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧