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 相关文章推荐
参考:关于Javascript中实现暂停的几篇文章
Mar 04 Javascript
Jquery下attr和removeAttr的使用方法
Dec 28 Javascript
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
javascript生成随机数的方法
May 16 Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 Javascript
微信小程序 地图定位简单实例
Oct 14 Javascript
vue.js实现含搜索的多种复选框(附源码)
Mar 23 Javascript
Vue实现本地购物车功能
Dec 05 Javascript
Vue-Cli项目优化操作的实现
Oct 27 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 Javascript
vue使用require.context实现动态注册路由
Dec 25 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
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
php自动加载的两种实现方法
2010/06/21 PHP
php设计模式 Strategy(策略模式)
2011/06/26 PHP
用php简单实现加减乘除计算器
2014/01/06 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
jquery 笔记 事件
2011/11/02 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
Python安装whl文件过程图解
2020/02/18 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
linux面试题参考答案(2)
2015/12/06 面试题
毕业生求职简历的自我评价
2013/10/07 职场文书
五年级音乐教学反思
2014/02/06 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
MySQL创建表操作命令分享
2022/03/25 MySQL