在vue项目的index.html文件引入,最后面粘贴number.js代码
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./number.js"></script>
下面是组件样式和调用代码
<template>
<div class="box0">
<div id="dataNums"></div>
</div>
</template>
<script>
export default {
mounted() {
this.setData();
},
methods: {
setData() {
// eslint-disable-next-line no-undef
$("#dataNums").rollNum({
deVal: "842,858,760"
});
}
}
};
</script>
<style lang="scss">
.box0 {
width: 100%;
height: 100%;
#dataNums {
width: 100%;
height: 65px;
position: relative;
top: -0.5vh;
}
.dataNums {
position: absolute;
display: block;
height: 65px;
text-align: center;
left: 50%;
transform: translateX(-50%);
padding: 0;
}
.dataNums .dataOne {
width: 36px;
height: 50px;
margin: 0px 5px;
text-align: center;
border: 1px solid #00fbff;
font-family: "Arial";
border-radius: 5px;
float: left;
list-style: none;
}
.dataNums .dataBoc {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.dataNums .dataBoc .tt {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.dataNums .dataLine {
position: relative;
margin: 0 !important;
width: 15px !important;
border: 0 !important;
left: -2px !important;
}
.dataNums .dataLine .dataBoc .tt {
height: 30px !important;
line-height: 0px;
top: initial;
bottom: 0px;
color: #fff;
}
.dataNums .tt span {
width: 100%;
height: 100%;
color: #fff;
font-size: 43px;
font-weight: 600;
line-height: 50px;
float: left;
}
@media screen and (max-width: 1320px) {
.dataNums {
height: 120px;
}
.dataNums .dataOne {
width: 70px;
height: 120px;
}
.dataNums .tt span {
font-size: 100px;
line-height: 120px;
}
.dataLine {
line-height: 175px;
}
}
.dataNum1 {
position: absolute;
top: 56%;
width: 20%;
float: left;
/* padding-right: 4%; */
font-size: 36px;
text-align: center;
left: 17%;
}
.dataNum2 {
position: absolute;
top: 56%;
width: 20%;
float: left;
font-size: 36px;
text-align: center;
left: 40%;
}
.dataNum3 {
position: absolute;
top: 56%;
width: 20%;
float: left;
padding-left: 5%;
font-size: 36px;
text-align: center;
left: 60%;
}
.dataIcon {
font-size: 67px;
float: left;
}
}
</style>
使用方式:
<div><Number1></Number1></div>
import Number1from "./number1";
components: { Number1},
number.js代码
// 鏁板瓧婊氬姩
var defaults = {
deVal: 0, // 浼犲叆鍊�
className: "dataNums", // 鏍峰紡鍚嶇О
digit: "" // 榛樿鏄剧ず鍑犱綅鏁板瓧
};
function rollNum(obj, options) {
this.obj = obj;
this.options = $.extend(defaults, options);
this.init = function() {
this.initHtml(obj, defaults);
};
}
rollNum.prototype = {
initHtml: function(obj, options) {
console.log(obj, options.deVal);
var nameDeVal = options.deVal.split("");
var strHtml = '<ul class="' + options.className + ' inrow">';
var valLen = options.digit || (options.deVal + "").length;
if (obj.find("." + options.className).length <= 0) {
for (var i = 0; i < valLen; i++) {
if (nameDeVal[i] == ",") {
strHtml +=
'<li class="dataOne dataLine" style="width:30px;background:none;font-size:69px;"><div class="dataBoc"><div class="tt" t="38" ><em class="num0">,</em></div></div></li>';
}
if (nameDeVal[i] == ".") {
strHtml +=
'<li class="dataOne dataLine" style="width:30px;background:none;font-size:69px;"><div class="dataBoc"><div class="tt" t="38"><em class="num0">.</em></div></div></li>';
}
if (nameDeVal[i] != "," && nameDeVal[i] != ".") {
strHtml +=
'<li class="dataOne "><div class="dataBoc"><div class="tt" t="38"><span class="num0">0</span> <span class="num1">1</span> <span class="num2">2</span> <span class="num3">3</span> <span class="num4">4</span><span class="num5">5</span> <span class="num6">6</span> <span class="num7">7</span> <span class="num8">8</span> <span class="num9">9</span><span class="num0">0</span> <span class="num1">1</span> <span class="num2">2</span> <span class="num3">3</span> <span class="num4">4</span><span class="num5">5</span> <span class="num6">6</span> <span class="num7">7</span> <span class="num8">8</span> <span class="num9">9</span><span class="num10">,</span><span class="num11">.</span></div></div></li>';
}
}
strHtml += "</ul>";
obj.html(strHtml);
}
this.scroNum(obj, options);
},
scroNum: function(obj, options) {
var number = options.deVal;
var $num_item = $(obj)
.find("." + options.className)
.find(".tt");
var h = $(obj)
.find(".dataBoc")
.height();
$num_item.css("transition", "all 2s ease-in-out");
var numberStr = number.toString();
if (numberStr.length <= $num_item.length - 1) {
var tempStr = "";
for (var a = 0; a < $num_item.length - numberStr.length; a++) {
tempStr += "0";
}
numberStr = tempStr + numberStr;
}
var numberArr = numberStr.split("");
$num_item.each(function(i, item) {
setTimeout(function() {
if (numberArr[i] == ",") {
$num_item.eq(i).html(",");
$num_item
.eq(i)
.css({
"font-size": "69px",
background: "none",
transition: "none"
});
}
if (numberArr[i] == ".") {
$num_item
.eq(i)
.html(".")
.css({
"font-size": "69px",
background: "none",
transition: "none"
});
// $num_item.eq(i)
}
if (numberArr[i] != "," && numberArr[i] != ".") {
$num_item
.eq(i)
.css("top", -parseInt(numberArr[i]) * h - h * 10 + "px");
}
}, i * 150);
});
}
};
$.fn.rollNum = function(options) {
var $that = this;
var rollNumObj = new rollNum($that, options);
rollNumObj.init();
};
感谢大家点赞!
网友评论