Home >  > 开发(四)列表网开发

开发(四)列表网开发

0

https://blog.csdn.net/ixygj197875/article/details/79391744

一、网页内容呈现
需要将存在列表中的数据以一行一行地呈现出来,折腾了一个多小时,终于搞定了。

代码如下:

<html>
<div id="new_activity">
<dl>
<dd>
	<dt>
	</dt>
</dd>
</dl>
</div>
<script type="text/javascript">
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"

var new_activity = document.getElementById('new_activity');

for (i=0;i<mycars.length;i++){    
    var dl = document.createElement('dl');
    dl.innerHTML = '<dd> <a href="#"> <img src="http://www.w3school.com.cn/ui2017/alert.png"> </a> </dd>';
    dl.innerHTML+= '<dt> <a href="#"> 这是我的 </a> </dt>';
    dl.innerHTML+= '<dd><a href="#"><img src="avatar.jpg"></a><p><a href="#">在水一方</a></p><p><a href="#">查看(<i>60</i>)</a> <span>剩余<i>5</i>人</span></p></dd>';
    dl.innerHTML+= '<dd><span><i>16</i>人报名</span> <span><i>¥</i><i>1000</i>元</span></dd>';
    new_activity.appendChild(dl);
}

</script>
</html>
</html>

使用时,只需要将数据以列表形式存到wordpress的自定义字段里面,然后再取出来,下面这样就可以了

<script type="text/javascript">
var mycars = <?php the_field('bus'); ?>
	
var new_activity = document.getElementById('new_activity');

for (i=0;i<mycars.length;i++){
    var dl = document.createElement('dl');
    dl.innerHTML = '<dd>'+mycars[i]+'</dd>';
    new_activity.appendChild(dl);
}
</script>

效果展示:

由于它是按单引号分隔的,有时几个数据全在一个单引号中,所以会出现下面的情况。

二、自动编号
最终代码

<html>
<head>
<style type="text/css">
ol {
    list-style-type: none;
    counter-reset: li;
}
ol li:before {
    content: counter(li)'、';
    counter-increment: li;	
	width: 18px;
	height: 18px;
	text-align: center;
	line-height: 18px;
	background: #34b9c2;
	margin-right: 6px;
	color: #fff;
	font-size: 13px;
}
</style>
</head>

<div id="new_activity">

</div>
<script type="text/javascript">
var mycars = new Array()
    mycars[0] = "Saab"
    mycars[1] = "Volvo"
    mycars[2] = "BMW"
    mycars[3] = "toyota"

var new_activity = document.getElementById('new_activity');
var ol = document.createElement('ol');
for (i=0;i<mycars.length;i++){
    ol.innerHTML+= '<li>'+mycars[i]+'</li>';
    new_activity.appendChild(ol);
}

</script>
</html>
</html>

效果展示:

上面的代码在模板中测试时,显示了两次数字,一直想解决无果。

三、新代码

<html>
 <ul>
       <li class="list-item">ECharts</li>
       <li class="list-item">AntV</li>
       <li class="list-item">Vant</li>
</ul>
   
   
<style type="text/css">
    ul{
        list-style:none
    }
    .list-item{
        counter-increment:index;
        position:relative
    }
    .list-item::before{
        content:counter(index);
        display:inline-block;
        width:20px;
        height:20px;
        border-radius:50%;
        text-align:center;
        vertical-align: top;
        font-size:15px;color:#fff;
        background:#2DB9EE;
        margin-right:12px;
    }
</style>
</html>

成果展示:

不过在模板中测试时,还是显示2次数字,只能等下次自己设计新的模板时再测试了。

四、父分类、子分类调用不同的模板
https://www.xuewangzhan.net/wpbbs/16021.html

四、模板
https://preview.themeforest.net/item/classiera-classified-ads-wordpress-theme/full_screen_preview/14138208

本文暂无标签

发表评论

*

*