web建站教程

  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. seo教程
  6. 前端知识
  7. 百度echarts
  8. php入门
    nodejs
    mockjs
    reactjs
    mysql
    wordpress
    织梦cms
    帝国cms
    git教程
    IT知识
    模板下载

利用js做一个大转盘代码(旅游盲盒)

164 ℃
     
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>旅游盲盒转盘</title>
    <script type="text/javascript">
      var info = [
	"长城(北京)",
 ​	"故宫(北京)",
 ​	"天安门广场(北京)",
 ​	"颐和园(北京)",
 ​	"鸟巢(北京)",
 ​	"北京欢乐谷(北京)",
	 ​"十三陵(北京)",
	 ​"北京大观园(北京)",
	 ​"恭王府(北京)",
	 ​"天坛公园(北京)",
	 ​"香山公园(北京)",
	 ​"鼓浪屿(厦门)",
	 ​"厦门大学(厦门)",
	 ​"南普陀寺(宁波)",
	 ​"杭州西湖(杭州)",
	 ​"千岛湖(杭州)",
	 ​"上海外滩(上海)",
	 ​"东方明珠塔(上海)",
	 ​"朱家角古镇(上海)",
	 ​"南京夫子庙(南京)"
 ​     ];
      var color = [];
      var step = 2 * Math.PI / info.length;
      var outerR = 150;
      var interR = 50;
      var beginAngle = 50;
      var radio = 0.95;
      var t = null;
      window.onload = function() {
        for (var i = 0; i < info.length; i++) {
          color.push(getColor());
        }
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        context.translate(250, 250);
        init(context);
        document.getElementById("btn").onclick = function() {
          if (t) {
            return false;
          }
          var step = beginAngle + Math.random() * info.length;
          var angle = 0;
          t = setInterval(function() {
            step *= radio;
            if (step <= 0.1) {
              clearInterval(t);
              t = null;
              var pos = Math.ceil(angle / 36);
              var res = info[info.length - pos];
              context.save();
              context.beginPath();
              context.font = "12px 微软雅黑";
              context.fillStyle = "#f00";
              context.textAlign = "center";
              context.textBaseline = "middle";
              context.fillText(res, 0, 0);
              context.restore();
            } else {
              context.clearRect( - 250, -250, 500, 500);
              angle += step;
              if (angle > 360) {
                angle -= 360;
              }
              context.save();
              context.beginPath();
              context.rotate(angle * Math.PI / 180);
              init(context);
              context.restore();
            }
          },
          30);
        };
      };
      function init(context) {
        for (var i = 0; i < info.length; i++) {
          context.save();
          context.beginPath();
          context.moveTo(0, 0);
          context.fillStyle = color[i];
          context.arc(0, 0, outerR, i * step, (i + 1) * step);
          context.fill();
          context.restore();
        }
        context.save();
        context.beginPath();
        context.fillStyle = "#fff";
        context.arc(0, 0, interR, 0, 2 * Math.PI);
        context.fill();
        context.restore();
        for (var i = 0; i < info.length; i++) {
          context.save();
          context.beginPath();
          context.fillStyle = "#000";
          context.font = "10px 微软雅黑";
          context.textBaseline = "middle";
          context.rotate(i * step + step / 2);
          context.fillText(info[i], 160, 0);
          context.restore();
        }
      }
      function getColor() {
	var r = Math.floor(Math.random()*19*10+60);    //生成随机颜色
	var g = Math.floor(Math.random()*19*10+60);
	var b = Math.floor(Math.random()*18*10+70);
        return "rgb(" + r + "," + g + "," + b + ")";
      }
    </script>
  </head>
  
  <body>
    <div>
      <canvas id="canvas" width="500px" height="500px"></canvas>
      <button id="btn" style="margin-top:20px;">let's go</button>
    </div>
  </body>

</html>

点击查看示例

js判断AdBlock广告是否开启拦截

js复制内容根据文章字数多少自动添加不同的版权信息

Moment.js库的基本用法

利用moment.js 库获取当前日期昨天、今天、明天

原生js获取当前日期昨天、今天、明天(2种方法)

标签: js转盘

上面是“利用js做一个大转盘代码(旅游盲盒)”的全面内容,想了解更多关于 js 内容,请继续关注web建站教程。

当前网址:https://ipkd.cn/webs_13534.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

本文共计2203个字,预计阅读时长15分钟
AI工作站-收录全球各行各业AI应用,轻轻松松做事!
BI模板合集
上一篇: 抖音联合方正打造免费可商用品牌字体——抖音美好体
下一篇: 推荐一个在线图文转视频、AI 数字人工具——一帧秒创(免费赠送100分钟)
x