[html]代码库
<!DOCTYPE html>
<--源码仅供学习交流,请勿用于商业用途-->
<--制作:baipiaozhe-->
<--发布网站:www.yuncode.net-->
<head>
<meta charset="UTF-8">
<title>numboard</title>
<link rel="stylesheet" href="lib/style/scrollboard.css">
<script src="lib/scripts/jquery-1.10.2.js"></script>
<script src="lib/scripts/scrollboard.js"></script>
<script src="lib/scripts/countboard.js"></script>
</head>
<body>
<div class="container">
<div style="padding-top: 5em;">
<div style="color: white;text-align: center;">含小数</div>
<div class="number-box numberRun1"></div>
</div>
<div style="padding-top: 5em;">
<div style="color: white;text-align: center;">不含小数</div>
<div class="number-box numberRun2"></div>
</div>
<div style="padding-top: 5em;">
<div style="color: white;text-align: center;">另外一种滚动效果</div>
<div class="number-box" id="countRun"></div>
</div>
</div>
<script>
$(function(){
//翻页效果
setNumberRun1();
let stationTimer = setInterval(() => {
setNumberRun1();
}, 3000 * 10);
//翻页效果
var numRun = $(".numberRun2").numberAnimate({
num: 4532,
dot: 0,
speed: 2000,
});
$("#countRun").rollNum({
deVal:"3251.05"
});
})
function setNumberRun1(){
var numRun = $(".numberRun1").numberAnimate({
num: 1236,
dot: 2,
speed: 2000,
});
}
</script>
<div style="text-align:center;margin:1px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>
[代码运行效果截图]
[源代码打包下载]
中级程序员
by: 我爱写代码 发表于:2022-06-18 15:36:58 顶(0) | 踩(0) 回复
积分
回复评论