css三转盘抽取奖品,遁地台风

By admin in 4858美高梅 on 2019年4月20日

(-一)写在前边

以此idea不是笔者的,首先向那位长辈致敬。

自己用的是chrome49, jquery三.0。

完整的主次案例在自身的百度云盘

目前大肆实习,该走的都走了,过两日也要去北京找二个web前段的实习机会,世界如此大,小编只得去看看…。

jQuery-H伍-css三转盘抽取奖金-遁地沙暴,jquery-h五-css叁转盘

(-壹)写在后边

以此idea不是本身的,首先向那位长辈致敬。

自家用的是chrome4玖, jquery三.0。

全部的程序案例在本人的百度云盘

近日大4实习,该走的都走了,过两日也要去法国首都找1个web前段的见习机会,世界如此大,作者只可以去看看…。

(-①)写在前方

率先图片是自己从互连网络下载的,向这位长辈致敬。作者用的是chrome4九,未有加不相同浏览器的前缀,jquery3.0,图片能源位居了自小编的百度云盘上

(0)知识储备

(-一)写在前方

以此idea不是笔者的,首先向那位长辈致敬。

自家用的是chrome4九, jquery三.0。

完全的次序案例在自身的百度云盘

最近大四实习,该走的都走了,过两日也要去东方之珠找一个web前段的见习机会,世界如此大,作者只可以去看看…。

(0)知识储备

(一)知识计划

a. webkitTransitionEnd

webkit是浏览器前缀,webkitTransitionEnd在联网完结后触发。类似DOM对象.click的形式注册事件,对于webkitTransitionEnd事件是船到江心补漏迟的。

(0)知识储备

a. webkitTransitionEnd

webkit是浏览器前缀,webkitTransitionEnd在连片实现后触发。类似DOM对象.click的方法注册事件,对于webkitTransitionEnd事件是低效的。

a.浏览器x、y、z轴的定义

右边竖代表y轴,右手横代表x轴,左右手摆成2个十字,z轴是即垂直x轴也垂直y轴穿过x、y交点的一条直线。

b. transform:scale(0.8)

已成分基本为准缩放成分,被成分包裹的始末也跟着缩放,成分实际尺寸未有发生物化学,(已总计后的属性值为准),注意jquery3.0的width()、height()方法会获得缩放后的尺码!。对成分margin、top、left不跟着元素的缩放而缩放。该属性不会持续。

a. webkitTransitionEnd

webkit是浏览器前缀,webkitTransitionEnd在过渡达成后触发。类似DOM对象.click的格局注册事件,对于webkitTransitionEnd事件是行不通的。

b. transform:scale(0.8)

已成分基本为准缩放成分,被成分包裹的剧情也随之缩放,成分实际尺寸未有发生物化学,(已总括后的属性值为准),注意jquery三.0的width()、height()方法会获得缩放后的尺码!。对成分margin、top、left不跟着成分的缩放而缩放。该属性不会持续。

b. :nth-of-type(1)

img:nth-of-type(壹),全数有子成分img的父成分的首先个img子成分

body :nth-of-type(1) 等同于body *:nth-of-type(1)

c. #arrow:active

移动是一种持续的作为,已三个div成分为例,当您直接按着鼠标左键或有键不放,就会合作改采纳器。

b. transform:scale(0.8)

已成分基本为准缩放成分,被成分包裹的始末也随之缩放,成分实际尺寸未有产生物化学,(已计算后的属性值为准),注意jquery3.0的width()、height()方法会获得缩放后的尺寸!。对成分margin、top、left不跟着成分的缩放而缩放。该属性不会持续。

c. #arrow:active

活动是一种持续的表现,已3个div成分为例,当你直接按着鼠标左键或有键不放,就会合营改选用器。

(2)代码

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=utf-8>

<script   type=”text/javascript”
src=”debug-jquery-3.0.0.js”></script>

<script   type=”text/javascript” src=”base.js”></script>

<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>

<title>为了生存</title>

