jquery实现的随机多彩tag标签随机颜色和字号大小效果


Posted in Javascript onMarch 27, 2014

jquery随机多彩tag标签随机颜色和字号大小效果

js代码:

<script type="text/javascript" src="jquery-1.6.4.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
var tags_a = $("#tags a"); 
tags_a.each(function(){ 
var x = 9; 
var y = 0; 
var rand = parseInt(Math.random() * (x - y + 1) + y); 
$(this).addClass("tags"+rand); 
}); 
}) 
</script>

html代码:
<html> 
<head> 
<style> 
body,a{ font-size:13px;} 
a{ color:#333333; text-decoration:none;} 
.taglist{ width:250px;overflow:hidden;border:#dddddd solid 1px;} 
.taglist .tit{ width:100%; height:24px; line-height:24px; background-color:#565662;} 
.taglist .tit a{ padding-left:8px; color:#ffffff;} 
#tags a{height:26px; line-height:26px;padding-right:6px;} 
#tags .tags0{} 
#tags .tags1{color:#C00; font-size:24px;} 
#tags .tags2{color:#030; font-size:16px;} 
#tags .tags3{color:#00F;} 
#tags .tags4{ font-size:16px;} 
#tags .tags5{color:#C00; font-size:20px;} 
#tags .tags6{color:#F06 font-size:20px;} 
#tags .tags7{color:#030; font-weight:bold; font-size:18px;} 
#tags .tags8{color:#F06; font-weight:bold;} 
#tags .tags9{color:#C00; font-weight:bold;font-size:16px;} 
#tags a:hover{ color:#F00; text-decoration:underline;} 
.w95{ width:95%; margin:0 auto; padding-top:6px; padding-bottom:6px;} 
.taglist .w95{} 
</style> 
</head> 
<body> 
<div class="taglist"> 
<div class="tit"><a href="#">TAG标签</a></div> 
<div class="w95" id="tags"> 
<a href='http://www.51xuediannao.com/js/nav/'>导航菜单</a> 
<a href='http://www.51xuediannao.com/js/slide/'>焦点幻灯片</a> 
<a href='http://www.51xuediannao.com/js/gg/'>广告代码</a> 
<a href='http://www.51xuediannao.com/js/texiao/'>网页特效</a> 
<a href='http://www.51xuediannao.com/js/'>jquery 特效</a> 
<a href='http://www.51xuediannao.com/js/gundong/'>滚动代码</a> 
<a href="http://www.51xuediannao.com/tags.php?/%E6%9F%A5%E7%9C%8B%E6%BA%90%E7%A0%81/">查看源码</a> 
<a href="http://www.51xuediannao.com/tags.php?/IE7%E5%8F%98%E6%85%A2/">IE7变慢</a> 
<a href="http://www.51xuediannao.com/tags.php?/ET2.0%E9%87%87%E9%9B%86/">ET2.0采集</a> 
<a href="http://www.51xuediannao.com/tags.php?/CSS/">CSS</a> 
<a href="http://www.51xuediannao.com/tags.php?/moss2007/">moss2007</a> 
<a href="http://www.51xuediannao.com/tags.php?/MOSS%E6%AF%8D%E7%89%88%E9%A1%B5/">MOSS母版页</a> 
<a href="http://www.51xuediannao.com/tags.php?/JS%2BCSS%E5%B9%BB%E7%81%AF%E7%89%87/">JS+CSS幻灯片</a> 
<a href="http://www.51xuediannao.com/tags.php?/%E7%BD%91%E9%A1%B5%E6%BA%90%E7%A0%81/">网页源码</a> 
<a href="http://www.51xuediannao.com/tags.php?/%E7%BD%91%E9%A1%B5%E9%85%8D%E8%89%B2/">网页配色</a> 
<a href="http://www.51xuediannao.com/tags.php?/301%E9%87%8D%E5%AE%9A%E5%90%91/">301重定向</a> 
<a href="http://www.51xuediannao.com/tags.php?/JS%2BCSS%E5%88%97%E8%A1%A8/">JS+CSS列表</a> 
<a href="http://www.51xuediannao.com/tags.php?/%E9%9A%8F%E6%9C%BA%E6%95%B0/">随机数</a> 
<a href="http://www.51xuediannao.com/tags.php?/%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95/">下拉菜单</a> 
</div> 
</div> 
</body> 
</html>

效果显示:
jquery实现的随机多彩tag标签随机颜色和字号大小效果 
Javascript 相关文章推荐
javaScript - 如何引入js代码
Mar 09 Javascript
js获取当月最后一天实例代码
Nov 19 Javascript
原生javascript实现无间缝滚动示例
Jan 28 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
vue-loader教程介绍
Jun 14 Javascript
浅谈webpack对样式的处理
Jan 05 Javascript
Bootstrap-table自定义可编辑每页显示记录数
Sep 07 Javascript
Vue核心概念Getter的使用方法
Jan 18 Javascript
vue 虚拟DOM的原理
Oct 03 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 #Javascript
js无刷新操作table的行和列
Mar 27 #Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 #Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 #Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 #Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 #Javascript
JS中判断null、undefined与NaN的方法
Mar 26 #Javascript
You might like
测试您的 PHP 水平的题目
2007/05/30 PHP
php 魔术方法使用说明
2009/10/20 PHP
php获取文件内容最后一行示例
2014/01/09 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
php判断目录存在的简单方法
2019/09/26 PHP
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
jQuery实现跨域
2015/02/03 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
解决vue 引入子组件报错的问题
2018/09/06 Javascript
jQuery实现评论模块
2020/08/19 jQuery
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
学习python (1)
2006/10/31 Python
python网络编程学习笔记(三):socket网络服务器
2014/06/09 Python
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
Python实现一个服务器监听多个客户端请求
2018/04/12 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
python使用minimax算法实现五子棋
2019/07/29 Python
django+tornado实现实时查看远程日志的方法
2019/08/12 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
教师实习的自我鉴定
2013/10/26 职场文书
物理专业大学生职业生涯规划书
2014/02/07 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
《迟到》教学反思
2016/02/24 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书
浅谈Python数学建模之数据导入
2021/06/23 Python
Python函数式编程中itertools模块详解
2021/09/15 Python