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 相关文章推荐
js 中{},[]中括号,大括号使用详解
May 12 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
Jquery 获取对象的几种方式介绍
Jan 17 Javascript
JS实现转动随机数抽奖特效代码
Apr 16 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 Javascript
JavaScript实现动态留言板
Mar 16 Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 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防注入代码
2010/04/07 PHP
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
PHP变量内存分配问题记录整理
2013/11/27 PHP
php截取视频指定帧为图片
2016/05/16 PHP
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
2016/12/29 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
es6函数之严格模式用法实例分析
2020/03/17 Javascript
python下载文件时显示下载进度的方法
2015/04/02 Python
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
老生常谈Python进阶之装饰器
2017/05/11 Python
Python批量发送post请求的实现代码
2018/05/05 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
浅析Python面向对象编程
2020/07/10 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
公司捐款倡议书
2014/05/14 职场文书
党课心得体会范文
2014/09/09 职场文书
2014年除四害工作总结
2014/12/06 职场文书
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL