效果

基本是用CSS实现的，没有用图片，加一丢丢JS。完全没有考虑兼容性。

首先画一个转盘，

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>幸运大转盘</title>

  <style>

    /* 重置默认样式 */

    * {

      margin: 0;

      padding: 0;

      border: none;

      outline: none;

    }

    .wrapper {

      position: relative;

      height: 200px;

      width: 200px;

      padding: 20px;

      margin: 20px;

      background-color: #c0381f;

      box-shadow: #000000 0px 0px 10px;

      border-radius: 50%;

    }

    .panel {

      position: relative;

      height: 200px;

      width: 200px;

      background-color: #b7b7b7;

      border-radius: 100px;

    }

    .pointer {

      position: absolute;

      left: 79px;

      top: 79px;

      z-index: 10;

      height: 30px;

      width: 30px;

      padding: 6px;

      color: #fff899;

      line-height: 15px;

      font-size: 12px;

      text-align: center;

      background-color: #dc5b5b;

      border-radius: 50%;

      border: 1px solid #c0381f;

    }

  </style>

</head>

<body>

  <div class="wrapper">

    <div class="panel">

      <div class="pointer">开始抽奖</div>

    </div>

  </div>

</body>

</html>

效果如下，配色什么的不要在意，可能比较丑。。。

然后写抽奖指针的小箭头，用CSS画三角形是一个比较常见的问题，通过设置width和height为0，然后用border实现。

如图，矩形是由四个三角形边框组成的，只要设置其它边颜色为透明，就可以获得单独的三角形。

这里通过伪元素after实现三角形，并通过绝对定位将三角形定位到中间小圆的顶端。

.pointer::after {

      content: '';

      position: absolute;

      left: 14px;

      top: -24px;

      border-width: 12px 6px;

      border-style: solid;

      border-color: transparent;

      border-bottom-color: #c0381f;

}

现在才像一个指针了。

哦 接下来是实现转盘背景，不同的扇区对应不同的奖品，这样就有一个需求：实现任意角度扇形。

可能会想当然的认为和三角形一样，不过是加一个border-radius而已，高度是圆半径，宽度是tan(θ/2)，但是实现出来的效果和想象并不一样……（可能需要做一些其他操作以达到效果，但是我没想到。

最后还是求助了搜索引擎。不得不承认dalao们实在是太nb了，qaq……通过 linear-gradient 实现想法是真的棒。不过还有好多复杂的实现看的不是很懂= =

How to draw a circle sector in CSS?

Segments in a circle using CSS3

3种纯CSS实现中间镂空的12色彩虹渐变圆环方法

实现就是通过两个正方形取相交区域。

我觉图画的还是挺好的:D

没有用伪元素实现，因为我还要加文字，至于文字的位置，我真的是瞎调的，反正正经写代码也不会这么写= =

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .sector {

            position: absolute;

            width: 100px;

            height: 200px;

            margin: 100px;

            border-radius: 0px 100px 100px 0;

            overflow: hidden;

            transform: rotate(-18deg);

        }

        .sector-inner {

            text-align: center;

            display: block;

            width: 40px;

            padding: 5px 3px 0 57px;

            height: 195px;

            background: #ffeab1;

            transform: translateX(-100px) rotate(36deg);

            transform-origin: right center;

            border-radius: 100px 0 0 100px;

        }

        .sector-inner span {

            display: block;

            transform-origin: center;

            transform: rotate(-19deg);

            color: #d46854;

        }

    </style>

</head>

<body>

    <div class="sector">

        <div class="sector-inner">

            <span>谢谢参与</span>

        </div>

    </div>

</body>

</html>

效果如下，一个带有文字的小扇形~~

OK，现在写一堆扇形放到一开始的转盘上。

