js如何实现数字滚动效果

JavaScript06

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>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="js/jquery-3.2.0.min.js"></script>

</head>

<body>

<p>初始值是0，点击按钮让其增加到10然后停止</p>

<span>0</span>

<button>开始</button>

<script>

$(function(){

$("button").click(function(event) {

var num = 0

// 调用计时函数

var t = setTimeout(timedCount(num),1000)

$("button").attr('disabled','disabled')

})

// 循环计时函数, 多次调用自身函数, num为被传递的参数

function timedCount(num){

num++

$("span").text(num)

// 设置条件使停止计时

if (num<10) {

var t = setTimeout(function(){timedCount(num)},1000)

}

}

})

</script>

</body>

</html>