jquery实现可自定义抽奖选项和标题的大转盘抽奖效果代码-html代码-BFW代码库

代码语言：html

所属分类：大转盘

代码描述：jquery实现可自定义抽奖选项和标题的大转盘抽奖效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html style="background: #fffff5;">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="yes" name="apple-touch-fullscreen" />
    <meta content="telephone=no,email=no" name="format-detection" />
    <meta content="maximum-dpr=2" name="flexible" />
    <meta content="modeName=750-12" name="grid" />
    <title></title>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/flexible.js"></script>
    <style>
        .overflow {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    a {
      text-decoration: none;
    }
    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }
    .clearfix {
      *zoom: 1;
    }
    input,
    textarea,
    select {
      outline: none;
    }
    .minInput {
      border: none;
      outline: none;
      font-family: "黑体";
      background: transparent;
    }
    .border_box {
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      /* Firefox */
      -webkit-box-sizing: border-box;
      /* Safari */
    }
    i,
    e {
      font-style: normal;
    }
    a:link {
      text-decoration: none;
    }
    .TurntablePage .TurntableBox {
      text-align: center;
    }
    .TurntablePage .TurntableBox .title {
      text-align: center;
      color: #333;
      font-size: 0.48rem;
      padding-bottom: 0.26666667rem;
      padding-top: 0.26666667rem;
    }
    .TurntablePage .TurntableBox .turnplate {
      width: 8.26666667rem;
      height: 8.26666667rem;
      margin: 0 auto;
      position: relative;
    }
    .TurntablePage .TurntableBox .turnplate canvas {
      width: 100%;
      height: 100%;
    }
    .TurntablePage .TurntableBox .turnplate img {
      width: 1.6rem;
      position: absolute;
      left: 50%;
      top: 2.82666667rem;
      transform: translateX(-50%);
    }
    .TurntablePage .editBox {
      text-align: center;
    }
    .TurntablePage .editBox a {
      display: inline-block;
      padding: 0.13333333rem 0.4rem 0.13333333rem 0.4rem;
      font-size: 0.34666667rem;
      border: 1px solid #d2d2d2;
      border-radius: 0.10666667rem;
      color: #333;
      position: relative;
      z-index: 10000;
    }
    .TurntablePage .editBox .done {
      border: 1px solid #ff9c22;
      color: #fff;
      background: #ff9c22;
      display: none;
    }
    .TurntablePage .warning {
      text-align: center;
      padding-top: 0.4rem;
      padding-bottom: 0.4rem;
      font-size: 0.34666667rem;
      color: #bfbdbd;
    }
    .TurntablePage .editContent {
      padding-left: 0.37333333rem;
      padding-right: 0.37333333rem;
      display: none;
      padding-bottom: 0.4rem;
    }
    .TurntablePage .editContent h1 {
      font-size: 0.37333333rem;
      color: #999;
      line-height: 0.8rem;
      padding-top: 0.13333333rem;
    }
    .TurntablePage .editContent .title {
      border-bottom: 1px solid #e2aa2d;
      position: relative;
    }
    .TurntablePage .editContent .title input {
      width: 100%;
      border: none;
      outline: none;
      font-family: "黑体";
      background: transparent;
      color: #333;
      font-size: 0.37333333rem;
      height: 0.73333333rem;
    }
    .TurntablePage .editContent .title a {
      display: block;
      position: absolute;
      right: 0;
      bottom: 0.24rem;
      height: 0.32rem;
      width: 0.32rem;
      background: url(../images/delete.png) no-repeat;
      background-size: 100% 100%;
      display: none;
    }
    .TurntablePage .editContent .optionBox .options {
      padding-bottom: 0.13333333rem;
      border-bottom: 1px solid #e2aa2d;
      position: relative;
    }
    .TurntablePage .editContent .optionBox .options input {
      width: 100%;
      border: none;
      outline: none;
      font-family: "黑体";
      background: transparent;
      color: #333;
      font-size: 0.37333333rem;
      height: 0.73333333rem;
    }
    .TurntablePage .editContent .optionBox .options a {
      display: block;
      position: absolute;
      right: 0;
      bottom: 0.24rem;
      height: 0.32rem;
      width: 0.32rem;
      background: url(//repo.bfw.wiki/bfwrepo/icon/5d8351c1dcdea.png) no-repeat;
      background-size: 100% 100%;
      display: none;
    }
    .TurntablePage .editContent .btns {
      overflow: hidden;
    }
    .TurntablePage .editContent .btns a {
      padding-top: 0.2rem;
      font-size: 0.34666667rem;
      color: #FF9C22;
      display: inline-block;
    }
    .TurntablePage .editContent .btns .addInput {
      float: left;
    }
    .TurntablePage .editContent .btns .done {
      float: right;
    }
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/awardRotate.min.js"></script>
</head>

<body>
    <div class="TurntablePage" style="padding-top: 50px;">
        <div class="TurntableBox" style="display: none;">
            <div class="title allTitle">送女友什么生日礼物？</div>
            <div class="turnplate">
                <canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
                <img class="pointer" src="//repo.bfw.wiki/bfwrepo/images/zhuanpan/startgo.png" />
            </div>
        </div>
        <div class="editBox">
            <a href="javascript:;" class="editBtn">开始吧</a>
        </div>
        <div class="warning">
            选择困难症者的助选神器。<br/>让选择变成娱乐。<br/>本游戏仅供娱乐，对结果不承担任何责任
        </div>
        <div class="editContent">
            <h1>请输入主题</h1>
            <div class="title">
                <input type="text" id="title" value="" />
                <a href="javascript:;" class="delete"></a>
            </div>
            <h1>请输入选项（最少2组）</h1>
            <div class="optionBox">
                <div class="options"><input type="text" placeholder="输入新选项(最多五个字符)" />
                    <a href="javascript:;" class="delete"></a>
                </div>
                <div class="options"><input type="text" placeholder="输入新选项(最多五个字符)" />
                    <a href="javascript:;" class="delete"></a>
                </div>
            </div>
            <div class="btns">
                <a href="javascript:;" class="addInput">新增</a>
                <a href="javascript:;" class="done">完成</a>
            </div>
        </div>
    </div>
</body>

</html>
<script type="text/javascript">
    //页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
    		var turnplate={
    				restaraunts:[],				//大转盘奖品名称
    				colors:[],					//大转盘奖品区块对应背景颜色
    				outsideRadius:192,			//大转盘外圆的半径
    				textRadius:150,				//大转盘奖品位置距离圆心的距离
    				insideRadius:20,			//大转盘内圆的半径
    				startAngle:0,				//开始角度
    				bRotate:false				//false:停止;ture:旋转
    		};
    		//动态添加大转盘的奖品与奖品区域背景颜色
    		turnplate.restaraunts = ["衣服", "首饰", "化妆品",'包包','鞋子','大餐','旅游']
    		colorsArr = ["#FFF4D6", "#FFFFFF",'#fff0c8'];
    		returnColor();
    		function returnColor(){
    			v.........完整代码请登录后点击上方下载按钮下载查看