【JavaScript&JQuery】原生API实现li标签随机排列

最新推荐文章于 2023-02-23 22:55:58 发布
最新推荐文章于 2023-02-23 22:55:58 发布
阅读量1.3k 收藏 1
点赞数 1
分类专栏： JavaScript&JQuery 文章标签： javascript JQuery 源码 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/o0darknessyy0o/article/details/52298746
版权
本文分享了一种使用JavaScript原生API实现li标签随机排列的方法。作者在项目中发现现有插件和源码不适用，因此自创了一个简洁的解决方案。代码注释清晰，思路简单，通过循环随机选取并删除数组元素来达到随机排列的效果。文章还提供了完全封装的方法，并邀请读者交流改进意见。
摘要由CSDN通过智能技术生成

标题图片

       最近在给我母后做一个项目，需要到随机排列li元素，看了网上好多插件还有好多源码，感觉有点儿复杂，而且和我项目并不是很友好，不方便嫁接过来，于是就自己写了一个方法，看上去还不错，就放出来分享一下。

       内容很短，而且暂时没有封装，其实封装也很简单的，但是我这儿直接写直接用的。。。就用的不是封装的套路了，废话不多说，直接代码贴起！

下面是html内容：

<div class='productsBox'>
    <ul class='products'>
        <li id='item_1'>列表1&l
最低0.47元/天 解锁文章
o0DarkNessYY0o
关注
专栏目录
div中随机展示个性化标签（jQuery实现）
11-08
jQuery实现的，在指定div中随机显示N个性化标签。自测有效
基于JQuery和原生JavaScript实现网页定位导航特效
10-20
本文将探讨如何使用jQuery和原生JavaScript实现这种效果。首先，我们来看一下代码结构。 HTML部分定义了一个固定位置的菜单(#menu)，包含了链接到页面不同区域的列表项。每个列表项的`<a>`标签都带有`href`属性，该...
li标签随机排序
weixin_34269583的博客
10-31 349
121 转载于:https://www.cnblogs.com/liuqingxia/p/7762074.html
jQuery – 随机排列 item
weixin_34061555的博客
07-29 219
有个项目需要用到随机排列按钮，写完顺便记录下 snippet。需求大概就是一堆按钮然后随机显示就行了，还是较简单的。 先看 Demo，再贴下 js 代码： /* @author: Alan Ouyang  * @param: {Object} args include: *parentId{String}  * @description: 随机显示 items  * ----------...
使用原生js和jquery 对 ul 中的li进行随机排序
cysear的专栏
06-23 1388
使用原生js和jquery 对 ul 中的li进行随机排序 var ulEle = document.getElementById("foo"); var liList = ulEle.getElementsByTagName("li"); var leng = liList.length; var lis = Array.prototype.slice.call(liList, 0); var idx =
js实现li排序
Q_004的博客
08-20 3827
js实现li排序li开头为数字
js与jquery分别实现tab标签页功能的方法
10-21
在本节中，我们将详细介绍如何使用原生JavaScript（简称JS）和jQuery库分别实现Tab标签页功能。这两种方法各有所长，但都能有效地创建页面上的交互式标签切换效果。 首先，我们需要准备HTML结构和CSS样式。标签页...
div中随机显示个性标签
南有乔木的博客
09-11 2254
参考网上的代码，自己封装了js。实现后效果如图： 刷新后，标签颜色和位置会变化。JS代码如下： /**** * 在div中随机展示tag元素 * * 参数 * boxWidth：div盒子宽度 * boxHeight：div盒子高度 * tagWidth：tagDiv宽度 * tagHeight：tagDiv高度 * tagObjs：tagDiv内容 * tagCol...
js循环给li绑定事件实现 点击li弹出其索引值 和内容
WangJiangNan17214的博客
02-14 3862
html代码   　　香蕉 　　苹果      菠萝 　　猕猴桃 　　芒果   方法一:    var itemli = document.getElementsByTagName("li");    for(var i = 0; i 　　　　itemli[i].index = i; //给每个li定义一个属性索引值，赋
图片的随机排列
07-10
图片的随机排列
js動態遍歷li列表
weixin_73368873的博客
02-13 393
本文主要簡略介紹，如何使用原生的js操作li的Dom，以實現li的動態變化，li遍歷的目的。通過li的父節點，為其添加子節點，以達到動態增減li的功能。
TAG标签随机排列显示的JS特效代码
ilovegreenrose的专栏
04-16 679
js特效演示 /*reset css*/ body{font-size:0.8em;letter-spacing:1px;font-family:"\5FAE\8F6F\96C5\9ED1"; line-height:1.8em} div,h2,p,fieldset,legend,form,textarea,span,em,sub{margin:0;padding:0} ...
关于原生js给当前点击的li标签添加类名
Benz_s600的博客
04-14 4872
1.先获取到当前所有的li标签 2.再循环给每个li绑定点击事件 3.再次循环所有的li标签，可以先清空所有的类名，也可以添加一个默认的类名 4.给当前点击的li添加类名 tips:this的指向就指向当前点击的li var li = document.querySelectorAll('.el-menu--inline li'); for (var i = 0; i < li.lengt...
原生js获取元素的各种位置(大全）
最新发布
qq_45227564的博客
02-23 4965
原生js获取元素的各种位置(大全）
给多个li循环绑定事件,输出每个li的索引值,(里面的内容也可)四种方法
weixin_30698527的博客
10-11 1225
javaScript 循环给每个 li 绑定事件,输出当前点击 li 标签的索引值 div class="container"> <ul> <li>yellow</li> <li>red</li> <li>blue</li&gt...
Angularjs实现数组随机排序
霸气的名字
09-19 1086
实现数组随机排序      //需要导入angular.js库文件                               var app = angular.module("myApp", []);             var arr1 = [1, 2, 3, 7, 4, 9, 5, 6];             app.service("sortService", fun
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值