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 相关文章推荐
用js自动判断浏览器分辨率的代码
Jan 28 Javascript
基于jquery的loading 加载提示效果实现代码
Sep 01 Javascript
jQuery 中使用JSON的实现代码
Dec 01 Javascript
js实现网页收藏功能
Dec 17 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
Jun 28 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
Vue项目分环境打包的实现步骤
Apr 02 Javascript
Javascript查看大图功能代码实现
May 07 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 28 Javascript
基于JavaScript实现省市联动效果
Jun 22 Javascript
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
PHP 采集心得技巧
2009/05/15 PHP
php处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
js 自动播放的实例代码
2013/11/19 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
JavaScript实现随机点名小程序
2020/10/29 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
python去掉行尾的换行符方法
2017/01/04 Python
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
python中join()方法介绍
2018/10/11 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
Java基础面试题
2014/07/19 面试题
酒店保安员岗位职责
2014/01/31 职场文书
俄语专业职业生涯规划
2014/02/26 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
个人总结与自我评价
2014/09/18 职场文书
学生个人总结范文
2015/02/15 职场文书
少年犯观后感
2015/06/11 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
mysql优化
2021/04/06 MySQL