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 25 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
关于JavaScript数组你所不知道的3件事
Aug 24 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
vue-cli3搭建项目的详细步骤
Dec 05 Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 Javascript
vue学习笔记之slot插槽基本用法实例分析
Feb 01 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
.htaccess文件保护实例讲解
2011/02/06 PHP
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
微信支付扫码支付php版
2016/07/22 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
js实现图片360度旋转
2017/01/22 Javascript
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
微信小程序上传图片功能(附后端代码)
2020/06/19 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
sublime text 3配置使用python操作方法
2017/06/11 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
纯css3实现走马灯效果
2014/12/26 HTML / CSS
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
技术总监个人的自我评价范文
2013/12/18 职场文书
《锄禾》教学反思
2014/04/08 职场文书
售后服务承诺书模板
2014/05/21 职场文书
学习退步检讨书
2014/09/28 职场文书