现在的代码是酱紫滴~~太长了折起来。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>幸运大转盘</title>

  <style>

    /* 重置默认样式 */

    * {

      margin: 0;

      padding: 0;

      border: none;

      outline: none;

    }

    .wrapper {

      position: relative;

      height: 200px;

      width: 200px;

      padding: 20px;

      margin: 20px;

      background-color: #c0381f;

      box-shadow: #000000 0px 0px 10px;

      border-radius: 50%;

    }

    .panel {

      position: relative;

      height: 200px;

      width: 200px;

      background-color: #b7b7b7;

      border-radius: 100px;

    }

    .sector {

      position: absolute;

      width: 100px;

      height: 200px;

      border-radius: 0px 100px 100px 0;

      overflow: hidden;

      left: 100px;

      top: 0px;

      transform-origin: left center;

    }

    .sector:nth-child(1) {

      transform: rotate(-18deg);

    }

    .sector:nth-child(2) {

      transform: rotate(18deg);

    }

    .sector:nth-child(3) {

      transform: rotate(54deg);

    }

    .sector:nth-child(4) {

      transform: rotate(90deg);

    }

    .sector:nth-child(5) {

      transform: rotate(126deg);

    }

    .sector:nth-child(6) {

      transform: rotate(162deg);

    }

    .sector:nth-child(7) {

      transform: rotate(198deg);

    }

    .sector:nth-child(8) {

      transform: rotate(234deg);

    }

    .sector:nth-child(9) {

      transform: rotate(270deg);

    }

    .sector:nth-child(10) {

      transform: rotate(306deg);

    }

    .sector:nth-child(2n+1) .sector-inner {

      background: #fef6e0;

    }

    .sector:nth-child(2n) .sector-inner {

      background: #ffffff;

    }

    .sector-inner {

      text-align: center;

      display: block;

      width: 40px;

      padding: 5px 3px 0 57px;

      height: 195px;

      transform: translateX(-100px) rotate(36deg);

      transform-origin: right center;

      border-radius: 100px 0 0 100px;

    }

    .sector-inner span {

      display: block;

      transform-origin: center;

      transform: rotate(-19deg);

      color: #d46854;

    }

    .pointer {

      position: absolute;

      left: 79px;

      top: 79px;

      z-index: 10;

      height: 30px;

      width: 30px;

      padding: 6px;

      color: #fff899;

      line-height: 15px;

      font-size: 12px;

      text-align: center;

      background-color: #dc5b5b;

      border-radius: 50%;

      border: 1px solid #c0381f;

    }

    .pointer::after {

      content: '';

      position: absolute;

      left: 14px;

      top: -24px;

      border-width: 12px 6px;

      border-style: solid;

      border-color: transparent;

      border-bottom-color: #c0381f;

    }

  </style>

</head>

<body>

  <div class="wrapper">

    <div class="panel">

      <div class="sector">

        <div class="sector-inner">

          <span>谢谢参与</span>

        </div>

      </div>

      <div class="sector">

        <div class="sector-inner">

          <span> 50 积分</span>

        </div>

      </div>

      <div class="sector">

        <div class="sector-inner">

          <span>谢谢参与</span>

        </div>

      </div>

      <div class="sector">

        <div class="sector-inner">

          <span>100话费</span>

        </div>

      </div>

      <div class="sector">

        <div class="sector-inner">

          <span> 50 积分</span>

        </div>

      </div>

      <div class="sector">

        <div class="sector-inner">

          <span>谢谢参与</span>

        </div>

      </div>

      <div class="sector">

        <div class="sector-inner">

          <span>100话费</span>

        </div>

      </div>

      <div class="sector">

        <div class="sector-inner">

          <span>谢谢参与</span>

        </div>

      </div>

      <div class="sector">

        <div class="sector-inner">

          <span> 50 积分</span>

        </div>

      </div>

      <div class="sector">

        <div class="sector-inner">

          <span>10元话费</span>

        </div>

      </div>

      <div class="pointer">开始抽奖</div>

    </div>

  </div>

</body>

</html>

嘻嘻，现在是抽奖转盘的样子了吧~~~

