Javascript 无法从SQL数据获取翻转计数器以设置动画
我目前正在一个网页中实现一个翻转计数器。我已经配置了总体布局和所有内容，当我加载页面时，会立即显示初始的实时sqlserver数据。我试图创建一个无限循环，调用一个函数重新连接到数据库，获取我想要的数字数据，并重新激活翻转计数器以反映更新的数字。似乎我可以重新调用该函数，但计数器从未使用新的数字重新激活Javascript 无法从SQL数据获取翻转计数器以设置动画,javascript,html,css,adodb,Javascript,Html,Css,Adodb,我目前正在一个网页中实现一个翻转计数器。我已经配置了总体布局和所有内容，当我加载页面时，会立即显示初始的实时sqlserver数据。我试图创建一个无限循环，调用一个函数重新连接到数据库，获取我想要的数字数据，并重新激活翻转计数器以反映更新的数字。似乎我可以重新调用该函数，但计数器从未使用新的数字重新激活 <!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="utf
<!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>
标题
html{
背景：url（images/1_1_1.jpg）无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
标题
$（函数（）{
//var myCounter=new flipCounter（'myCounter'，{value:1000，inc:123，pace:1000，auto:true}）；
var myCounter=new flipCounter（'myCounter'，{value:pull\u visit\u count（），inc:0，pace:0，auto:false}）；
设置间隔（拉动访问次数，30000）；
函数pull\u visit\u count（）{
var connection=newactivexobject（“ADODB.connection”）；
var connectionstring=（“数据源=；初始目录=；用户ID=；密码=；提供程序=”）；
连接。打开（连接字符串）；
var rs=新的ActiveXObject（“ADODB.Recordset”）；
rs.Open（“从表中选择计数（*），连接）；
先走一步
而（！rs.eof）{
var cnt=parseInt（rs.fields（0））；
下一步；
}
rs.close；
连接。关闭；
返回cnt；
}
});
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);
};
var flipCounter=函数（d，选项）{
//默认值
var默认值={
值：0，
公司名称：1，
速度：1000，
是的，
小数：0，
地点：0
};
变量计数器=选项| |{}；
var doc=window.doc；
对于（var选择加入默认值）{
计数器[opt]=计数器.hasOwnProperty（opt）？计数器[opt]：默认值[opt]；
}
var digitsOld=[]、digitsNew=[]、decimalsell=[]、decimalsNew=[]、digitsAnimate=[]、x、y、nextCount=null；
var-div=d；
如果（类型d=='string'）{
div=doc.getElementById（d）；
}
/**
*设置计数器的值，并将数字设置为新值。
*
*示例：myCounter.setValue（500）；将计数器的值设置为500，
*不管它以前是什么价值。
*
*@param{int}n
*新计数器值
*/
this.setValue=函数（n）{
如果（_isNumber（n））{
x=计数器值；
y=计数器。数值=n；
_digitCheck（x，y）；
}
归还这个；
};
/**
*设置计数器的增量。不设置数字动画。
*/
this.setIncrement=函数（n）{
counter.inc=_isNumber（n）？n:defaults.inc；
归还这个；
};
/**
*设置计数器的速度。仅当auto==true时影响计数器。
*
*@param{int}n
*计数器的新速度（毫秒）
*/
this.setspace=函数（n）{
counter.pace=_isNumber（n）？n:defaults.pace；
归还这个；
};
/**
*将计数器设置为自动递增（true）或非自动递增（false）。
*
*@param{boolean}a
*应计数器自动递增，true或false
*/
this.setAuto=函数（a）{
var sa=a的类型！=“布尔”？真：a；
如果（计数器自动）{
如果（！sa）{
if（nextCount）{
_clearNext（）；
}
counter.auto=false；
}
}否则{
如果（sa）{
if（nextCount）{
_clearNext（）；
}
counter.auto=true；
_doCount（）；
}
}
归还这个；
};
/**
*根据设置的“inc”值将计数器增加一个动画。
*/
this.step=函数（）{
如果（！counter.auto）{
_doCount（）；
}
归还这个；
};
/**
*向计数器值添加一个数字，不影响计数器的“inc”或“pace”。
*
*@param{int}n
*要添加到计数器值的数字
*/
this.add=函数（n）{
如果（_isNumber（n））{
x=计数器值；
计数器值+=n；
y=计数器值；
_digitCheck（x，y）；
}
归还这个；
};
/**
*从计数器值中减去一个数字，不影响计数器的“inc”或“pace”。
*
*@param{int}n
*要从计数器值中减去的数字
*/
此函数为。减法=函数（n）{
如果（_isNumber（n））{
x=计数器值；
计数器值-=n；
如果（计数器值>=0）{
y=计数器值；
}否则{
y=“0”；
counter.value=0；
}
_digitCheck（x，y）；
}
归还这个；
};
/**
*获取计数器的当前值。
*/
this.getValue=函数（）{
返回计数器值；
};
/**
*停止所有运行增量。
*/
this.stop=函数（）{
if（nextCount）{
_clearNext（）；
}
归还这个；
};
//---------------------------------------------------------------------------//
函数_doCount（第一个）{
var优先_
setInterval(pull_visit_count, 30000);
setInterval(function() {
myCounter.setValue(pull_visit_count());
}, 30000);