要引用的index.html页面：（资源来自网络）在pubilc下建一个static文件放入js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数字翻转</title>
<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
name="viewport" />
<style>
body {
min-height: 60vh;
background: #333333;
display: flex;
justify-content: center;
align-items: center;
}
.content {
display: flex;
justify-content: flex-start;
align-items: center;
}
.content-item {
width: 36px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 22px;
font-family: PangMenZhengDao;
font-weight: bold;
color: #12F6FE;
background: rgba(11, 51, 107, 0);
border: 1px solid #00FFF6;
}
.content-item+.content-item {
margin-left: 4px;
}
</style>
<link rel="stylesheet" href="./rollNumber/index.css">
</head>
<body>
<div id="rollNumberList" class="content">
<div class="content-item">0</div>
<div class="content-item">0</div>
<div class="content-item">0</div>
<div class="content-item">0</div>
<div class="content-item">0</div>
<div class="content-item">0</div>
<div class="content-item">0</div>
<div class="content-item">0</div>
</div>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="./rollNumber/index.js"></script>
<script>
let num = 300
let update = $("#rollNumberList").rollNumber({ num })
setInterval(() => {
update(num += Math.floor(Math.random() * (4000 - 3000) + 3000))
}, 3000)
</script>
</body>
</html>vue页面：运行项目打开此路径就可以看到效果了
<template>
<div class="echarts">
<iframe :src="src1" frameborder="0" style="width:100%;height:100vh"></iframe>
</div>
</template>
<script>
export default {
data() {
return {
src1: "/static/index.html",
};
}
};
</script>
<style rel="stylesheet/scss" lang="scss">
.echarts{
position: absolute;
height: 100vh;
width: 100%;
}
</style>
