Case 1: Do not move the header of the table and scroll the content
method one:
//设置路段状态的自动滚动功能
window.addEventListener('load', function () {
function rollingDiv() {
let i = 0;
var moveScoll = function () {
i++;
// 临界点的判断
//$("#tab_xy1 tr").length 是table中的tr即行 的行数
if (i > (($("#tab_xy1 tr").length) - 5) * 50) {
i = 0;
}
//console.log("move" + i);
$("#rollingDiv").scrollTop(i);
};
var timer = setInterval(moveScoll, 50);
// 鼠标移入到rollingDiv，清定时器
$("#rollingDiv").mouseenter(function () {
clearInterval(timer);
});
// 鼠标移出，重新开启定时器
$("#rollingDiv").mouseleave(function () {
timer = setInterval(moveScoll, 50);
});
}
rollingDiv();
});
//内容的div
<div class="tab-body" id="rollingDiv">
<table id="tab_xy1">Method Two:
rollingDiv() {
setInterval(_ => {
//自定义滚动 出勤率
if (
this.activeIndex <
(this.roadStatusData.length) /* this.towerListArr.length */
) {
this.activeIndex += 1;
} else {
this.activeIndex = 0;
}
}, 1500);
},Method three:
var area=document.getElementById("roadBody");
area.innerHTML+=area.innerHTML;
area.scrollTop=0;
// eslint-disable-next-line no-unused-vars
var liHeight=24;
var delay=2000;
// eslint-disable-next-line no-unused-vars
var speed=50;
// eslint-disable-next-line no-unused-vars
var time;
function starMove(){
area.scrollTop++;
time=setInterval("scrollUp()",speed);
}
function scrollUp(){
if(area.scrollTop%liHeight==0){
clearInterval(time);
setTimeout("starMove()",delay);
}else{
area.scrollTop++;
if(area.scrollTop>=area.offsetHeight/2){
area.scrollTop=0;
}
}
}
setTimeout("starMove()",delay);<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>www.jb51.net - 间歇循环滚动</title>
<style>
#box{
height:240px;
width:300px;
margin:0 auto;
border:1px solid #0066FF;
overflow:hidden;
padding-bottom:20px;
}
#box li{
color:#333;
height:24px;
}
#box ul{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div id="box">
<ul id="con1">
<li>Java大数据社区1</li>
<li>Java大数据社区2</li>
<li>Java大数据社区3</li>
<li>Java大数据社区4</li>
<li>Java大数据社区5</li>
<li>Java大数据社区6</li>
<li>Java大数据社区7</li>
<li>Java大数据社区8</li>
<li>Java大数据社区9</li>
</ul>
</div>
<script>
var area=document.getElementById("box");
area.innerHTML+=area.innerHTML;
var liHeight=24;
area.scrollTop=0;
var delay=2000;
var speed=50;
var time;
function starMove(){
area.scrollTop++;
time=setInterval("scrollUp()",speed);
}
function scrollUp(){
if(area.scrollTop%liHeight==0){
clearInterval(time);
setTimeout("starMove()",delay);
}else{
area.scrollTop++;
if(area.scrollTop>=area.offsetHeight/2){
area.scrollTop=0;
}
}
}
setTimeout("starMove()",delay);
</script>
</body>
</html>
Retrieved from http://www.uxys.com/html/JavaScript/20200213/49449.html
Case 2: Complete the search function, and there will be hints while typing
<form action="#" method="post" class="search_form">
<!--1.searchString 模型与文本域创建绑定-->
<input type="search" class="input_text" placeholder="陕 L78343" style="color: rgb(233, 241, 243);" v-model="searchString" @mouseover="toDefineNum()"
@mouseleave="toDefineNum()">
<!-- <button type="search" id="search_button">-->
<img src="@/assets/images/search.png" alt="搜索">
<!-- </button>-->
</form>computed: {
// 计算数学，匹配搜索
filteredArticles: function () {
console.log("helloXy")
var articles_array = this.carStatusData,
searchString = this.searchString;
// 为空时
if(!searchString){
return articles_array;
}
searchString = searchString.trim().toLowerCase();
console.log("searchString是" + searchString)
articles_array = articles_array.filter(function (item) {
console.log("过滤")
if (item.carNum.toLowerCase().indexOf(searchString) !== -1) {
console.log("item:"+item)
return item;
}
})
console.log(" articles_array: "+articles_array)
return articles_array;
}
},
Case 3: Complete string cutting with / as separator
this.departmentArr = this.department.split('/');Testing department/Western Power becomes a testing department
attrid=attrid.substring(0,attrid.length-1);
attrArr=attrid.split('/');
attrLength=self.getJsonLength(self.goods.attr_info);
substring（开始位置，结束位置） 字符串截取
split(分隔符) 把字符串转化成数组
getJsonLength（数组） 得到长度
Case three continued: After completing the acquisition of data, and then display them separately, if there are child elements, display the child elements
1. First get the current department and sub-department stored in the array, and remove the duplicate information in the array
2. When the parent department is selected, the selection box of the child department is displayed, select, and then display the lower selection box (practice: set the child department to hide, when the value of the parent department changes and it is a general parenteral gastrointestinal ward, A function will be triggered. This function will then set the flag to 1 according to the value of the parent department, and determine whether the flag is 1 to display or hide in the child department, but the child department of the child department involves whether there is a child department below, this is temporarily not judged. So it will be done tomorrow)
(Wrong requirements, so some functions are not needed, just judge whether there is a lower-level menu, display if there is, if there is no selector for sub-department; update the page according to the selector content)
Delete the same information
// 去除相同元素
delSameThing(arr) {
for (var i = 0; i < arr.length - 1; i++) { // 遍历获取“前一个元素”，最后一个数不用获取，它本身已经被前面所有元素给排除过了
for (var j = i + 1; j < arr.length; j++) { // 遍历获取剩下的元素，“后一个元素”的起始索引就是“前一个元素”的索引+1
if (arr[i] === arr[j]) { // 如果“前一个元素”与后面剩下的元素之一相同，那么就要删除后面的这个元素
arr.splice(j, 1);
j--; // 如果删除了这个元素，那么后面的元素索引值就会发生改变，所以这里的j需要-1
}
}
}
return arr;
},If you write a function yourself, you need this to call; you don’t need to import it from outside
Total modified code
<div class="total-calendar">
<div class="CalenderRoster-department-title">
<h3>部门：</h3>
</div>
<el-select class="department-select0" v-model="value1" placeholder="请选择" @change="showSelect()" style="display: block" clearable>
<el-option
:key="department"
:value="department">
</el-option>
</el-select>
<el-select class="department-select1" v-model="value2" placeholder="请选择" :style="this.select1 === 1? 'display: block':'display: none'" @change="showSelect2()" clearable>
<el-option
v-for="item in departmentArr"
:key="item"
:value="item">
</el-option>
</el-select>
<el-select class="department-select2" v-model="value3" placeholder="请选择" :style="this.select2 === 1? 'display: block':'display: none'" clearable>
<el-option
v-for="some in departmentSubArr"
:key="some"
:value="some">
</el-option>
</el-select>
</div>data: function() {
return {
// 当前用户的部门
department: '',
// 部门根据 / 分开后的字符串
departmentArr: [],
// 子部门的字符串
departmentSubArr: [],
// 部门选择器的value值
value1: '',
value2: '',
value3: '',
select1: 0,
select2: 0,
departmentAction() {
this.departmentArr = null;
this.departmentSubArr = null;
// 获取当前用户部门
getList(1, 100).then(res => {
const departments = res.data.data.records;
console.log(res.data.data.records);
let j = 0;
let k = 0;
for (let i = 0, len = departments.length; i < len; i++) {
// 这个if是判断当前一级部门的名称
if (departments[i].id === this.userinfo.departmentId) {
this.department = departments[i].departmentName;
console.log("输出当前部门=" + this.department)
}
// 这个if是判断二级部门的名称
if (departments[i].parentId === this.userinfo.departmentId) {
// 如果部门中有子部门，将department数据拆分,并且存入数组中
this.departmentArr[j++] = departments[i].departmentName;
console.log("输出当前子部门=" + this.departmentArr)
}
// 这个if是判断三级部门的
if (this.departmentArr !== null){
for (let p = 0; p < this.departmentArr.length; p++) {
if (departments[i].parentId === this.departmentArr[p].id) {
this.departmentSubArr[k++] = departments[i].departmentName;
console.log("输出当前子部门::=" + this.departmentArr)
}
}
}
}
})
},
showSelect() {
if (this.departmentArr !== null) {
this.select1 = 1;
} else {
this.select1 = 0;
}
},
showSelect2() {
if (this.departmentSubArr !== null) {
this.select2 = 1;
} else {
this.select2 = 0;
}
}