TopList标签和JavaScript结合两例

 更新时间:2007年08月12日 15:57:39   作者:  
 (SteamCMS)Fish模版专贴一:TopList标签和JavaScript结合两例 
首先可以先参考 SteamCMS 标准模版标签说明 来了解一下TopList标签及其属性。 
在Top列表的记录前加上数字(当然也可以是图片,这里只是简单的举个例子)。
原理说明:先在最前面初始化一个js变量,在TopList中间,将Js变量加1,并在TopList循环体中间输出(我写asp代码一样的道理)

关键代码: 

<body>
<script language="javascript">
//全局变量
var i=1;
//输出i,并i自增
function doit(){
document.write(i);
i++;
}
</script>
<!--Steam:TopList ChannelID='0' Type='Commend' IsTop='False' HasImage='False' Number='20' Cols='1' EnterTag='' -->
    <script language="javascript">doit();</script>.<!--Steam:ContentField FieldName='Title' Length='-1' /-->
<!--/Steam:TopList--> 

</body>  

代码中,绿色部分定义了一个全局变量i,和一个函数doit。doit函数在循环体的红色部分运行,输出i。蓝色为TopList标签。红色代码后面的暗黄色是标题。上面代码的结果就会在每条记录前加上数字。简单吧。嘿嘿。 


第二例:每隔五行插入一空行,如:
在Top列表每隔五行插入一空行(当然也可以是图片,或者其他负责的代码)。
原理说明:先在最前面初始化一个js变量,在TopList中间,将Js变量加1,并在TopList循环体中计算此js变量是否被5整除,是就输出空行。 

 

关键代码:


<body>
<script language="javascript">
//全局变量
var i=1;
//输出i,并i自增
function doit(){
if(i%5==0){//是否被5整除
  document.write("<br />");
}
i++;
}
</script>
<!--Steam:TopList ChannelID='0' Type='Commend' IsTop='False' HasImage='False' Number='20' Cols='1' EnterTag='' -->
    <!--Steam:ContentField FieldName='Title' Length='-1' /--><script language="javascript">doit();</script>
<!--/Steam:TopList-->


</body>


代码中,绿色部分定义了一个全局变量i,和一个函数doit。doit函数在循环体的红色部分运行,判断是否被5整除,是就输出<br>。蓝色为TopList标签。红色代码前面的黄色是标题。上面代码的结果就会在每隔五行插入一空行。简单吧。嘿嘿。

相关文章

  • JavaScript小技巧整理

    JavaScript小技巧整理

    这篇文章主要介绍了JavaScript小技巧,整理汇总了JavaScript常用的6个实用技巧,属于JavaScript边角技巧的总结,需要的朋友可以参考下
    2015-12-12
  • 基于JavaScript实现页面轮播图渐变效果的示例代码

    基于JavaScript实现页面轮播图渐变效果的示例代码

    这篇文章主要给大家分享如何使用JavaScript实现一个页面轮播图渐变效果,轮播图是网页开发中常见的功能之一,它能够展示多个图片或内容,并以一定的时间间隔进行自动切换,而通过添加渐变效果,可以让切换过程更加平滑流畅,感兴趣的小伙伴可以自己动手尝试一下
    2023-10-10
  • js添加千分位的实现代码(超简单)

    js添加千分位的实现代码(超简单)

    下面小编就为大家带来一篇js添加千分位的实现代码(超简单)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • js防抖具体实现以及详细原理步骤说明(附实例)

    js防抖具体实现以及详细原理步骤说明(附实例)

    节流和防抖这里两个词可能对一些初入JavaScript的同学比较陌生,下面这篇文章主要给大家介绍了关于js防抖具体实现以及详细原理步骤的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • 微信小程序云开发之使用云数据库

    微信小程序云开发之使用云数据库

    这篇文章主要为大家详细介绍了微信小程序云开发之使用云数据库,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • onkeydown事件解决按回车键直接提交数据的需求

    onkeydown事件解决按回车键直接提交数据的需求

    登陆页面需要扑捉用户按下回车自动提交的需求,于是相到在body里添加onkeydown事件跳javascript在提交表单,具体看下实现代码,希望对你有所帮助
    2013-04-04
  • js滚动条多种样式,推荐

    js滚动条多种样式,推荐

    [红色]js滚动条多种样式,推荐...
    2007-02-02
  • JS闭包用法实例分析

    JS闭包用法实例分析

    这篇文章主要介绍了JS闭包用法,结合具体实例形式分析了javascript闭包的原理、执行步骤与相关操作技巧,需要的朋友可以参考下
    2017-03-03
  • js利用prototype调用Array的slice方法示例

    js利用prototype调用Array的slice方法示例

    这篇文章主要介绍了如何利用js的prototype调用Array的slice方法,需要的朋友可以参考下
    2014-06-06
  • javascript 尚未实现错误解决办法

    javascript 尚未实现错误解决办法

    打开页面的时候,FF下一切正常,但是当我用IE6测试的时候,JS总执行不下去了,提示“尚未实现”,无论怎么搞就搞不定。
    2008-11-11

最新评论