最后再加点浮夸的灯。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>幸运大转盘</title>

  <style>

    /* 重置默认样式 */

    * {

      margin: 0;

      padding: 0;

      border: none;

      outline: none;

    }

    .wrapper {

      position: relative;

      height: 200px;

      width: 200px;

      padding: 20px;

      margin: 20px;

      background-color: #c0381f;

      box-shadow: #000000 0px 0px 10px;

      border-radius: 50%;

    }

    .light {

      position: absolute;

      height: 10px;

      width: 10px;

      border-radius: 50%;

      top: 5px;

      left: 115px;

      transform-origin: 5px 115px;

    }

    .light:nth-child(2n) {

      background-color: #fafce7;

    }

    .light:nth-child(2n+1) {

      background-color: #ffe58b;

    }

    .light:nth-child(2) {

      transform: rotate(36deg);

    }

    .light:nth-child(3) {

      transform: rotate(72deg);

    }

    .light:nth-child(4) {

      transform: rotate(108deg);

    }

    .light:nth-child(5) {

      transform: rotate(144deg);

    }

    .light:nth-child(6) {

      transform: rotate(180deg);

    }

    .light:nth-child(7) {

      transform: rotate(216deg);

    }

    .light:nth-child(8) {

      transform: rotate(252deg);

    }

    .light:nth-child(9) {

      transform: rotate(288deg);

    }

    .light:nth-child(10) {

      transform: rotate(324deg);

    }

    .panel {

      position: relative;

      height: 200px;

      width: 200px;

      background-color: #b7b7b7;

      border-radius: 100px;

    }

    .sector {

      position: absolute;

      width: 100px;

      height: 200px;

      border-radius: 0px 100px 100px 0;

      overflow: hidden;

      left: 100px;

      top: 0px;

      transform-origin: left center;

    }

    .sector:nth-child(1) {

      transform: rotate(-18deg);

    }

    .sector:nth-child(2) {

      transform: rotate(18deg);

    }

    .sector:nth-child(3) {

      transform: rotate(54deg);

    }

    .sector:nth-child(4) {

      transform: rotate(90deg);

    }

    .sector:nth-child(5) {

      transform: rotate(126deg);

    }

    .sector:nth-child(6) {

      transform: rotate(162deg);

    }

    .sector:nth-child(7) {

      transform: rotate(198deg);

    }

    .sector:nth-child(8) {

      transform: rotate(234deg);

    }

    .sector:nth-child(9) {

      transform: rotate(270deg);

    }

    .sector:nth-child(10) {

      transform: rotate(306deg);

    }

    .sector:nth-child(2n+1) .sector-inner {

      background: #fef6e0;

    }

    .sector:nth-child(2n) .sector-inner {

      background: #ffffff;

    }

    .sector-inner {

      text-align: center;

      display: block;

      width: 40px;

      padding: 5px 3px 0 57px;

      height: 195px;

      transform: translateX(-100px) rotate(36deg);

      transform-origin: right center;

      border-radius: 100px 0 0 100px;

    }

    .sector-inner span {

      display: block;

      transform-origin: center;

      transform: rotate(-19deg);

      color: #d46854;

    }

    .pointer {

      position: absolute;

      left: 79px;

      top: 79px;

      z-index: 10;

      height: 30px;

      width: 30px;

      padding: 6px;

      color: #fff899;

      line-height: 15px;

      font-size: 12px;

      text-align: center;

      background-color: #dc5b5b;

      border-radius: 50%;

      border: 1px solid #c0381f;

    }

    .pointer::after {

      content: '';

      position: absolute;

      left: 14px;

      top: -24px;

      border-width: 12px 6px;

      border-style: solid;

      border-color: transparent;

      border-bottom-color: #c0381f;

    }

  </style>

</head>

<body>

  <div class="wrapper">

    <div class="light"></div>

    <div class="light"></div>

    <div class="light"></div>

    <div class="light"></div>

    <div class="light"></div>

    <div class="light"></div>

    <div class="light"></div>

    <div class="light"></div>

    <div class="light"></div>

    <div class="light"></div>

    <div class="panel">

      <div class="sector">

        <div class="sector-inner">

          <span>谢谢参与</span>

        </div>

      </div>

      <div class="sector">

        <div class="sector-inner">

          <span> 50 积分</span>

        </div>

      </div>

      <div class="sector">

        <div class="sector-inner">

          <span>谢谢参与</span>

        </div>

      </div>

      <div class="sector">

        <div class="sector-inner">

          <span>100话费</span>

        </div>

      </div>

      <div class="sector">

        <div class="sector-inner">

          <span> 50 积分</span>

        </div>

      </div>

      <div class="sector">

        <div class="sector-inner">

          <span>谢谢参与</span>

        </div>

      </div>

      <div class="sector">

        <div class="sector-inner">

          <span>100话费</span>

        </div>

      </div>

      <div class="sector">

        <div class="sector-inner">

          <span>谢谢参与</span>

        </div>

      </div>

      <div class="sector">

        <div class="sector-inner">

          <span> 50 积分</span>

        </div>

      </div>

      <div class="sector">

        <div class="sector-inner">

          <span>10元话费</span>

        </div>

      </div>

      <div class="pointer">开始抽奖</div>

    </div>

  </div>

