请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
<style>
.box { margin: 20px auto; width: 80%; }
.items { padding: 4px 8px; }
.items:hover { background: #aaa; }
.invisibled { display: none; }
</style>
<div class="box">
<label for="searchInput">搜索</label>
<input type="text" id="searchInput" />
</div>
<div id="articleList" class="box"></div>
<script>
const articleList = document.querySelector('#articleList');
const searchInput = document.getElementById('searchInput');
// 字符来源
const str = `ABCD中国园林是由建筑、山水、花木等组合而成的一个oo综合艺术品，147富有诗情画意。Mi叠山理水要造成“虽由人作，宛自天开”的境界。山与la水的关系究竟如何呢？abcd简言之，模山范水，用局部之la景而非缩小(网师园水池仿虎丘白莲池，极妙)，ok处理原则悉符画本。OK山贵有脉，水OO贵有源，脉源贯通，全园生动。xyz我曾经用“水随山转，山因水活”B&B与“溪水因山成曲折，山蹊随地作低mi平”来说La明山水之pink间的关系，也就是369从真山真水中所得到的启示。Let明末清初叠山家张南垣主张用平冈小陂、Pink陵阜陂阪，也就是要使园林山水la接近自然。如果我们Mi能初步理解这个道理，就b&b不至于离自然太远，XYZ多少能呈现水Mi石交融的美妙境界。`;
//文档片段
const fragment = new DocumentFragment();
//随机生成30个div并赋予其随机文本
for (let x = 0; x < 30; x ++) {
const start = Math.floor(str.length / 2);
const a = Math.floor(Math.random() * start);
const b = a + Math.ceil(Math.random() * 20);
const output = str.substring(a, b);
const div = document.createElement('div');
div.classList.add('items');
div.textContent = (x + 1) + '. ' + output;
fragment.appendChild(div); //加入到文档片段
}
articleList.appendChild(fragment); //加入到文章列表
const searchArticles = () => {
const divs = document.querySelectorAll('.items');
const keyword = searchInput.value;
//清除隐藏CSS类
divs.forEach(div => div.classList.remove('invisibled'));
//隐藏不包含关键字的div
for (let j = 0; j < divs.length; j++) {
if (divs[j].textContent.indexOf(searchInput.value) === -1) {
divs[j].classList.add('invisibled');
}
}
};
//关键字文本框输入时
searchInput.oninput = () => searchArticles();
</script>
| 
发表于 2025-9-22 13:03
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2025-9-22 14:43
