我在屏幕底部有一个30秒钟的多玩家游戏.
如果玩家没有任何动作30秒,表单提交.
如果玩家没有任何动作30秒,表单提交.
var ProgressValue = 0; function showProgress() { ProgressValue += 100/30; if (ProgressValue > 100) { $('form').submit(); } // Ajax is done here to see if anyone has made a move. $('.progress .bar').css('width',ProgressValue + '%'); setTimeout(showProgress,1000); } setTimeout(showProgress,1000);
每一秒钟,我检查应用范围,看看有没有人改变了它的价值
Application.LastMove
我希望进度条能顺利地动画,但是我不想通过减少超时值来做到这一点.我认为检查每个人是否有人已经采取行动,每秒服务器上已经有足够的负载.
我听说过WebSockets,但是我现在的服务器是ColdFusion 8,所以(我想),除了觉得ajax不那么优雅,文明较少的年龄之外,我很满意每秒进行ajax调用.
问:你如何将twitter-bootstrap进度条从3.3%平均提高到6.6%?
解决方法
不要使用jQuery动画,喜欢CSS动画,除非你必须支持旧的浏览器.
我从Bootstrap样式做了这个复制:
.bar { -webkit-transition: width 30.0s ease !important; -moz-transition: width 30.0s ease !important; -o-transition: width 30.0s ease !important; transition: width 30.0s ease !important; }
对于这么长的过渡,我建议您尝试不同的动画:http://www.the-art-of-web.com/css/timing-function/
在我的例子中,我添加了两件可以有用的东西:
>动画开始时和按钮结束时按钮文字会更改(只是为了检查动画时间)
>检查浏览器是否支持此动画:您可以将jQuery代码用作备用模式
有关如何检测CSS动画支持的更多信息:https://developer.mozilla.org/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support
原文地址:https://www.jb51.cc/js/153288.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。