116 lines
3.1 KiB
HTML
116 lines
3.1 KiB
HTML
|
<!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>
|