<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
var y=3;
$("input").click(function(event) {
$("ul li").each(function(index, el) {
///开始///随机函数
function createRandom(num ,from ,to )
{
var arr=[];
for(var i=from;i<=to;i++)
arr.push(i);
arr.sort(function(){
return 0.5-Math.random();
});
arr.length=num;
return arr;
} function createRandom2(num , from , to)
{
var arr=[];
var json={};
while(arr.length<num)
{
//产生单个随机数
var ranNum=Math.ceil(Math.random()*(to-from))+from;
//通过判断json对象的索引值是否存在 来标记 是否重复
if(!json[ranNum])
{
json[ranNum]=1;
arr.push(ranNum);
}
}
return arr;
}
///结束///随机函数
var arr=[];//声明一个空的数组
arr=createRandom2(7,1,33)/*将随机生成的0-33的7个数字赋值给arr*/
//定义了sort的比较函数将arr数组里面的数字
arr.sort(function(a,b){
return a-b;
});
//利用循环让每个li取到arr数组的值
for(var i=0;i<=$("ul li").size();i++){
$("ul li").eq(i).text(arr[i]);
}
/*每个圆转的度数等于 y*360*/
y++;
$("ul li").eq(index).css({
"transform": 'rotate('+y*360+'deg)',
"-moz-transform": 'rotate('+y*360+'deg)',
"-webkit-transform": 'rotate('+y*360+'deg)',
"-o-transform": 'rotate('+y*360+'deg)',
"-s-transform": 'rotate('+y*360+'deg)'
});
});
//判断随机生成的是不是小于10如果是的就给前面加上0如生成的是1那么就显示01
$("ul li").each(function(index, el) {
if (parseInt($(this).text())<10) {
var cc=$(this).text();
$(this).text("0"+cc)
};
});
});
});
</script>

Jquery仿彩票更换数字动画效果的更多相关文章

  1. javascript仿天猫加入购物车动画效果

    javascript仿天猫加入购物车动画效果   注意:首先需要声明的是:代码原思路不是我写的,是在网上找的这种效果,自己使用代码封装了下而已:代码中都有注释,我们最主要的是理解抛物线的思路及在工作中 ...

  2. Jquery库自带的动画效果方法记录

    1.显示和隐藏hide()和show() <script type="text/javascript">             $(function() {      ...

  3. JQuery实现的模块交换动画效果

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  4. 基于jQuery CSS3鼠标点击动画效果

    分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="co ...

  5. 仿网易nec首页动画效果

    仿网页nec首页动画效果nec链接:http://nec.netease.com/ 首先,介绍animationanimation检索或设置对象所应用的动画特效.animation由“keyframe ...

  6. jquery仿搜狐投票动画代码

    体验效果:http://hovertree.com/texiao/jquery/21/ 这是一款基于jquery实现的仿搜狐投票动画特效源码,运行该源码可见VS图标首先出现在中间位置,紧接着随着投票比 ...

  7. jquery 仿手机屏幕切换界面效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jquery使用CSS3实现文字动画效果插件Textillate.js

    Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...

  9. JQuery模拟实现天猫购物车动画效果

    测试程序源代码下载地址:源码 一.功能描述: 1.点击购买按钮,模拟抛物线将物品弹到购物车里: 2.购物车添加物品后,显示+1动画: 效果图如下: 实现如下: 1.导入jquery相关的包: < ...

随机推荐

  1. 使用tomcat部署jsp程序

    安装java1.6.0到默认目录 下载apache-tomcat-6.0.32-windows-x86.zip,解压到D:\soft目录下 配置环境变量 JAVA_HOME C:\Program Fi ...

  2. php 使用curl模拟登录discuz以及模拟发帖

    <?php$discuz_url = 'http://127.0.0.1/discuz/';//论坛地址$login_url = $discuz_url .'logging.php?action ...

  3. 如何让一个json文件显示在表格里

    <body> //首先得把架子搭起来 <table id = "tb" border="1"> <tr></tr> ...

  4. 课堂作业二 PAT1025 反转链表

    MyGitHub 终于~奔溃了无数次后,看到这个结果 ,感动得不要不要的::>_<:: 题目在这里 题目简述:该题可大致分为 输入链表 -> 链表节点反转 -> 两个步骤 输入 ...

  5. 基于事件的异步模式(EAP)

    什么是EAP异步编程模式 EAP基于事件的异步模式是.net 2.0提出来的,实现了基于事件的异步模式的类将具有一个或者多个以Async为后缀的方法和对应的Completed事件,并且这些类都支持异步 ...

  6. Xcode5 + phoneGap2.9搭建ios开发环境-配置-测试-归档上传/phoneG...

    前言: 小弟是做JAVA/Android的第一次搞这个ios,公司有mobile项目是使用phoneGap开发的,需要开发ios版本.什么都不会只能一点一点琢磨了……大神越过…… 原文链接:http: ...

  7. 用volley在Genymotion上获取网页源码

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAdUAAALUCAIAAADSbz+YAAAgAElEQVR4nOydeVwT197/R+9zu9zluU

  8. AsyncTask

    package com.gg.test; import java.io.IOException; import org.apache.http.HttpResponse;import org.apac ...

  9. Git 分支

    Git 保存的不是文件的变化或者差异,而是一系列不同时刻的文件快照,某一次的提交指向这处时刻的文件快照,看起来就像每次提交都保存了当时的文件,连续的提交形成一条长链 分支 指向某一个特定的提交,不同的 ...

  10. bzoj2141 树状数组套Treap树

    题目大意是在能够改变两个数的位置的情况下计算逆序对数 这因为是动态记录逆序对 本来单纯逆序对只要用树状数组计算即可,但这里因为更新,所以利用TReap树的删点和增加点来进行更新 大致是把每个树状数组所 ...