pbootcms的tags标签js随机自动变换解决方案

其实有好几种解决方案,既然搜这个标题来的,肯定有这个需求,废话不多说(只讲纯js随机方案,jq较真的你走开哦),被群里的群友dis,唉,总有些无知的人爱哔哔。下面pbootcms关键代码,直接ctrl+f5搜索pboot:tags吧

		<div class="tags">
			<!-------这是需要你放置tags的位置,这里为空即可------->
		</div>
		<!---------下面是js,你可以单独封装---------->
		<script>
		//获取所有的 DIV
		var divArr = document.getElementsByClassName('tags');
		//获取长度
		var jsonLength = divArr.length;
		
		//等待添加给 DIV 的内容  数组形式  每个键对应的值都不同
		var jsonArr = {};
		for( var i = 0; i <= jsonLength; i++) {
			jsonArr[i] = gettags();
		}
		
		//执行添加动作
		var textNode;
		for (var i = 0; i < jsonLength; i++) {
			textNode = document.createTextNode(jsonArr[i]);
			//divArr[i].append(textNode);  //这是追加 以字符串形式展示 相转化为html代码用下面的
			divArr[i].innerHTML = textNode.data;
		}
			
		//随机获取对应内容  可自行更改 我这里的需求是这样的	
		function gettags(){
			var arr = 5//调用数量
			//pbootcms核心代码在这里,修改栏目scode就可以了
			var items = [{pboot:tags scode=*,*}'<a href="[tags:link]">[tags:text]</a>'{/pboot:tags}];
		        //随机一个    
			var index = Math.floor((Math.random()*arr)); 
		        //随机多个
			var indexs = getRandomArrayElements(items, 13);
			var html='';
			for( var i =1; i <= arr; i++) {
				html += "<li class='biaoqian'>"+indexs[i]+"</li>";
			}
		        //回调
			return html;
		}		
		//随机取多个			
		function getRandomArrayElements(arr, count) {
			var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
			while (i-- > min) {
				index = Math.floor((i + 1) * Math.random());
				temp = shuffled[index];
				shuffled[index] = shuffled[i];
				shuffled[i] = temp;
			}
			return shuffled.slice(min);
		}
		
		</script>

在这里插入图片描述
至此,已经搞定。有些小伙伴会问,这怎么使用?复制上面的html代码到你网页想放的位置,下面的js代码,放到列表页或者内页,只要有调用tags的位置都得放置哦。
当然了,也有其他大神有更好的解决方法,希望多交流,共同提高技术。
如果有不懂的同学可以留言交流,我这里还有两种解决方案,想知道的,也可以留言哦。

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蹦极的考拉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值