</body>

</html>

现在转盘CSS部分基本完成。简单写一下JS部分。点击中间的指针时，指针会转，可以拉一条贝塞尔曲线，控制动画的速度。

贝塞尔曲线可以简单的看作是时间-距离曲线，斜率就是速度。因为转盘的速度肯定是先快后慢，随便拉一条。

http://cubic-bezier.com/#.2,.93,.43,1

CSS中添加属性

.pointer {

  // ...

  transition: transform 3s cubic-bezier(.2,.93,.43,1);

}

点击开始抽奖的时候，为中间的指针加一个旋转的角度。这里有一个问题就是不同的扇区抽到的概率是相同的，改成不同应该…也蛮简单的，不过主要是想练下CSS，JS就随便写了。

JS部分代码。。

let getEle = document.getElementsByClassName.bind(document);

let pointer = getEle('pointer')[0];

let result = getEle('result')[0];

let onRotation = false; // 记录当前是否正在旋转，如果正在旋转，就不能继续点击了

let reward = ['谢谢参与', '50积分', '谢谢参与', '100元话费', '50积分',

'谢谢参与', '100元话费', '谢谢参与', '50积分', '10元话费'];

// 根据随机角度获取奖励

let getReward = (function() {

  currentDeg = 0;

  return function() {

    // 转三圈到四圈

    let rotateDeg = Math.random() * 360 + 1080;

    currentDeg += rotateDeg;

    let rewardText = reward[Math.floor((currentDeg + 18) % 360 / 36)]

    return {

      deg: currentDeg,

      text: rewardText === '谢谢参与' ? '很遗憾，您没有获得奖品。' : '恭喜获得: ' + rewardText

    }

  }

})();

pointer.addEventListener('click', () => {

  if (onRotation) return;

  console.log('开始抽奖');

  onRotation = true;

  let nextStatus = getReward();

  console.log(nextStatus)

  result.innerText = nextStatus.text;

  result.style.display = 'none';

  pointer.style.transform = `rotateZ(${nextStatus.deg}deg)`;

})

pointer.addEventListener('transitionend', () => {

  console.log('抽奖结束');

  onRotation = false;

  result.style.display = 'block';

})

现在一个抽奖转盘基本完成了，最后一个需求，如果旁边的等能够亮起来就好了。

至于灯怎么亮，就需要用到CSS3的动画了，我还不太熟悉，先去学习一下>_<

我学完回来了，参考教程http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html，内容不是很多。

animation-name 指定动画名称，

animation-duration 指定动画持续时间，

animation-timing-function 指定动画函数，和transition的函数是一样的，

animation-delay 指定动画延迟多久后执行，

animation-iteration-count 指定动画执行多少次，默认为一次，可以指定为infinite，无限循环。

animation-direction 指定动画多次播放时，一次结束，下一次怎么接上一次，如图。

animation-fill-mode 指定动画结束后停在什么位置，默认回到起始状态，forwards表示让动画停留在结束状态，backwards让动画回到第一帧的状态，both根据animation-direction轮流应用forwards和backwards规则。

animation-play-state 动画执行状态，默认为running，可以设置为pause，动画将在当前状态停止，再改为running时，会接着上一次停止的位置继续执行动画。

使用关键字 keyframes 来定义一个动画。通过百分比指定其中任意几个状态。

