Jquery仿彩票更换数字动画效果
<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仿彩票更换数字动画效果的更多相关文章
- javascript仿天猫加入购物车动画效果
javascript仿天猫加入购物车动画效果 注意:首先需要声明的是:代码原思路不是我写的,是在网上找的这种效果,自己使用代码封装了下而已:代码中都有注释,我们最主要的是理解抛物线的思路及在工作中 ...
- Jquery库自带的动画效果方法记录
1.显示和隐藏hide()和show() <script type="text/javascript"> $(function() { ...
- JQuery实现的模块交换动画效果
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- 基于jQuery CSS3鼠标点击动画效果
分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="co ...
- 仿网易nec首页动画效果
仿网页nec首页动画效果nec链接:http://nec.netease.com/ 首先,介绍animationanimation检索或设置对象所应用的动画特效.animation由“keyframe ...
- jquery仿搜狐投票动画代码
体验效果:http://hovertree.com/texiao/jquery/21/ 这是一款基于jquery实现的仿搜狐投票动画特效源码,运行该源码可见VS图标首先出现在中间位置,紧接着随着投票比 ...
- jquery 仿手机屏幕切换界面效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery使用CSS3实现文字动画效果插件Textillate.js
Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...
- JQuery模拟实现天猫购物车动画效果
测试程序源代码下载地址:源码 一.功能描述: 1.点击购买按钮,模拟抛物线将物品弹到购物车里: 2.购物车添加物品后,显示+1动画: 效果图如下: 实现如下: 1.导入jquery相关的包: < ...
随机推荐
- JS根据登录的城市不同调用不同的内容
这个思路就是通过js获取访问客户的IP地址,根据IP接口判断IP的所属城市 1.先引入ip接口的js文件,网上有很多,这里用的是新浪的(感谢新浪) <script type="text ...
- IIS发布网站出现“未能加载文件或程序集“System.Data.SQLite”或它的某一个依赖项。”的解决方法
未能加载文件或程序集“System.Data.SQLite”或它的某一个依赖项.试图加载格式不正确的程序. 说明: 执行当前 Web 请求期间,出现未经处理的异常.请检查堆栈 ...
- 深入浅出Mybatis系列(十)---SQL执行流程分析(源码篇)
最近太忙了,一直没时间继续更新博客,今天忙里偷闲继续我的Mybatis学习之旅.在前九篇中,介绍了mybatis的配置以及使用, 那么本篇将走进mybatis的源码,分析mybatis 的执行流程, ...
- 学习ios【1】Objective-C 基本语法
一 了解一下,找参考资料 1.看书学习object-c语法,第一本看的是<objective-c程序设计>. 2.官网:https://developer.apple.com/librar ...
- 时间控件之赋值问题:datetimebox
1.datetimebox不显示毫秒数: <input class="easyui-datetimebox" name="birthday" data-o ...
- python错误类型
在运行或编写一个程序时常会遇到错误异常,这时python会给你一个错误提示类名,告诉出现了什么样的问题(Python是面向对象语言,所以程序抛出的异常也是类).能很好的理解这些错误提示类名所代表的意思 ...
- HttpContext.GetOwinContext().Authentication 报错 解决办法
HttpContext.GetOwinContext().Authentication 会提示 不包含GetOwinContext 方法的报错信息 解决办法:引入system.web程序集,GetOw ...
- POJ 3984 迷宫问题
K - 迷宫问题 Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit Sta ...
- 2013年度最强AngularJS资源合集
原文在这里 2013年度最强AngularJS资源合集 来看我的视频教程,国内第一款完整的AngularJS视频教程http://www.imooc.com/learn/156 司徒正美 写道 htt ...
- Socket通信 简单实现私聊、群聊(dos命令下)
很久以前的一个Demo,这里服务器只做转发功能,根据ID地址和端口号来标识身份,群聊和私聊只是简单实现, 服务器代码如下: import java.util.*; import java.io.*; ...