2019-07-29 02:06:08 +00:00
|
|
|
|
<!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">
|
2019-08-08 02:10:25 +00:00
|
|
|
|
<link rel="stylesheet" href="../../css/common.css">
|
2019-07-29 02:06:08 +00:00
|
|
|
|
<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>
|
2019-08-08 02:10:25 +00:00
|
|
|
|
<body class="ok-body-scroll">
|
2019-07-29 02:06:08 +00:00
|
|
|
|
<div class="ok-body">
|
|
|
|
|
|
<blockquote class="layui-elem-quote">
|
2019-11-07 14:03:03 +00:00
|
|
|
|
<p>让数字动起来 okCountUp</p>
|
2019-07-29 02:06:08 +00:00
|
|
|
|
<p>1. 创建对象</p>
|
|
|
|
|
|
<p>2. 调用对象的start方法执行</p>
|
2019-08-08 02:10:25 +00:00
|
|
|
|
</blockquote>
|
2019-07-29 02:06:08 +00:00
|
|
|
|
<pre lay-title="JavaScript">
|
2019-11-07 14:03:03 +00:00
|
|
|
|
layui.use('okCountUp', function () {
|
|
|
|
|
|
var countUp = layui.okCountUp;
|
2019-07-29 02:06:08 +00:00
|
|
|
|
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">
|
2019-11-07 14:03:03 +00:00
|
|
|
|
layui.use(['code', 'jquery', 'okCountUp'], function () {
|
2019-07-29 02:06:08 +00:00
|
|
|
|
var $ = layui.jquery,
|
2019-11-07 14:03:03 +00:00
|
|
|
|
countUp = layui.okCountUp,
|
2019-07-29 02:06:08 +00:00
|
|
|
|
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>
|
