精华内容
下载资源
问答
  • javascript抽奖

    2015-07-18 15:16:43
    javascript抽奖
  • javascript 抽奖

    2016-04-30 20:59:39
    javascript 抽奖

    如图:

    enter image description here

    模拟抽奖的实现过程

    旋转原理:当支持CSS3属性采用transform: rotate(角度deg)设置,当角度为正数时顺时针旋转,当为负数时逆时针旋转。如果是IE8及其以下,采用采用绝对定位设置top和left,模拟角度旋转。

    run方法,参数angle指角度

    function run(angle) {
                        if (isIE) {
                            cosDeg = Math.cos(angle * Math.PI / 180);
                            sinDeg = Math.sin(angle * Math.PI / 180);
                            with (target.filters.item(0)) {
                                M11 = M22 = cosDeg; M12 = -(M21 = sinDeg);
                            }
                            target.style.top = (orginH - target.offsetHeight) / 2 + "px";
                            target.style.left = (orginW - target.offsetWidth) / 2 + "px";
                        } else if (target.style.MozTransform !== undefined) {
                            target.style.MozTransform = "rotate(" + angle + "deg)";
                        } else if (target.style.OTransform !== undefined) {
                            target.style.OTransform = "rotate(" + angle + "deg)";
                        } else if (target.style.webkitTransform !== undefined) {
                            target.style.webkitTransform = "rotate(" + angle + "deg)";
                        } else {
                            target.style.transform = "rotate(" + angle + "deg)";
                        }
                    }

    模拟转盘加速,匀速和减速。当角度小于某个数值时,让其处于加速此处采用1.01的系数作为加速度,当大于某个数值时处于高速匀速状态,当角度大于设置的最大数值时,让其减速采用系数为0.99。设置负数作为减速的值(即变量 tmp),随即获取负360中的值(即变量 m),当大于这个值时,转盘停止。

    var tmp = -900;
                    var m = -parseInt(Math.random() * 360);
                    timer = setInterval(function () {
                        if (i > 3000) {
                            tmp = parseInt(tmp * 0.99);
                            if (tmp > m) {
                                tmp = m;
                                clearInterval(timer);
                                msg(m);
                            }
                            run(tmp);
                        }
                        else if (i > 1000) {
                            i = i + 45;
                            run(i);
                        }
                        else {
                            i = parseInt((i + 1) * 1.01);
                            run(i);
                        }
                    }, 50);

    启动抽奖和重新设置抽奖

    <input id="test" type="button" value="抽奖" />
    <input id="restart" style="display: none;" type="button" value="再抽一次" />
    m$('test').onclick = function () {
                    m$('test').style.display = "none";
                    showMsg();
                }
    
                m$('restart').onclick = function () {
                    m$('restart').style.display = "none";
    
                    if (isIE) {
                        m$("demo").style.top = "0px";
                        m$("demo").style.left = "0px";
                    } else if (m$("demo").style.MozTransform !== undefined) {
                        m$("demo").style.MozTransform = 'rotate(0deg)';
                    } else if (m$("demo").style.OTransform !== undefined) {
                        m$("demo").style.OTransform = 'rotate(0deg)';
    
                    } else if (m$("demo").style.webkitTransform !== undefined) {
                        m$("demo").style.webkitTransform = 'rotate(0deg)';
                    } else {
                        m$("demo").style.transform = 'rotate(0deg)';
                    }
    
                    m$('test').style.display = "block";
                    i = 0;
                }

    完整代码demo:

    <!DOCTYPE html>
    <html>
    <head>
        <title>抽奖</title>
        <style type="text/css">
            #container{width: 400px;height: 400px;position: relative;margin: 0 auto;}
            #demo{position: absolute;filter: progid:DXImageTransform.Microsoft.Matrix(sizingmethod="auto expand");}
        </style>
    </head>
    <body style="height: 1000px;">
        <div id="container">
            <div id="demo">
                <img alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_a.png" width="400" height="400" />
            </div>
        </div>
        <input id="test" type="button" value="抽奖" />
        <input id="restart" style="display: none;" type="button" value="再抽一次" />
        <div id="msg">
        </div>
        <script type="text/javascript">
            var m$ = function (id) { return document.getElementById(id); }
            var ua = navigator.userAgent;
            var isIE = /msie/i.test(ua) && !window.opera;
    
            var i = 1, sinDeg = 0, cosDeg = 0, timer = null;
            var mRotate = function () {
                var rotate = function (target, msg) {
                    target = m$(target);
                    var orginW = target.clientWidth, orginH = target.clientHeight;
                    clearInterval(timer);
                    function run(angle) {
                        if (isIE) {
                            cosDeg = Math.cos(angle * Math.PI / 180);
                            sinDeg = Math.sin(angle * Math.PI / 180);
                            with (target.filters.item(0)) {
                                M11 = M22 = cosDeg; M12 = -(M21 = sinDeg);
                            }
                            target.style.top = (orginH - target.offsetHeight) / 2 + "px";
                            target.style.left = (orginW - target.offsetWidth) / 2 + "px";
                        } else if (target.style.MozTransform !== undefined) {
                            target.style.MozTransform = "rotate(" + angle + "deg)";
                        } else if (target.style.OTransform !== undefined) {
                            target.style.OTransform = "rotate(" + angle + "deg)";
                        } else if (target.style.webkitTransform !== undefined) {
                            target.style.webkitTransform = "rotate(" + angle + "deg)";
                        } else {
                            target.style.transform = "rotate(" + angle + "deg)";
                        }
                    }
    
                    var tmp = -900;
                    var m = -parseInt(Math.random() * 360);
                    timer = setInterval(function () {
                        if (i > 3000) {
                            tmp = parseInt(tmp * 0.99);
                            if (tmp > m) {
                                tmp = m;
                                clearInterval(timer);
                                msg(m);
                            }
                            run(tmp);
                        }
                        else if (i > 1000) {
                            i = i + 45;
                            run(i);
                        }
                        else {
                            i = parseInt((i + 1) * 1.01);
                            run(i);
                        }
                    }, 50);
                }
                return { rotate: rotate }
            } ();
    
            function showMsg() {
                mRotate.rotate("demo", function msg(m) {
                    if (m > -90 && m < -30) {
                        m$("msg").innerHTML += "22222222";
                    }
                    else if (m > -150 && m < -90) {
                        m$("msg").innerHTML += "333333333";
                    }
                    else if (m > -210 && m < -150) {
                        m$("msg").innerHTML += "444444";
                    }
                    else if (m > -270 && m < -210) {
                        m$("msg").innerHTML += "5555555";
                    }
                    else if (m > -330 && m < -270) {
                        m$("msg").innerHTML += "6666666";
                    } else {
                        m$("msg").innerHTML += "111111111";
                    }
                    m$('restart').style.display = "block";
                });
            }
    
            window.onload = function () {
                m$('test').onclick = function () {
                    m$('test').style.display = "none";
                    showMsg();
                }
    
                m$('restart').onclick = function () {
                    m$('restart').style.display = "none";
    
                    if (isIE) {
                        m$("demo").style.top = "0px";
                        m$("demo").style.left = "0px";
                    } else if (m$("demo").style.MozTransform !== undefined) {
                        m$("demo").style.MozTransform = 'rotate(0deg)';
                    } else if (m$("demo").style.OTransform !== undefined) {
                        m$("demo").style.OTransform = 'rotate(0deg)';
    
                    } else if (m$("demo").style.webkitTransform !== undefined) {
                        m$("demo").style.webkitTransform = 'rotate(0deg)';
                    } else {
                        m$("demo").style.transform = 'rotate(0deg)';
                    }
    
                    m$('test').style.display = "block";
                    i = 0;
                }
            }
        </script>
    </body>
    </html>

    转载自:http://www.9958.pw/post/js_choujiang

    展开全文
  • JS抽奖

    2014-12-31 15:10:28
    抽奖 JS
  • js抽奖

    2019-11-22 09:06:25
    源码Demo: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>...script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script...

    源码Demo:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    		<style>
    			.div1{
    				margin: auto;
    				width: 230px;
    				height: 350px;
    			}
    			.div2{
    				width: 100px;
    				height: 50px;
    				margin-left: 380px;
    			}
    			.div2>input{
    				width: 100px;
    				height: 50px;
    			}
    		</style>
    	</head>
    		<body>
    	<div class="div1">
    		<h1>随机抽奖</h1>
    		<img src="images/big-1.jpg" />
    	</div>	
    	<div class="div2">
    	<input class="btn1" type="button" value="开始" />
    	<input class="btn2" type="button" value="停止" />
    	</div>
    	<script type="text/javascript">
    		$(function() {
    
    			$(".btn1").on("click", function() {
    				interval = setInterval(function() {
    					var num = Math.floor(Math.random() * 10) + 1;
    					$("img").prop("src", "images/big-" + num + ".jpg");
    				}, 100);
    			});
    			$(".btn2").on("click", function() {
    				clearInterval(interval);
    			});
    		});
    	</script>
    </body>
    

    公众号:
    在这里插入图片描述
    微信号:

    在这里插入图片描述

    展开全文
  • javascript抽奖插件

    2016-12-20 15:25:21
    javascript抽奖插件
  • JavaScript 抽奖

    2015-11-20 18:55:33
    test.html<html> 我的摇奖程序 <script src="myjs.js"> #name{ color:red; font-size:36px;

    test.html

    <html>
        <head>
            <title>我的摇奖程序</title>
            <script src="myjs.js"></script>
            <style>
                #name{
                    color:red;
                    font-size:36px;
                }
            </style>
        </head>
        <body>
            <br/>
            <br/>
            <div id="name"></div>
            <br/>
            <br/>
            <input type="button" value="开始抽奖" onclick="start()">
            <input type="button" value="停止抽奖" onclick="stop()">
        </body>
    </html>

    myjs.js

    var numbers=new Array();
    numbers[0]="5元券";
    numbers[1]="10元券";
    numbers[2]="20元券";
    numbers[3]="没抽中";
    
    var timer;
    var i=0;
    function start(){
        //start timer
        i=100+Math.round(Math.random()*100);
        timer=setInterval(show,100);//5ms
    }
    function stop(){
    
        clearInterval(timer);
    }
    function show(){
        if(i==0){
            stop();
        }
        i--;
    
        var index=Math.round(Math.random()*(numbers.length-1));
        document.getElementById("name").innerHTML=numbers[index];
    }
    展开全文
  • js抽奖程序代码

    2017-12-16 15:46:30
    js抽奖程序代码js抽奖程序代码js抽奖程序代码js抽奖程序代码
  • js抽奖源码

    2018-01-15 10:50:20
    我参考网上代码加自己实际需求编写,实用的js抽奖概率算法问题,值得一看,值得收藏
  • javascript抽奖功能

    2009-01-17 23:29:59
    js抽奖的功能 js抽奖 js抽奖 js抽奖 js抽奖
  • js抽奖转盘

    2014-10-30 23:35:00
    jqueryrotate.js抽奖转盘,使用简单,兼容各种浏览器
  • JavaScript抽奖程序

    2013-01-16 13:25:44
    JavaScript抽奖程序,页面简单,带图片轮换。写得不好请见谅
  • 主要介绍了js抽奖转盘实现方法,结合实例形式分析了js抽奖转盘原理、实现方法与操作注意事项,需要的朋友可以参考下
  • js 抽奖大转盘

    2017-01-12 22:18:04
    js 抽奖大转盘,没用其他插件,纯js+canvas实现,用的时候记得把jquery路径换成自己的
  • 主要介绍了js随机抽奖代码效果,大家参考使用
  • JS 抽奖活动

    2013-04-01 09:41:16
    一个简单的JS 抽奖程序,如果需要与数据库交互,就需要根据个人需求修改程序了。
  • js抽奖系统

    2012-05-20 00:24:21
    自己写的一个简单的js抽奖系统,能实抽取一等奖,二等奖,三等奖
  • JS抽奖转盘效果

    2013-10-27 14:25:39
    JS抽奖转盘效果
  • JS抽奖案例

    2018-11-07 23:04:41
    采用Javascript编写的抽奖系统,随机抽取方阵奖品,定时抽取
  • JS抽奖器原代码JS抽奖器原代码JS抽奖器原代码JS抽奖器原代码
  • HTML+JS抽奖系统 v3.0

    2020-12-02 11:30:15
    HTML+JS抽奖系统本版本新增自动分屏功能,连接投影仪的电脑,按windows键+P键,选择分屏模式,即可达到理想效果。采用本地脚本直接运行无需互联网支持,双击“启动抽奖.EXE”即可启动程序。 功能描述: 1)数字号码或...
  • js抽奖

    2013-03-12 12:04:29
    js抽奖机,点击后三张图片滚动,慢慢停下来,如果图片一样则中奖。中奖逻辑由后台控制,前台只展示。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,802
精华内容 3,920
关键字:

js抽奖