不能从SQL数据获得翻转计数器动画
Cant get flip counter to animate from SQL data
我目前正在实现一个网页内的翻转计数器。我有了整体布局和配置的一切，当我加载页面时，初始的sqlserver数据立即显示出来。我试图创建一个无限循环，调用一个函数重新连接到数据库，获得我想要的数字数据，并重新激活翻转计数器以反映更新的数字。似乎我可以重新调用该函数，但计数器从未与新数字一起重新激活。
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8"/>
<title>Title</title>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name="author" content=""/>
<!-- Counter script -->
<script type="text/javascript" src="js/flipcounter.js"></script>
<script type="text/javascript" src="js/modernizr.custom.21954.js"></script>
<!-- Counter styles -->
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<!-- NOT REQUIRED FOR COUNTER TO FUNCTION, JUST FOR DEMO PURPOSES -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery- ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/vader/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:400,500,700">
<style>
html {
background: url(images/1_1_1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<h1>Header</h1>
<ul id="style-switcher">
<li><a href="#" class="active" data-style="default">Default</a></li>
<li><a href="#" data-style="light">Light</a></li>
<li><a href="#" data-style="small">Small</a></li>
<li><a href="#" data-style="huge">Huge</a></li>
</ul>
<div class="clearfix">
<div class="counter-wrapper">
<ul class="flip-counter default" id="myCounter"></ul>
</div>
</div>
<script>
$(function () {
//var myCounter = new flipCounter('myCounter', {value: 1000, inc: 123, pace: 1000, auto: true});
var myCounter = new flipCounter('myCounter', { value: pull_visit_count(), inc: 0, pace: 0, auto: false });
setInterval(pull_visit_count, 30000);
function pull_visit_count() {
var connection = new ActiveXObject("ADODB.Connection");
var connectionstring = ("Data Source = ; Initial Catalog = ; User ID = ; Password = ; Provider = ");
connection.Open(connectionstring);
var rs = new ActiveXObject("ADODB.Recordset");
rs.Open("SELECT COUNT(*) FROM TABLE", connection);
rs.MoveFirst
while (!rs.eof) {
var cnt = parseInt(rs.fields(0));
rs.movenext;
}
rs.close;
connection.close;
return cnt;
}
});
</script>
</body>
</html>
和相应的javascript
var flipCounter = function(d, options){
// Default values
var defaults = {
value: 0,
inc: 1,
pace: 1000,
auto: true,
decimals: 0,
places: 0
};
var counter = options || {};
var doc = window.document;
for (var opt in defaults) {
counter[opt] = counter.hasOwnProperty(opt) ? counter[opt] : defaults[opt];
}
var digitsOld = [], digitsNew = [],decimalsOld = [], decimalsNew = [], digitsAnimate = [], x, y, nextCount = null;
var div = d;
if (typeof d === 'string') {
div = doc.getElementById(d);
}
/**
* Sets the value of the counter and animates the digits to new value.
*
* Example: myCounter.setValue(500); would set the value of the counter to 500,
* no matter what value it was previously.
*
* @param {int} n
* New counter value
*/
this.setValue = function(n) {
if (_isNumber(n)) {
x = counter.value;
y = counter.value = n;
_digitCheck(x, y);
}
return this;
};
/**
* Sets the increment for the counter. Does NOT animate digits.
*/
this.setIncrement = function(n) {
counter.inc = _isNumber(n) ? n : defaults.inc;
return this;
};
/**
* Sets the pace of the counter. Only affects counter when auto == true.
*
* @param {int} n
* New pace for counter in milliseconds
*/
this.setPace = function(n) {
counter.pace = _isNumber(n) ? n : defaults.pace;
return this;
};
/**
* Sets counter to auto-increment (true) or not (false).
*
* @param {boolean} a
* Should counter auto-increment, true or false
*/
this.setAuto = function(a) {
var sa = typeof a !== "boolean" ? true : a;
if (counter.auto) {
if (!sa) {
if (nextCount) {
_clearNext();
}
counter.auto = false;
}
} else {
if (sa) {
if (nextCount) {
_clearNext();
}
counter.auto = true;
_doCount();
}
}
return this;
};
/**
* Increments counter by one animation based on set 'inc' value.
*/
this.step = function() {
if (!counter.auto) {
_doCount();
}
return this;
};
/**
* Adds a number to the counter value, not affecting the 'inc' or 'pace' of the counter.
*
* @param {int} n
* Number to add to counter value
*/
this.add = function(n) {
if (_isNumber(n)) {
x = counter.value;
counter.value += n;
y = counter.value;
_digitCheck(x, y);
}
return this;
};
/**
* Subtracts a number from the counter value, not affecting the 'inc' or 'pace' of the counter.
*
* @param {int} n
* Number to subtract from counter value
*/
this.subtract = function(n) {
if (_isNumber(n)) {
x = counter.value;
counter.value -= n;
if (counter.value >= 0) {
y = counter.value;
} else {
y = "0";
counter.value = 0;
}
_digitCheck(x, y);
}
return this;
};
/**
* Gets current value of counter.
*/
this.getValue = function() {
return counter.value;
};
/**
* Stops all running increments.
*/
this.stop = function() {
if (nextCount) {
_clearNext();
}
return this;
};
//---------------------------------------------------------------------------//
function _doCount(first) {
var first_run = typeof first === "undefined" ? false : first;
x = counter.value.toFixed(counter.decimals);
if (!first_run) {
counter.value += counter.inc;
}
y = counter.value.toFixed(counter.decimals);
_digitCheck(x, y);
// Do first animation
if (counter.auto === true) {
nextCount = setTimeout(_doCount, counter.pace);
}
}
function _digitCheck(x, y) {
if(counter.decimals) {
x = x.toString().split('.');
y = y.toString().split('.');
decimalsOld = _toArray(x[1]);
decimalsNew = _toArray(y[1]);
digitsOld = _toArray(x[0]);
digitsNew = _toArray(y[0]);
} else {
digitsOld = _toArray(x);
digitsNew = _toArray(y);
}
var ylen = digitsNew.length;
var dlen = 0;
if(counter.decimals) {
ylen += decimalsNew.length;
dlen = decimalsNew.length;
}
for (var i = 0; i < ylen; i++) {
if (i < dlen) {
digitsAnimate[i] = decimalsNew[i] != decimalsOld[i];
} else {
var j = i - dlen;
digitsAnimate[i] = digitsNew[j] != digitsOld[j];
}
}
_drawCounter();
}
// Creates array of digits for easier manipulation
function _toArray(input) {
var output = input.toString().split('').reverse();
if (counter.places > 0 && output.length < counter.places) {
for (var i = output.length; i < counter.places; i++) {
output.push('0');
}
}
return output;
}
// Sets the correct digits on load
function _drawCounter() {
var bit = 1, html = '', dNew, dOld;
var i = 0;
if (counter.decimals) {
for (i = 0; i < counter.decimals; i++) {
dNew = _isNumber(decimalsNew[i]) ? decimalsNew[i] : '';
dOld = _isNumber(decimalsOld[i]) ? decimalsOld[i] : '';
html +=
'<li class="digit" id="'+d+'-digit-a'+i+'">'+
'<div class="line"></div>'+
'<span class="front">'+dNew+'</span>'+
'<span class="back">'+dOld+'</span>'+
'<div class="hinge-wrap"><div class="hinge">'+
'<span class="front">'+dOld+'</span>'+
'<span class="back">'+dNew+'</span>'+
'</div></div>'+
'</li>';
}
html += '<li class="digit-delimiter">.</li>'
}
var count = digitsNew.length;
for (i; i < digitsAnimate.length; i++) {
var j = i - (digitsAnimate.length - digitsNew.length);
dNew = _isNumber(digitsNew[j]) ? digitsNew[j] : '';
dOld = _isNumber(digitsOld[j]) ? digitsOld[j] : '';
html +=
'<li class="digit" id="'+d+'-digit-a'+i+'">'+
'<div class="line"></div>'+
'<span class="front">'+dNew+'</span>'+
'<span class="back">'+dOld+'</span>'+
'<div class="hinge-wrap"><div class="hinge">'+
'<span class="front">'+dOld+'</span>'+
'<span class="back">'+dNew+'</span>'+
'</div></div>'+
'</li>';
if (bit !== count && bit % 3 === 0) {
html += '<li class="digit-delimiter">,</li>';
}
bit++;
}
div.innerHTML = html;
var alen = digitsAnimate.length;
// Need a slight delay before adding the 'animate' class or else animation won't fire on FF
setTimeout(function() {
for (var i = 0; i < alen; i++) {
if (digitsAnimate[i]) {
var a = doc.getElementById(d+'-digit-a'+i);
a.className = a.className+' animate';
}
}
}, 20)
}
// http://stackoverflow.com/questions/18082/validate-numbers-in-javascript-isnumeric/1830844
function _isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function _clearNext() {
clearTimeout(nextCount);
nextCount = null;
}
// Start it up
_doCount(true);
};
看起来不像你在任何地方更新计数器对象的值。
改变
setInterval(pull_visit_count, 30000);
setInterval(function() {
myCounter.setValue(pull_visit_count());
}, 30000);
工作吗?
相关文章：
- JQuery使计数器每次更改时都会增加
- Javascript计数器变量未显示正确的值
- 通过点击按钮翻转缩略图
- IE中的CSS翻转动画:翻转的一面显示镜像内容
- 带有计数器、缩略图、进度条和淡入淡出效果的简单jQuery幻灯片
- 如何在for循环中使用计数器
- 正确使用AES-CTR模式的随机数和计数器
- Javascript猜测游戏-计数器不工作
- IE中的CSS翻转动画:翻转的一面显示镜像内容
- Javascript第二计数器
- Jquery:直到寄存器打开的时间计数器
- CSS3卡翻转动画，检测是否不支持
- 如何使用JavaScript创建时间计数器
- Javascript计数器问题
- 类似按钮增量计数器不工作.PHP，AJAX，MySQL，javascript
- 如何正确制作计数器angularjs
- 可以't实现JavaScript翻转计数器
- Javascript时间计数器与翻转时钟
- css翻转计数器-无法设置正确的速度
- 不能从SQL数据获得翻转计数器动画
