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 document.compatMode兼容性
Feb 23 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 Javascript
解析JavaScript中的不可见数据类型
Dec 02 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 Javascript
Vue 幸运大转盘实现思路详解
May 06 Javascript
新手简单了解vue
May 29 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
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
JS 网站性能优化笔记
2011/05/24 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
php实现网页端验证码功能
2017/07/11 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
利用js 进行输入框自动匹配字符的小例子
2013/06/29 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
Python连接DB2数据库
2016/08/27 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
django实现模型字段动态choice的操作
2020/04/01 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
Python使用windows设置定时执行脚本
2020/11/12 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
七年级英语教学反思
2014/01/15 职场文书
幼儿园国庆节活动方案
2014/02/01 职场文书
庆国庆活动总结
2014/08/28 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
2014年留守儿童工作总结
2014/12/10 职场文书
安全承诺书
2015/01/19 职场文书
Python面向对象之内置函数相关知识总结
2021/06/24 Python
Python加密与解密模块hashlib与hmac
2022/06/05 Python