root
/
ok-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add: countUp library

master
zhizou 2019-07-29 09:57:57 +08:00
parent dbd85b04b1
commit a260b190fc
1 changed files with 115 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
pages/tripartite/countup.html Normal file
View File

@ -0,0 +1,115 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>让数字动起来</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../lib/layui/css/layui.css">
<style>
.ok-body {
padding: 20px;
}
blockquote {
font-size: 16px;
}
.b1 {
border: 1px solid #EAEBF0;
}
.layui-card-header {
font-size: 16px;
}
.layui-card-body {
font-size: 20px;
}
</style>
</head>
<body>
<div class="ok-body">
<blockquote class="layui-elem-quote">
<p>让数字动起来 countUp</p>
<p>1. 创建对象</p>
<p>2. 调用对象的start方法执行</p>
</blockquote>
<pre lay-title="JavaScript">
layui.use('countUp', function () {
var countUp = layui.countUp;
var count_up = new countUp({
target: $('#countUp1'),
startVal:5, //目标开始的值，默认值为0
endVal: 1000, //到达目标值,默认值为元素的值
decimals:2, //小数位数，默认值为0
duration: 5, //动画持续时间为秒，默认值为2
});
count_up.start();
});
</pre>
<div class="layui-row layui-col-space15">
<div class="layui-col-md3">
<div class="layui-card b1">
<div class="layui-card-header">最简单的例子</div>
<div class="layui-card-body">
<div id="countUp1"></div>
</div>
</div>
</div>
<div class="layui-col-md3">
<div class="layui-card b1">
<div class="layui-card-header">指定延时动画</div>
<div class="layui-card-body">
<div id="countUp2"></div>
</div>
</div>
</div>
<div class="layui-col-md3">
<div class="layui-card b1">
<div class="layui-card-header">指定小数位数</div>
<div class="layui-card-body">
<div id="countUp3"></div>
</div>
</div>
</div>
<div class="layui-col-md3">
<div class="layui-card b1">
<div class="layui-card-header">随机数字</div>
<div class="layui-card-body">
<div id="countUp4"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="../../lib/layui/layui.js"></script>
<script type="text/javascript">
layui.use(['code', 'jquery', 'countUp'], function () {
var $ = layui.jquery,
countUp = layui.countUp,
code = layui.code;
code({
elem: 'pre'
});
new countUp({
target: $('#countUp1'),
endVal: 1000,
}).start();
new countUp({
target: $('#countUp2'),
duration: 5,//动画的持续时间为5秒默认为2秒
endVal: 2000,
}).start();
new countUp({
target: $('#countUp3'),
decimals: 2,//小数位数
endVal: 3000,
}).start();
new countUp({
target: $('#countUp4'),
duration: 8,
decimals: 2,
endVal: (Math.random() * 1900 + 100),
}).start();
});
</script>