<style type=”text/css”>

     *

     {

           margin-top:0px;

           padding:0;

     }

     body

     {

           position:absolute;

     }

     #lol

     {

           width:530px;

           height:530px;

           position:absolute;

          

     }

     #lol img

     {

           display:block;

           position:absolute;

           border:1px #6F0000 solid;   

     }

     #lol img:nth-of-type(1)

     {

           animation: one 10s linear 3s infinite;

     }

     @keyframes one

     {

           to

           {

                 transform: rotateX(360deg);

           }

     }

     #lol img:nth-of-type(2)

     {

           animation: two 10s linear 2s infinite;

     }

     @keyframes two

     {

           to

           {

                 transform: rotateY(360deg);

           }

     }

     #lol img:nth-of-type(3)

     {

           animation: three 10s linear 1s infinite;

     }

     @keyframes three

     {

           to

           {

                 transform:rotateZ(360deg);

           }

     }

</style>

<script type=”text/javascript”>

     $(function()

     {

           $(“#lol”).centerPos();

           //让lol成分水平垂直居中显得,centerPos是自定义函数

     })

$.fn.centerPos = function()

{

     var parent;

     this.each(function(index)

     {

           parent = this.parentNode;

           if(parent == document.body)

           {

                 parent = window;

           }

           var position = $(this).css(“position”);

           if(position == “fixed” || position==”absolute”)

           {

                
$(this).css(“left”,($(parent).width()-this.offsetWidth)/2+”px”)

                        
.css(“top”,($(parent).height()-this.offsetHeight)/2+”px”);

           }

           else

           {

                 window.console.error(“未有设置有效的position值”);

           }

     })

     return this;

}   

</script>

</head

<body>

     <div id=”lol”>

           <img src=”images/main5-pic1.png”>

           <img src=”images/main5-pic2.png”>

           <img src=”images/main5-pic3.png”>

     </div> 

</body>              

</html>                 

                        

                         

d. transform:rotate(45deg)

暗中认可以元素基本为轴心转动成分,如图所示:

4858美高梅 1

transform:rotate(45deg)推行实现后,在0度地点的消息在④五度位置,转动是全体的,注意0度和45度这几个组成,能够围绕圆心弹指时针转动到放2人置,在那么些案例中,大家关切的是因素转动的度数和指针指向区域的涉及。

c. #arrow:active

运动是一种持续的行事,已三个div成分为例,当您平昔按着鼠标左键或有键不放,就会合作改选拔器。

d. transform:rotate(45deg)

暗许以成分基本为轴心转动成分,如图所示:

4858美高梅 2

transform:rotate(4伍deg)试行实现后,在0度地点的音信在4伍度地点,转动是一体化的,注意0度和4伍度这几个组合,能够围绕圆心刹那时针转动到自由地点,在那么些案例中,大家关切的是因素转动的度数和指针指向区域的涉及。

(1)效果图

 4858美高梅 3

d. transform:rotate(45deg)

暗中同意以元素基本为轴心转动元素,如图所示:

4858美高梅 4

transform:rotate(45deg)推行落成后,在0度地点的消息在四五度地点,转动是完全的,注意0度和肆五度这些组合,能够围绕圆心弹指时针转动到自由地方,在那个案例中,大家关注的是因素转动的度数和指针指向区域的涉嫌。

(1)效果图

 4858美高梅 5

(贰)具体代码

(1)效果图

 4858美高梅 6

(二)具体代码

a. html文件

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=utf-8>

<script   type=”text/javascript”
src=”debug-jquery-3.0.0.js”></script>

<script  type=”text/javascript” src=”base.js”></script>

<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>

 

<title>为了生存</title>

<style type=”text/css”>

*

{

     margin:0;

     padding:0;

}

body

{

     position:absolute;

}

#active

{

     width:640px;

     height:640px;

     position:absolute;

     transform:scale(0.8);

}

#dial

{

 

     width:640px;

     height:640px;

     position:absolute;

}

#arrow

{

     width:240px;

     height:252px;

     overflow:hidden;

     position:absolute;

}

#arrow:active

{

     /*鼠标右键按在#arrow上时,成分缩短*/

     transform:scale(0.95);

}

</style>    

</head

<body>

     <div id=”active”>

           <div id=”dial”><img src=”images\lanren.png”
width=”640″ height=”640″/></div>

           <div id=”arrow”><img src=”images\arrow.png”
width=”750″ height=”252″/></div>

     </div>

</body>             

</html>                 

(二)具体代码

a. html文件

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=utf-8>

<script   type=”text/javascript”
src=”debug-jquery-3.0.0.js”></script>

<script  type=”text/javascript” src=”base.js”></script>

<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>

 

<title>为了生存</title>

<style type=”text/css”>

*

{

     margin:0;

     padding:0;

}

body

{

     position:absolute;

}

#active

{

     width:640px;

     height:640px;

     position:absolute;

     transform:scale(0.8);

}

#dial

{

 

     width:640px;

     height:640px;

     position:absolute;

css三转盘抽取奖品,遁地台风。}

#arrow

{

     width:240px;

     height:252px;

     overflow:hidden;

     position:absolute;

}

#arrow:active

{

     /*鼠标右键按在#arrow上时,成分减少*/

     transform:scale(0.95);

}

</style>    

</head

<body>

     <div id=”active”>

           <div id=”dial”><img src=”images\lanren.png”
width=”640″ height=”640″/></div>

           <div id=”arrow”><img src=”images\arrow.png”
width=”750″ height=”252″/></div>

     </div>

</body>             

</html>                 

base.js

$(function()

{

     var $arrow = $(“#arrow”),

           $active = $(“#active”),

           $dial = $(“#dial”),

           rounds = 5*360;      //基础圈数

     $arrow.centerPos();//使成分水平垂直居中、centerPos是自定义函数

     $active.centerPos();

     window.onresize = function()

     {

           $arrow.centerPos();

           $active.centerPos();

     }

     $arrow.click(function()

     {

           if($arrow.data(“ding”))
return;//如果#arrow正在转动,不向下进行

           $arrow.data(“ding”, true);//true代表转动,false表示已停止

           var deg = $.random(0,360);//暴发2个>=0&&<=360的数

           $arrow.data(“deg”,deg);

           $dial.css({

                 transform:”rotate(“+(rounds+deg)+”deg)”,

                 transition:”3s”,

           });

          

     })

     $dial.on(“webkitTransitionEnd”,function()

     {

           //旋转结束推行

           $arrow.data(“ding”,false);

           $dial.css({

                 transition:”none”,//不点名none的话一样transition:”3s”

                 transform:”rotate(“+$arrow.data(“deg”)+”deg)”,

                 /*

                      这么做会从deg(上次)转到伍*360+deg(本次)

                     
要是不这么左第三遍转动之后,再度转动会5*360+deg(上次)转到5*360+deg(本次)

                     

                 */

           });

           var award = getAward();

           alert(award);

     })

     function getAward()

     {

          

           var deg = $arrow.data(“deg”)

           /*

                 有指针的哪位图片开头方向绝对于圆盘往右偏了贰度…

           */

           if ((deg >= 332 && deg <= 360) || (deg > 0 && deg
< 32))

           {

                 return “3网通流量 10M”;

           }

           else if ((deg >= 32 && deg < 92))

           {

                 return “话费20元”;

           }

           else if (deg >= 92 && deg < 152)

           {              

                 return “ipad mini4”;

           }

           else if (deg >= 152 && deg < 212)

           {

                 return “话费5元”;

           }

           else if (deg >= 210 && deg < 272)

           {

                 return “三网通流量 30M”;

           }

           else if (deg >= 272 && deg < 332)

           {

                 return “iPhone7”;

           }

     }

});

$.random = function(min,max,filter)

{

    

     var i,

           n = Math.floor(Math.random()*(max-min+1)+min);

     if(filter != undefined && filter.constructor == Array)

     {

           for(i=filter.length-1;i>-1;i–)

           {

                 if(n == filter[i])

                 {

                      n = Math.floor(Math.random()*(max-min+1)+min)

                      i = filter.length;

                 }

           }

     }

     return n;

}

//top、left依据父成分的宽和高总括

$.fn.centerPos = function()

{

     var parent;

     this.each(function(index)

     {

           parent = this.parentNode;

           if(parent == document.body)

           {

                 parent = window;

           }

           var position = $(this).css(“position”);

           if(position == “fixed” || position==”absolute”)

           {

                 $(this).css(“left”,parent != window
?(parent.offsetWidth-this.offsetWidth)/2:(parent.innerWidth-this.offsetWidth)/2);

                 $(this).css(“top”,parent != window
?(parent.offsetHeight-this.offsetHeight)/2:(parent.innerHeight-this.offsetHeight)/2);

           }

           else

           {

                 window.console.error(“未有设置有效的position值”);

           }

     })

     return this;

}   

function next(current)

{

     var parent = current.parentNode,

           children = parent.children,

           //childNodes、nextSibling maybe contain ObjectText

           length = children.length;

     for(var i=0;i<length;i++)

     {

           if(current == children[i])

                 break;

     }

     //if not lastChild

     if(i<length-1)

     {

           return children[i+1];

     }

     else

     {

           //recursion search until parent == document.body

           if(parent != document.body)

           {

                 return next(parent);

           }

           else

           {

                 window.console.warn(“Can not get next sibling”);

           }

     }

    

}

function getRandomInteger(min,max)

{

     return Math.floor(Math.random()*(max-min+1))+min

}

function imitateMouseEvent(element,type)

{

     var event = document.createEvent(“Events”);

     event.initEvent(type,true,true);

     element.dispatchEvent(event);

}

showMessage.i = 0;

function showMessage(object)

{

     var body = $(“body”)[0];

     var $p =$(“#debugp”);

    

     if($p.length==0)

     {

           $p = $(“<p/>”).attr(“id”,”debugp”);

           $(body).prepend($p);

     }

     $p[0].innerHTML += “<br/>”+(showAttribute.i++)+”   |  
“+object;

}

showAttribute.i=0;

function showAttribute(object,filter)

{

     var body = $(“body”)[0];

     var $p =$(“#debugp”);

    

     if($p.length==0)

     {

           $p = $(“<p/>”).attr(“id”,”debugp”);

           $(body).prepend($p);

     }

     if(getType(filter).indexOf(DataType.string)!=-1)

     {

           for(var a in object)

           {

                 if(a.indexOf(filter)!=-1)

                 {

                      $p[0].innerHTML += a+”  
“+object[a]+”<br/>”;

                 }

           }

     }

     else if(getType(filter) == DataType.RegExp)

     {

           for(var a in object)

           {

                 if(filter.test(a))

                 {

                      $p[0].innerHTML += a+”  
“+object[a]+”<br/>”;

                 }

           }

     }

     else if(getType(filter) == DataType.UNDEFINED)

     {

           for(var a in object)

           {

                 $p[0].innerHTML += a+”   “+object[a]+”<br/>”;

           }   

     }

     else

     {

          
window.console.error(arguments.callee.toString().match(/^function
+(.+)\(/)[1]+”第一个参数应传递字符串或正则表明式”);

     }

     $p[0].innerHTML
+=showAttribute.i+++”————————————–<br/>”

}

function showCollection(collection)

{

     var body = $(“body”)[0];

     var $p =$(“#debugp”);

    

     if($p.length==0)

     {

           $p = $(“<p/>”).attr(“id”,”debugp”);

           $(body).prepend($p);

     }

     for(var i=0;i<collection.length;i++)

     $p[0].innerHTML = collection[i]+”    |”+”<br/>” +
$p[0].innerHTML;

}

function showLength(collection)

{

     var body = $(“body”)[0];

     var $p =$(“#debugp”);

    

     if($p.length==0)

     {

           $p = $(“<p/>”).attr(“id”,”debugp”);

           $(body).prepend($p);

     }

     $p[0].innerHTML = collection.length+”     |”+”<br/>” +     
$p[0].innerHTML;

}

function DataType()

{

    

}

DataType.RegExp = “RegExp”;

DataType.ObjectString = “Objectstring”;

DataType.string = “string”;

DataType.NULL = “null”;

DataType.UNDEFINED = “undefined”;

DataType.ObjectNumber = “Objectnumber”;

DataType.number = “number”;

DataType.ObjectBoolean = “Objectboolean”;

DataType.boolean = “boolean”;

DataType.function = “function”;

DataType.array = “array”;

function getType(type)

{

     if(typeof type == DataType.UNDEFINED)

  {

    return DataType.UNDEFINED;

  }

  else if(typeof type == “object”)

  {

    if(type == null)

    {

      return DataType.NULL ;

    }

    else

    {

                

      if(typeof type.valueOf() == DataType.string)

      {

        return DataType.ObjectString

      }

      else if(typeof type.valueOf() == DataType.number)

      {

        return DataType.ObjectNumber;

      }

      else if(typeof type.valueOf() == DataType.boolean)

      {

        return DataType.ObjectBoolean;

      }

      else if(type instanceof Array)

      {

        return DataType.array;

      }

                 else if(type instanceof RegExp)

                 {

                      return DataType.RegExp;

                 }

                 else if(typeof type.constructor == DataType.function)

                 {

                      return
type.constructor.toString().match(/^function +(.+)\(/)[1];

                 }

                

    }

  }

  else if(typeof type == DataType.function)

  {

    return DataType.function

 

  }

  else

  {

    return typeof type;

  }

}                         

a. html文件

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=utf-8>

<script   type=”text/javascript”
src=”debug-jquery-3.0.0.js”></script>

<script  type=”text/javascript” src=”base.js”></script>

<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>

 

<title>为了生活</title>

<style type=”text/css”>

*

{

     margin:0;

     padding:0;

}

body

{

     position:absolute;

}

#active

{

     width:640px;

     height:640px;

     position:absolute;

     transform:scale(0.8);

}

#dial

{

 

     width:640px;

     height:640px;

     position:absolute;

}

#arrow

{

     width:240px;

     height:252px;

     overflow:hidden;

     position:absolute;

}

#arrow:active

{

     /*鼠标右键按在#arrow上时,元素减弱*/

     transform:scale(0.95);

}

</style>    

</head

<body>

     <div id=”active”>

           <div id=”dial”><img src=”images\lanren.png”
width=”640″ height=”640″/></div>

           <div id=”arrow”><img src=”images\arrow.png”
width=”750″ height=”252″/></div>

     </div>

</body>             

</html>                 

base.js

$(function()

{

     var $arrow = $(“#arrow”),

           $active = $(“#active”),

           $dial = $(“#dial”),

           rounds = 5*360;      //基础圈数

     $arrow.centerPos();//使成分水平垂直居中、centerPos是自定义函数

     $active.centerPos();

     window.onresize = function()

     {

           $arrow.centerPos();

           $active.centerPos();

     }

     $arrow.click(function()

     {

           if($arrow.data(“ding”))
return;//如果#arrow正在转动,不向下举行

           $arrow.data(“ding”, true);//true表示转动,false表示已告1段落

           var deg = $.random(0,360);//产生一个>=0&&<=360的数

           $arrow.data(“deg”,deg);

           $dial.css({

                 transform:”rotate(“+(rounds+deg)+”deg)”,

                 transition:”3s”,

           });

          

     })

     $dial.on(“webkitTransitionEnd”,function()

     {

           //旋转甘休实行

           $arrow.data(“ding”,false);

           $dial.css({

                 transition:”none”,//不内定none的话同样transition:”叁s”

4858美高梅,                 transform:”rotate(“+$arrow.data(“deg”)+”deg)”,

                 /*

                      这么做会从deg(上次)转到5*360+deg(本次)

                     
借使不这么左第二回转动之后,再度转动会五*360+deg(上次)转到5*360+deg(本次)

                     

                 */

           });

           var award = getAward();

           alert(award);

     })

     function getAward()

     {

          

           var deg = $arrow.data(“deg”)

           /*

                 有指针的哪位图片初阶方向相对于圆盘往右偏了二度…

           */

           if ((deg >= 332 && deg <= 360) || (deg > 0 && deg
< 32))

           {

                 return “3网通流量 10M”;

           }

           else if ((deg >= 32 && deg < 92))

           {

                 return “话费20元”;

           }

           else if (deg >= 92 && deg < 152)

           {              

                 return “ipad mini4”;

           }

           else if (deg >= 152 && deg < 212)

           {

                 return “话费5元”;

           }

           else if (deg >= 210 && deg < 272)

           {

                 return “3网通流量 30M”;

           }

           else if (deg >= 272 && deg < 332)

           {

                 return “iPhone7”;

           }

     }

});

$.random = function(min,max,filter)

{

    

     var i,

           n = Math.floor(Math.random()*(max-min+1)+min);

     if(filter != undefined && filter.constructor == Array)

     {

           for(i=filter.length-1;i>-1;i–)

           {

                 if(n == filter[i])

                 {

                      n = Math.floor(Math.random()*(max-min+1)+min)

                      i = filter.length;

                 }

           }

     }

     return n;

}

//top、left依据父元素的宽和高总括

$.fn.centerPos = function()

{

     var parent;

     this.each(function(index)

     {

           parent = this.parentNode;

           if(parent == document.body)

           {

                 parent = window;

           }

           var position = $(this).css(“position”);

           if(position == “fixed” || position==”absolute”)

           {

                 $(this).css(“left”,parent != window
?(parent.offsetWidth-this.offsetWidth)/2:(parent.innerWidth-this.offsetWidth)/2);

                 $(this).css(“top”,parent != window
?(parent.offsetHeight-this.offsetHeight)/2:(parent.innerHeight-this.offsetHeight)/2);

           }

           else

           {

                 window.console.error(“没有安装有效的position值”);

           }

     })

     return this;

}   

function next(current)

{

     var parent = current.parentNode,

           children = parent.children,

           //childNodes、nextSibling maybe contain ObjectText

           length = children.length;

     for(var i=0;i<length;i++)

     {

           if(current == children[i])

                 break;

     }

     //if not lastChild

     if(i<length-1)

     {

           return children[i+1];

     }

     else

     {

           //recursion search until parent == document.body

           if(parent != document.body)

           {

                 return next(parent);

           }

           else

           {

                 window.console.warn(“Can not get next sibling”);

           }

     }

    

}

function getRandomInteger(min,max)

{

     return Math.floor(Math.random()*(max-min+1))+min

}

function imitateMouseEvent(element,type)

{

     var event = document.createEvent(“Events”);

     event.initEvent(type,true,true);

     element.dispatchEvent(event);

}

showMessage.i = 0;

function showMessage(object)

{

     var body = $(“body”)[0];

     var $p =$(“#debugp”);

    

     if($p.length==0)

     {

           $p = $(“<p/>”).attr(“id”,”debugp”);

           $(body).prepend($p);

     }

     $p[0].innerHTML += “<br/>”+(showAttribute.i++)+”   |  
“+object;

}

showAttribute.i=0;

function showAttribute(object,filter)

{

     var body = $(“body”)[0];

     var $p =$(“#debugp”);

    

     if($p.length==0)

     {

           $p = $(“<p/>”).attr(“id”,”debugp”);

           $(body).prepend($p);

     }

     if(getType(filter).indexOf(DataType.string)!=-1)

     {

           for(var a in object)

           {

                 if(a.indexOf(filter)!=-1)

                 {

                      $p[0].innerHTML += a+”  
“+object[a]+”<br/>”;

                 }

           }

     }

     else if(getType(filter) == DataType.RegExp)

     {

           for(var a in object)

           {

                 if(filter.test(a))

                 {

                      $p[0].innerHTML += a+”  
“+object[a]+”<br/>”;

                 }

           }

     }

     else if(getType(filter) == DataType.UNDEFINED)

     {

           for(var a in object)

           {

                 $p[0].innerHTML += a+”   “+object[a]+”<br/>”;

           }   

     }

     else

     {

          
window.console.error(arguments.callee.toString().match(/^function
+(.+)\(/)[1]+”第叁个参数应传递字符串或正则表明式”);

     }

     $p[0].innerHTML
+=showAttribute.i+++”————————————–<br/>”

}

function showCollection(collection)

{

     var body = $(“body”)[0];

     var $p =$(“#debugp”);

    

     if($p.length==0)

     {

           $p = $(“<p/>”).attr(“id”,”debugp”);

           $(body).prepend($p);

     }

     for(var i=0;i<collection.length;i++)

     $p[0].innerHTML = collection[i]+”    |”+”<br/>” +
$p[0].innerHTML;

}

function showLength(collection)

{

     var body = $(“body”)[0];

     var $p =$(“#debugp”);

    

     if($p.length==0)

     {

           $p = $(“<p/>”).attr(“id”,”debugp”);

           $(body).prepend($p);

     }

     $p[0].innerHTML = collection.length+”     |”+”<br/>” +     
$p[0].innerHTML;

}

function DataType()

{

    

}

DataType.RegExp = “RegExp”;

DataType.ObjectString = “Objectstring”;

DataType.string = “string”;

DataType.NULL = “null”;

DataType.UNDEFINED = “undefined”;

DataType.ObjectNumber = “Objectnumber”;

DataType.number = “number”;

DataType.ObjectBoolean = “Objectboolean”;

DataType.boolean = “boolean”;

DataType.function = “function”;

DataType.array = “array”;

function getType(type)

{

     if(typeof type == DataType.UNDEFINED)

  {

    return DataType.UNDEFINED;

  }

  else if(typeof type == “object”)

  {

    if(type == null)

    {

      return DataType.NULL ;

    }

    else

    {

                

      if(typeof type.valueOf() == DataType.string)

      {

        return DataType.ObjectString

      }

      else if(typeof type.valueOf() == DataType.number)

      {

        return DataType.ObjectNumber;

      }

      else if(typeof type.valueOf() == DataType.boolean)

      {

        return DataType.ObjectBoolean;

      }

      else if(type instanceof Array)

      {

        return DataType.array;

      }

                 else if(type instanceof RegExp)

                 {

                      return DataType.RegExp;

                 }

                 else if(typeof type.constructor == DataType.function)

                 {

                      return
type.constructor.toString().match(/^function +(.+)\(/)[1];

                 }

                

    }

  }

  else if(typeof type == DataType.function)

  {

    return DataType.function

 

  }

  else

  {

    return typeof type;

  }

}                         

base.js

$(function()

{

     var $arrow = $(“#arrow”),

           $active = $(“#active”),

           $dial = $(“#dial”),

           rounds = 5*360;      //基础圈数

     $arrow.centerPos();//使成分水平垂直居中、centerPos是自定义函数

     $active.centerPos();

     window.onresize = function()

     {

           $arrow.centerPos();

           $active.centerPos();

     }

     $arrow.click(function()

     {

           if($arrow.data(“ding”))
return;//如果#arrow正在转动,不向下实行

           $arrow.data(“ding”, true);//true代表转动,false表示已偃旗息鼓

           var deg = $.random(0,360);//发生2个>=0&&<=360的数

           $arrow.data(“deg”,deg);

           $dial.css({

                 transform:”rotate(“+(rounds+deg)+”deg)”,

                 transition:”3s”,

           });

          

     })

     $dial.on(“webkitTransitionEnd”,function()

     {

           //旋转截至实践

           $arrow.data(“ding”,false);

           $dial.css({

                 transition:”none”,//不点名none的话同样transition:”三s”

                 transform:”rotate(“+$arrow.data(“deg”)+”deg)”,

                 /*

                      这么做会从deg(上次)转到五*360+deg(本次)

                     
假使不那样左第三次转动之后,再一次转动会伍*360+deg(上次)转到5*360+deg(本次)

                     

                 */

           });

           var award = getAward();

           alert(award);

     })

     function getAward()

     {

          

           var deg = $arrow.data(“deg”)

           /*

                 有指针的哪位图片开端方向相对于圆盘往右偏了二度…

           */

           if ((deg >= 332 && deg <= 360) || (deg > 0 && deg
< 32))

           {

                 return “三网通流量 10M”;

           }

           else if ((deg >= 32 && deg < 92))

           {

                 return “话费20元”;

           }

           else if (deg >= 92 && deg < 152)

           {              

                 return “ipad mini4”;

           }

           else if (deg >= 152 && deg < 212)

           {

                 return “话费5元”;

           }

           else if (deg >= 210 && deg < 272)

           {

                 return “三网通流量 30M”;

           }

           else if (deg >= 272 && deg < 332)

           {

                 return “iPhone7”;

           }

     }

});

$.random = function(min,max,filter)

{

    

     var i,

           n = Math.floor(Math.random()*(max-min+1)+min);

     if(filter != undefined && filter.constructor == Array)

     {

           for(i=filter.length-1;i>-1;i–)

           {

                 if(n == filter[i])

                 {

                      n = Math.floor(Math.random()*(max-min+1)+min)

                      i = filter.length;

                 }

           }

     }

     return n;

}

//top、left遵照父成分的宽和高总结

$.fn.centerPos = function()

{

     var parent;

     this.each(function(index)

     {

           parent = this.parentNode;

           if(parent == document.body)

           {

                 parent = window;

           }

           var position = $(this).css(“position”);

           if(position == “fixed” || position==”absolute”)

           {

                 $(this).css(“left”,parent != window
?(parent.offsetWidth-this.offsetWidth)/2:(parent.innerWidth-this.offsetWidth)/2);

                 $(this).css(“top”,parent != window
?(parent.offsetHeight-this.offsetHeight)/2:(parent.innerHeight-this.offsetHeight)/2);

           }

           else

           {

                 window.console.error(“未有设置有效的position值”);

           }

     })

     return this;

}   

function next(current)

{

     var parent = current.parentNode,

           children = parent.children,

           //childNodes、nextSibling maybe contain ObjectText

           length = children.length;

     for(var i=0;i<length;i++)

     {

           if(current == children[i])

                 break;

     }

     //if not lastChild

     if(i<length-1)

     {

           return children[i+1];

     }

     else

     {

           //recursion search until parent == document.body

           if(parent != document.body)

           {

                 return next(parent);

           }

           else

           {

                 window.console.warn(“Can not get next sibling”);

           }

     }

    

}

function getRandomInteger(min,max)

{

     return Math.floor(Math.random()*(max-min+1))+min

}

function imitateMouseEvent(element,type)

{

     var event = document.createEvent(“Events”);

     event.initEvent(type,true,true);

     element.dispatchEvent(event);

}

showMessage.i = 0;

function showMessage(object)

{

     var body = $(“body”)[0];

     var $p =$(“#debugp”);

    

     if($p.length==0)

     {

           $p = $(“<p/>”).attr(“id”,”debugp”);

           $(body).prepend($p);

     }

     $p[0].innerHTML += “<br/>”+(showAttribute.i++)+”   |  
“+object;

}

showAttribute.i=0;

function showAttribute(object,filter)

{

     var body = $(“body”)[0];

     var $p =$(“#debugp”);

    

     if($p.length==0)

     {

           $p = $(“<p/>”).attr(“id”,”debugp”);

           $(body).prepend($p);

     }

     if(getType(filter).indexOf(DataType.string)!=-1)

     {

           for(var a in object)

           {

                 if(a.indexOf(filter)!=-1)

                 {

                      $p[0].innerHTML += a+”  
“+object[a]+”<br/>”;

                 }

           }

     }

     else if(getType(filter) == DataType.RegExp)

     {

           for(var a in object)

           {

                 if(filter.test(a))

                 {

                      $p[0].innerHTML += a+”  
“+object[a]+”<br/>”;

                 }

           }

     }

     else if(getType(filter) == DataType.UNDEFINED)

     {

           for(var a in object)

           {

                 $p[0].innerHTML += a+”   “+object[a]+”<br/>”;

           }   

     }

     else

     {

          
window.console.error(arguments.callee.toString().match(/^function
+(.+)\(/)[1]+”第1个参数应传递字符串或正则说明式”);

     }

     $p[0].innerHTML
+=showAttribute.i+++”————————————–<br/>”

}

function showCollection(collection)

{

     var body = $(“body”)[0];

     var $p =$(“#debugp”);

    

     if($p.length==0)

     {

           $p = $(“<p/>”).attr(“id”,”debugp”);

           $(body).prepend($p);

     }

     for(var i=0;i<collection.length;i++)

     $p[0].innerHTML = collection[i]+”    |”+”<br/>” +
$p[0].innerHTML;

}

function showLength(collection)

{

     var body = $(“body”)[0];

     var $p =$(“#debugp”);

    

     if($p.length==0)

     {

           $p = $(“<p/>”).attr(“id”,”debugp”);

           $(body).prepend($p);

     }

     $p[0].innerHTML = collection.length+”     |”+”<br/>” +     
$p[0].innerHTML;

}

function DataType()

{

    

}

DataType.RegExp = “RegExp”;

DataType.ObjectString = “Objectstring”;

DataType.string = “string”;

DataType.NULL = “null”;

DataType.UNDEFINED = “undefined”;

DataType.ObjectNumber = “Objectnumber”;

DataType.number = “number”;

DataType.ObjectBoolean = “Objectboolean”;

DataType.boolean = “boolean”;

DataType.function = “function”;

DataType.array = “array”;

function getType(type)

{

     if(typeof type == DataType.UNDEFINED)

  {

    return DataType.UNDEFINED;

  }

  else if(typeof type == “object”)

  {

    if(type == null)

    {

      return DataType.NULL ;

    }

    else

    {

                

      if(typeof type.valueOf() == DataType.string)

      {

        return DataType.ObjectString

      }

      else if(typeof type.valueOf() == DataType.number)

      {

        return DataType.ObjectNumber;

      }

      else if(typeof type.valueOf() == DataType.boolean)

      {

        return DataType.ObjectBoolean;

      }

      else if(type instanceof Array)

      {

        return DataType.array;

      }

                 else if(type instanceof RegExp)

                 {

                      return DataType.RegExp;

                 }

                 else if(typeof type.constructor == DataType.function)

                 {

                      return
type.constructor.toString().match(/^function +(.+)\(/)[1];

                 }

                

    }

  }

  else if(typeof type == DataType.function)

  {

    return DataType.function

 

  }

  else

  {

    return typeof type;

  }

}                         

(-1)写在前方 那几个idea不是本身的,首先向那位长辈致敬。 笔者用的是chrome4玖,
jquery3.0。 完…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有