尝试着写一下=。=

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div {

            height: 30px;

            width: 30px;

            animation: 1s twinkling 3, 100ms 3s twinkling 3;

        }

        @keyframes twinkling {

            50% { background: red; }

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

这是一个方块，先慢速闪三下，再快速闪三下，最后消失。

animation: 1s twinkling 3;

就相当于

animation-name: twinkling;

animation-duration: 1s;

animation-timing-function: ease;

animation-delay: 0s;

animation-iteration-count: 3;

animation-direction: normal;

animation-fill-mode: none;

animation-play-state: running;

效果

我觉得还可以:P 反正我只能写成这样了。

最后把动画加到转盘的灯上。完成代码（好像颜色变了，咳，那是因为我animation学了太久都掉色了）：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>幸运大转盘</title>

  <style>

    * { /* 重置默认样式 */

      margin: 0;

      padding: 0;

      border: none;

      outline: none;

      user-select: none;

    }

    .wrapper {

      position: relative;

      height: 200px;

      width: 200px;

      padding: 20px;

      margin: 20px;

      background-color: #ff5555;

      box-shadow: #000000 0px 0px 10px;

      border-radius: 50%;

    }

    .light {

      position: absolute;

      height: 10px;

      width: 10px;

      border-radius: 50%;

      top: 5px;

      left: 115px;

      transform-origin: 5px 115px;

    }

    .light-twinkling {

      animation: 1s twinkling 3, 100ms 3s twinkling 3;

    }

    .light:nth-child(2n) {

      background-color: #fafce7;

    }

    .light:nth-child(2n+1) {

      background-color: #ffe58b;

    }

    .light:nth-child(2) {

      transform: rotate(36deg);

    }

    .light:nth-child(3) {

      transform: rotate(72deg);

    }

    .light:nth-child(4) {

      transform: rotate(108deg);

    }

    .light:nth-child(5) {

      transform: rotate(144deg);

    }

    .light:nth-child(6) {

      transform: rotate(180deg);

    }

    .light:nth-child(7) {

      transform: rotate(216deg);

    }

    .light:nth-child(8) {

      transform: rotate(252deg);

    }

    .light:nth-child(9) {

      transform: rotate(288deg);

    }

    .light:nth-child(10) {

      transform: rotate(324deg);

    }

    .panel {

      position: relative;

      height: 200px;

      width: 200px;

      background-color: #b7b7b7;

      border-radius: 100px;

    }

    .sector {

      position: absolute;

      left: 100px;

      top: 0px;

      width: 100px;

      height: 200px;

      font-size: 14px;

      border-radius: 0px 100px 100px 0;

      overflow: hidden;

      transform-origin: left center;

    }

    .sector:nth-child(1) {

      transform: rotate(-18deg);

    }

    .sector:nth-child(2) {

      transform: rotate(18deg);

    }

    .sector:nth-child(3) {

      transform: rotate(54deg);

    }

    .sector:nth-child(4) {

      transform: rotate(90deg);

    }

    .sector:nth-child(5) {

      transform: rotate(126deg);

    }

    .sector:nth-child(6) {

      transform: rotate(162deg);

    }

    .sector:nth-child(7) {

      transform: rotate(198deg);

    }

    .sector:nth-child(8) {

      transform: rotate(234deg);

    }

    .sector:nth-child(9) {

      transform: rotate(270deg);

    }

    .sector:nth-child(10) {

      transform: rotate(306deg);

    }

    .sector:nth-child(2n+1) .sector-inner {

      background: #fef6e0;

    }

    .sector:nth-child(2n) .sector-inner {

      background: #ffffff;

    }

    .sector-inner {

      text-align: center;

      display: block;

      width: 40px;

      padding: 5px 3px 0 57px;

      height: 195px;

      transform: translateX(-100px) rotate(36deg);

      transform-origin: right center;

      border-radius: 100px 0 0 100px;

    }

    .sector-inner span {

      display: block;

      transform-origin: center;

      transform: rotate(-19deg);

      color: #d46854;

    }

    .pointer {

      position: absolute;

      left: 79px;

      top: 79px;

      z-index: 10;

      height: 30px;

      width: 30px;

      padding: 6px;

      color: #fff899;

      line-height: 15px;

      font-size: 12px;

      text-align: center;

      background-color: #ff5350;

      border-radius: 50%;

      border: 1px solid #ff5350;

      transition: transform 3s cubic-bezier(.2,.93,.43,1);

    }

    .pointer::after {

      content: '';

      position: absolute;

      left: 14px;

      top: -24px;

      border-width: 12px 6px;

      border-style: solid;

      border-color: transparent;

      border-bottom-color: #ff5350;

      transform-origin: center;

    }

    .result {

      margin: 20px 60px;

    }

    @keyframes twinkling {

      50% { background: transparent; }

    }

  </style>

</head>

<body>

  <div class="wrapper">

    <div class="light"></div>

    <div class="light"></div>

    <div class="light"></div>

    <div class="light"></div>

    <div class="light"></div>

    <div class="light"></div>

    <div class="light"></div>

    <div class="light"></div>

    <div class="light"></div>

    <div class="light"></div>

    <div class="panel">

      <div class="sector">

        <div class="sector-inner">

          <span>谢谢参与</span>

        </div>

      </div>

      <div class="sector">

        <div class="sector-inner">

          <span> 5 0 积分</span>

        </div>

      </div>

      <div class="sector">

        <div class="sector-inner">

          <span>谢谢参与</span>

        </div>

      </div>

      <div class="sector">

        <div class="sector-inner">

          <span>100元话费</span>

        </div>

      </div>

      <div class="sector">

        <div class="sector-inner">

          <span> 5 0 积分</span>

        </div>

      </div>

      <div class="sector">

        <div class="sector-inner">

          <span>谢谢参与</span>

        </div>

      </div>

      <div class="sector">

        <div class="sector-inner">

          <span>100元话费</span>

        </div>

      </div>

      <div class="sector">

        <div class="sector-inner">

          <span>谢谢参与</span>

        </div>

      </div>

      <div class="sector">

        <div class="sector-inner">

          <span> 5 0 积分</span>

        </div>

      </div>

      <div class="sector">

        <div class="sector-inner">

          <span>10元话费</span>

        </div>

      </div>

      <div class="pointer">开始抽奖</div>

    </div>

  </div>

  <div class="result"></div>

  <script>

    let getEle = document.getElementsByClassName.bind(document);

    let pointer = getEle('pointer')[0];

    let result = getEle('result')[0];

    let lights = Array.prototype.slice.call(getEle('light'));

    let onRotation = false; // 记录当前是否正在旋转，如果正在旋转，就不能继续点击了

    let reward = ['谢谢参与', '50积分', '谢谢参与', '100元话费', '50积分',

    '谢谢参与', '100元话费', '谢谢参与', '50积分', '10元话费'];

    // 根据随机角度获取奖励

    let getReward = (function() {

      currentDeg = 0;

      return function() {

        // 转三圈到四圈

        let rotateDeg = Math.random() * 360 + 1080;

        currentDeg += rotateDeg;

        let rewardText = reward[Math.floor((currentDeg + 18) % 360 / 36)]

        return {

          deg: currentDeg,

          text: rewardText === '谢谢参与' ? '很遗憾，您没有获得奖品。' : '恭喜获得: ' + rewardText

        }

      }

    })();

    pointer.addEventListener('click', () => {

      if (onRotation) return;

      console.log('开始抽奖');

      onRotation = true;

      lights.forEach(light => { light.className += ' light-twinkling'; });

      let nextStatus = getReward();

      console.log(nextStatus)

      result.innerText = nextStatus.text;

      result.style.display = 'none';

      pointer.style.transform = `rotateZ(${nextStatus.deg}deg)`;

    })

    pointer.addEventListener('transitionend', () => {

      console.log('抽奖结束');

      setTimeout(() => { // 等闪烁三下结束

        onRotation = false;

        lights.forEach(light => { light.className = 'light'; });

        result.style.display = 'block';

      }, 300);

    })

  </script>

</body>

</html>

用CSS实现一个抽奖转盘的更多相关文章

  1. css 如何“画”一个抽奖转盘

    主要描述的是如何运用 css 绘制一个抽奖转盘,并运用原生 js 实现转盘抽奖效果. 先来张效果图: 布局 一般来说,转盘一般有四个部分组成:外层闪烁的灯.内层旋转的圆盘.圆盘上的中奖结果.指针. 所 ...

  2. jquery实现抽奖转盘

    用jquery通过配置参数实现抽奖转盘 1.html代码 <!DOCTYPE html> <html lang="zh-CN"> <head> ...

  3. Html5-Canvas实现简易的抽奖转盘

    ###Html5实现抽奖转盘效果 1.实现的基本效果 2.主要的内容 html5中canvas标签的使用 jQueryRotate.js旋转插件 3.主要html代码 <body> < ...

  4. 使用CSS3+jquery.js 实现微信抽奖转盘效果

    上次发表了一篇 微信抽奖转盘活动-效果源码分析 最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 “CSS3”! 为什么不能用CSS3来实现呢? 所以我打算用CSS3来实现这个效果.并不需要依赖 ...

  5. 利用java实现抽奖转盘(着重安全控制)

    本文是针对jquery 实现抽奖转盘作者的一个补充(主要用java去实现转盘结果生成及存储,解决jquery 做法 非法用户采用模拟器实现改变转盘值的风险性),针对jQuery的具体实现,请看案例:h ...

  6. 模仿抽奖转盘,并且用cookie记录历史次数

    自己制作了一个模仿抽奖转盘的小游戏,代码比较简单,规则是只有三次抽奖机会,并且浏览器会记录抽奖的次数, 代码如下 <!DOCTYPE html> <html> <head ...

  7. 利用canvas实现抽奖转盘---转载别人的

    功能需求 转盘要美观,转动效果流畅. 转盘上需要显示奖品图片,并且奖品是后台读取的照片和名字. 转动动画完成后要有相应提示. 获取的奖品具体算法在数据库里操作,前端只提供最后的效果展示.   知识要点 ...

  8. Android实现抽奖转盘

    一.SurfaceView认识及的应用的思路 SurfaceView继承自(extends)View,View是在UI线程中进行绘制: 而SurfaceView是在一个子线程中对自己进行绘制,优势:避 ...

  9. 抽奖转盘（jqueryrotate.js）

    jqueryrotate.js抽奖转盘,使用方便,兼容各浏览器,效果如下图 <!DOCTYPE> <head> <meta http-equiv="Conten ...

随机推荐

  1. C# Common Log function

    public int Log(string info) { info = "-----------------------------" + DateTime.Now.ToStri ...

  2. 单机千万级MQTT连接服务器测试报告

    目标:测试创建1000万客户端连接到服务器端,服务器操作系统 Linux(任意一款发行版服务器版本).分别在两台硬件一样的服务器,其中一台用于服务器端运行,另一台用于创建千万客户端连接客户端机器.在硬 ...

  3. 译文 - Recommender Systems: Issues, Challenges, and Research Opportunities

    REF: 原文 Recommender Systems: Issues, Challenges, and Research Opportunities Shah Khusro, Zafar Ali a ...

  4. Linux文件名匹配和输出重定向--2019-4-24

    1.文件名匹配 例:rm *.bak;   删除结尾是.bak的文件 rm *4*.bak; 删除名称中有“4”的.bak文件 ls *.????; 查找结尾是“.”后有四个字母的文件 2.管道 先进 ...

  5. ubuntu系统下matplotlib中文乱码问题

    参考 [ubuntu系统下matplotlib中文乱码问题 - CSDN博客](https://blog.csdn.net/jeff_liu_sky_/article/details/54023745 ...

  6. Rabin-Karp ACM训练

    求解问题 寻找S中T出现的位置或次数.假设S的长度为n, T的长度为m, 通过枚举S长度为m的字串的hash值与T的hash值比较.此时使用滚动hash的优化使复杂度不为O(mn). 算法说明 滚动h ...

  7. CSS grayscale滤镜+SVG使图片变黑白实例页面

    http:/CSS 地址:/www.runoob.com/cssref/css3-pr-filter.html CSS代码: .gray { -webkit-filter: grayscale(%); ...

  8. php获取当前时间的毫秒数

    floor(microtime()*1000); 用microtime能输出当前的秒的后面8位小数 乘以1000取整数就行了

  9. vue动态添加路由addRoutes之不能将动态路由存入缓存

    在我不知道vue的路由还可以通过addRoutes动态添加时,我只知道vue的路由都是写死在路由表中的,每当跳转时再去加载相应的路由.直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道 ...

  10. rest_framework之权限源码剖析

    权限问题 1.models.py 2.用户类型: 3.views.py: 假设订单相关业务(只有SVIP用户有权限) 假设用户信息相关业务(只有普通用户.VIP有权限) 4.运行结果: 基本使用 以上 ...