TopList标签和JavaScript结合两例


Posted in Javascript onAugust 12, 2007

 (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 相关文章推荐
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
详解js私有作用域中创建特权方法
Jan 25 Javascript
JS Attribute属性操作详解
May 19 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 Javascript
JS简易计算器实例讲解
Jun 30 Javascript
js实现删除json中指定的元素
Sep 22 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
Javascript-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 #Javascript
IE和Mozilla的兼容性汇总event
Aug 12 #Javascript
收藏Javascript中常用的55个经典技巧
Aug 12 #Javascript
JavaScript-世界上误解最深的语言分析
Aug 12 #Javascript
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 #Javascript
alixixi runcode.asp的代码不错的应用
Aug 08 #Javascript
网上应用的一个不错common.js脚本
Aug 08 #Javascript
You might like
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
层叠菜单的动态生成
2006/10/09 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
vue轮播图插件vue-concise-slider的使用
2018/03/13 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
使用PYTHON接收多播数据的代码
2012/03/01 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
python interpolate插值实例
2020/07/06 Python
校本教研工作方案
2014/01/14 职场文书
周年庆典邀请函范文
2014/01/23 职场文书
养生餐厅创业计划书范文
2014/03/26 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
举起手来观后感
2015/06/09 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
MySQL数据库 安全管理
2022/05/06 MySQL