<style>/* 底部状态栏 */
.fliale {
z
-index
: 1;
border
-top: 0
.02rem solid #e6e6e6;
width
: 100%;
height
: 1
.25rem;
position
: fixed;
bottom
: 0rem;
display
: flex;
flex
-direction
: row;
justify
-content
: space
-around;
align
-items
: center;
}button#NotJob {
width
: 100%;
height
: 100%;
font
-size
: 0
.40rem;
border
: none;
background
-color
: #ffffff;
}
button#GoodJob {
width
: 100%;
height
: 100%;
font
-size
: 0
.40rem;
border
: none;
background
-color
: #ffffff;
}
span
.countJia {
margin: 0
.2rem;
border
-radius
: 3
.05rem;
border
: none;
background
-color
: red;
padding
: 0
.1rem 0
.2rem;
}
span
.countJan {
color
: white;
margin: 0
.2rem;
border
-radius
: 3
.05rem;
border
: none;
background
-color
: #00f300;
padding
: 0
.1rem 0
.2rem;
}
.BtnTR {
z
-index
: 1;
position
: fixed;
bottom
: 1
.85rem;
height
: 1
.5rem;
width
: 4
.1rem;
background
-color
: #008cf3;
border
: none;
color
: white;
font
-size
: 0
.55rem;
border
-radius
: 0
.08rem;
font
-family
: "黑体";
box
-shadow
: 0px 5px 9px 0px #484b5157;
}div#inputs
-Scoll {
top:-0
.3rem;
position
: relative;
overflow
-x
: hidden;
overflow
-y
: scroll;
display
: flex;
height
: 16
.7rem;
width
: 100%;
flex
-direction
: column;
align
-items
: center;
}
.InputDatas {
position
: fixed;
top: 0;
padding
: 0
.25rem 0rem;
display
: flex;
border
-bottom
: 1px solid #aaaaaa;
height
: 1
.12rem;
background
-color
: white;
width
: 100%;
flex
-direction
: row;
align
-items
: center;
justify
-content
: center;
}
.BDSS{
box
-shadow
: 0
.01rem 0
.04rem 0
.1rem #d7d7d7;
font
-size
: 0
.35rem;
border
-radius
: 0
.08rem;
padding
: 0
.25rem;
background
-color
: white;
margin: 0
.05rem 0
.2rem;
}
.BDS_stateWhy {
display
: flex;
align
-items
: center;
}
input
.BDS_decserText {
padding
: 0rem 0rem;
margin: 0rem 0
.15rem;
border
: none;
font
-size
: 0
.35rem;
}
button
.BDS_decserBtn{
color
: #0093ff;
background
-color
: #f0fff200;
font
-size
: 0
.35rem;
border
: none;
width
: 0
.90rem;
}
button
.BDS_decserBtn
:hover{
color
: #bbbbbb;
}
.BDALL{
width
: 100%;
display
: flex;
flex
-direction
: column;
}
input
.AllDatas {
margin-right
: 0
.16rem;
text
-align
: center;
font
-size
: 0
.35rem;
border
-radius
: 0
.08rem;
border
: 0
.02rem solid #989898;
background
-color
: #f7f7f7;
height
: 0
.7rem;
width
: 5
.22rem;
color
: #5f5f5f;
}
.BtnT
:hover {
background
-color
: #0066ff;
}</style><body>
<div class="conter">
</div>
</body><script>let dataJsons = [];
let dataJsonsErr =[
{
"cardid"
: "0422AA12361E90",
"building"
: "B栋",
"floor"
: "1F",
"area"
: "电气室",
"project"
: "风扇1",
"status"
:"OK",
"msg"
:"",
"checkTime"
:"2025
.6
.27
-15
:41
:22"
},
{
"cardid"
: "0423AA12361E90",
"building"
: "B栋",
"floor"
: "1F",
"area"
: "电气室",
"project"
: "风扇2",
"status"
:"OK",
"msg"
:"",
"checkTime"
:"2025
.6
.25
-17
:21
:32"
},
{
"cardid"
: "0424AA12361E90",
"building"
: "B栋",
"floor"
: "2F",
"area"
: "电气室",
"project"
: "风扇3",
"status"
:"NG",
"msg"
:"异常报错2",
"checkTime"
:"2025
.6
.24
-10
:11
:08"
},{
"cardid"
: "0425AA12361E90",
"building"
: "B栋",
"floor"
: "1F",
"area"
: "电气室",
"project"
: "风扇13",
"status"
:"OK",
"msg"
:"",
"checkTime"
:"2025
.6
.25
-17
:21
:32"
},
{
"cardid"
: "0426AA12361E90",
"building"
: "B栋",
"floor"
: "2F",
"area"
: "电气室",
"project"
: "风扇12",
"status"
:"NG",
"msg"
:"异常报错2",
"checkTime"
:"2025
.6
.24
-10
:11
:08"
},
{
"cardid"
: "0424AA12361E90",
"building"
: "B栋",
"floor"
: "2F",
"area"
: "电气室",
"project"
: "风扇3",
"status"
:"NG",
"msg"
:"异常报错2",
"checkTime"
:"2025
.6
.24
-10
:11
:08"
}];
$("
.conter")
.append(
'<div class="fliale">'+
'<button type="button" id="NotJob">'+'未完成'+'<span class="countJia">'+ dataJsons
.length +'</span>'+'</button>'+
'<button type="button" id="GoodJob">'+'已完成'+'<span class="countJan">'+ dataJsonsErr
.length +'</span>'+'</button>'+
'</div>');
$("
.conter")
.append(
'<div class="InputDatas">'+
'<input class="AllDatas" id="searchInput" type="text" placeholder="输入搜索内容" value="" />'+
'<span id="resultCount">'+'</span>'+
'</div>'+
'<div class="u4Scoll" id="inputs
-Scoll">'+
'<div class="BDALL">'+
'</div>'+
'</div> ');
$("body")
.append('<button class="BtnTR">'+'提交任务'+'</button>');
$("
.BtnTR")
.click(function
(){
//其他代码不用管
})
$.each(dataJsonsErr,function(index, item){
if(item
.status == "OK"){
$("
.BDALL")
.append(
'<div class="BDSS">'+
'<div class="BDS_state" data
-Text="正常">'+'</div>'+
'<div class="BDS_stateA">'+
'<P class="BDS_ID">'+'ID
:'+ item
.cardid +'</P>'+
'<P class="BDS_time">'+'时间
:'+item
.checkTime+'</P>'+
'<div class="BDS_stateWhy">'+
'<P class="BDS_decser">'+'备注
:'+'</P>'+
'<p class="BDS_decserTexts" >'+ "无" +'</P>'+
'</div>'+
'</div>'+
'</div>');
}else if(item
.status == "NG"){
$("
.BDALL")
.append(
'<div class="BDSS">'+
'<div class="BDS_states" data
-Text="异常">'+'</div>'+
'<div class="BDS_stateA">'+
'<P class="BDS_ID">'+'ID
:'+ item
.cardid +'</P>'+
'<P class="BDS_time">'+'时间
:'+item
.checkTime+'</P>'+
'<div class="BDS_stateWhy">'+
'<P class="BDS_decser">'+'备注
:'+'</P>'+
'<p class="BDS_decserTexts" >'+ item
.msg +'</P>'+
'</div>'+
'</div>'+
'</div>');
}
});
//关键词搜索
// 实时搜索功能
$('#searchInput')
.on('input', function
() {
const keyword =
$(this)
.val
().trim
();
const
$pTags =
$('
.BDSS p');
let matchCount = 0;
let firstMatch = null;
// 清除之前的高亮
$pTags
.removeClass('highlight');
$pTags
.find('span
.highlight')
.each(function
() {
$(this)
.replaceWith(
$(this)
.text
());
});
if (keyword
.length > 0) {
// 遍历所有p标签
$pTags
.each(function
() {
const
$p =
$(this);
const text =
$p
.text
();
const regex = new RegExp(keyword, 'gi');
if (regex
.test(text)) {
matchCount++;
// 标记第一个匹配项
if (!firstMatch) firstMatch = this;
// 高亮显示关键词
const highlighted = text
.replace(regex,
match => `<span class="highlight">
${match}</span>`
);
$p
.html(highlighted);
}
});
// 显示匹配数量
$('#resultCount')
.text(`找到
${matchCount} 个结果`);
// 滚动到第一个匹配项
if (firstMatch) {
$('
.BDALL')
.animate({
scroll
Top: $(firstMatch)
.offset().top - $('
.BDALL')
.offset().top +
$('
.BDALL')
.scroll
Top() - 20
}, 500);
}
} else {
$('#resultCount')
.text('');
// 恢复原始文本
$pTags
.each(function
() {
$(this)
.text(
$(this)
.text
());
});
}
});</script>，想实现u4Scoll根据fliale所在的位置高度作为u4Scoll的盒子高度，BDALL里面新增的数据一旦超过u4Scoll盒子高度就开始overflow
-y触发。由于在不同屏幕上fliale所在的位置高度也不一样，所以得让u4Scoll盒子的高度跟fliale所在的位置高度同步才行。怎么实现这个功能(这个代码实现地方是不同类型的android手机的移动端的屏幕)
本文介绍了一种使用JavaScript来获取指定ID的元素在其页面中的高度的方法。通过选择器选取元素并利用.offset().top属性来实现。
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
