117 lines
3.2 KiB
HTML
117 lines
3.2 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">
|
||
<link rel="stylesheet" href="../../css/common.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 class="ok-body-scroll">
|
||
<div class="ok-body">
|
||
<blockquote class="layui-elem-quote">
|
||
<p>让数字动起来 okCountUp</p>
|
||
<p>1. 创建对象</p>
|
||
<p>2. 调用对象的start方法执行</p>
|
||
</blockquote>
|
||
<pre lay-title="JavaScript">
|
||
layui.use('okCountUp', function () {
|
||
var countUp = layui.okCountUp;
|
||
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', 'okCountUp'], function () {
|
||
var $ = layui.jquery,
|
||
countUp = layui.okCountUp,
|
||
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>
|