js如何实现数字滚动效果

JavaScript024

js如何实现数字滚动效果,第1张

jquery实现立体式数字滚动条增加效果，代码分为两部分，一部分位html结构另一部分属于js代码段，需要的朋友参考下吧！

1、html结构

<div class="numberRun1"></div>

2、js

<script type="text/javascript" src="js/digital_over.js" ></script>//引用 //这是自定义函数（需要在页面中进行调用） <script> //数字滚动function digitalScroll(obj,n){ var numRun = $(obj).numberAnimate({num:n, speed:2000, symbol:","}) var nums = n setInterval(function(){numRun.resetData(nums) },3000) var numWidth= $(obj).width() $(obj).find('.mt-number-animate').css('width',numWidth) $(obj).css('width','100%') $(obj).find('.mt-number-animate').css('margin','0 auto') }window.indexdigitalScroll=function(){ digitalScroll($('.numberRun1'),1160518) } </script> <!--这是在页面中调用的方法--> <script> $(function(){ indexdigitalScroll() }) </script>

3、图片案例

我又来了~~~~~~~~这个问题很简单嘛！哈哈！！！

一个例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>一个例子</title>

<script type="text/javascript">

var t = 1000//在这里设置刷新时间，单位是毫秒，比如1秒钟就是1000

var min = 200//生成的最小的数字，比如200

var max = 500//生成的最大的数字，比如500

var ctl_id = "show"//要在哪个控件中显示，比如例子中的"show"

onload = function() {

Refresh()

setInterval("Refresh()", t)

}

function Refresh() {

document.getElementById(ctl_id).innerHTML = parseInt(Math.random() * (max - min + 1) + min)

}

</script>

</head>

<body>

<div id="show"></div>

</body>

</html>

//做个计时器就可以了

var i=1

var s=setInterval(fun,1000)//开始即时

fhtml(i)//初始化一个

function fun(){

    i++

    if(i>10){

        clearInterval(s)return false

    }

    fhtml(i)

}

function fhtml(n){

    $('div').html(n+'/10')

}

这有些前端jquer效果  可以参考下erlo.vip