JS--文章置顶功能

其实写法很简单Js基础好的很快就知道怎么写了，我之前没过今天写了个demo就顺便记录一下，以便记忆，俗话说：好记性不如烂笔头嘛！

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>文章置顶demo</title><script src="jquery.min.js"></script>
</head><body>
// width: calc(50% - 10rpx);双排适配神器<button class="btn">点击</button><ul class="box"></ul><script>//创建数组var arr = [{ name: "冯一", age: 17 },{ name: "王二", age: 18 },{ name: "张三", age: 19 },{ name: "李四", age: 20 }];console.log(arr)//循环arr数组for (i in arr) {// 使用模板字符串append到box里面$('.box').append(`<li><span>${arr[i].name}</span><span>${arr[i].age}</span><button onclick="btnf(${i})" data-index="${i}">置顶</button></li>`)}//点击事件function btnf(i) {arr.unshift(arr[i]);//加入头一个数组里面arr = Array.from(new Set(arr));//数组去重console.log(arr)$('.box').html('');//清空页面原来的数据for (i in arr) {$('.box').append(`<li><span>${arr[i].name}</span><span>${arr[i].age}</span><button onclick="btnf(${i})" data-index="${i}">置顶</button></li>`)}}</script>
</body>
</html>

JS--文章置顶功能相关推荐

php置顶文章,php实现文章置顶功能的方法
本文实例讲述了php实现文章置顶功能的方法.分享给大家供大家参考,具体如下: 昨天客户让做文章置顶的功能.自己以前没做过.靠着同事的指点才做了出来.本来挺简单的事情,被自己搞了好久.自己真的缺乏对程序 ...
hexo博客文章置顶功能实现的两种方法
写在前面本文主要描述了如何实现hexo文章置顶功能,讲述了通过修改源码和通过更改插件两种方式实现,以及如何添加置顶显示.文章可能还有很多不足,请大家谅解,欢迎大佬提意见. 本文使用的东西 win10 ...
【Hexo搭建个人博客】（十三）Next主题中添加首页文章置顶功能及置顶图标
1. 安装插件 npm uninstall hexo-generator-index --save npm install hexo-generator-index-pin-top --save 如果 ...
博客文章的置顶功能『博客帮助』
已经有不止一个博友不止一次地呼吁:我想要文章置顶功能!好,这不就来了嘛. 文章置顶有什么好处呢?可以将你有代表性的博文,或者你的最得意之作,或者你最想让你的读者第一眼看到的文章,推到你博客文章的顶部. ...
Blog外挂之：文章置顶
Blog外挂之:文章置顶 By 刘未鹏(pongba) C++的罗浮宫(http://blog.csdn.net/pongba) 许多朋友想要文章置顶的功能.比如博客园的这个样子: 图片截自爆牙齿的b ...
php置顶功能代码,jquery实现页面置顶功能代码
//获取页面的最小高度,无传入值则默认为600像素 min_height ? min_height = min_height : min_height = 600; //为窗口的scroll事件绑定处 ...
帖子置顶原理 php,自定义织梦cms文章置顶及其功能原理分析
本人在织梦dedecms本发分类信息发布系统那个功能的时候,因为,用到置顶功能,这是很多分类信息系统最很重要的特色,所以,对这个作了一个织梦dedecms系统的研究,以前用织梦dedecms系统建站, ...
Js原生实现置顶功能
置顶功能: 一般常见于移动端.当我们浏览某页面时,向下滑动距离顶部有一定距离时,会出现一个按钮,点击这个按钮,会平滑的回滚到顶部. 1.首先准备几个容器 <body><div cla ...
html评论置顶功能,微信公众号精选留言评论怎么置顶显示？功能在哪里设置？...
微信公众号精选留言怎么置顶?微信公众号留言功能新增了置顶精选留言的设置,那么微信公众号留言功能在哪里设置呢?下文小乐哥给大家介绍一下! 微信公众号精选留言怎么置顶? 微信公众平台悄然上线了一个新功能, ...
wordpress如何设置文章置顶以及区分置顶文章与普通文章
很多博客都有自己的置顶文章,在默认情况下WP对置顶文章只是将它们的位置排在前面,除了位置差异外,跟其他文章是没有任何区别的.那我们怎样才能将它们区别开来呢?我这里有几种方法: 一.在WordPres ...

JS--文章置顶功能

JS--文章置顶功能相关推荐

最新文章

热门文章