转盘-拯救选择困难
- 效果图
- 简介
- 代码
效果图
简介
每到饭点就纠结吃什么，不如直接roll点。
- 在词条框中输入选项，选项用逗号（中英都可）隔开。
- 点击设置词条，会根据词条（没有输入则获取代码中的默认词条）绘制等比例扇形图。
- 点击start 开始旋转，根据旋转角度计算结果，旋转角度以及旋转时间是完全随机的，有时会很快有时会很慢。
注意：选项不宜过多，虽然对功能没影响，不过文本会显示不开。另外可以将文件传到手机随身携带，没有过多的脚本，大部分浏览器兼容
代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>转盘</title><style>.base{width: 400px;margin: 20px auto;}.wrap {position: relative;width: 400px;height: 400px;}#cv {position: relative;border-radius: 100%;border: 1px solid #f4f4f4;box-shadow: 8px 5px 10px 2px #ddd;}.pointer {position: absolute;width: 100%;height: 100%;left: 0;top: 0;}.pointer-center,.pointer-line {position: absolute;border: 1px solid #ddd;background: #fff;}.pointer-center {left: 0;right: 0;top: 0;bottom: 0;margin: auto;width: 20px;height: 20px;border-radius: 100%;}.pointer-line {left: 0;right: 0;top: calc(33% + 17px);bottom: 0;margin: auto;width: 8px;height: 33%;border-radius: 0 0 4px 4px/0 0 50% 50%;border-top: 0;}.handle {display: block;width: auto;height: 30px;padding: 3px 10px;margin: 20px auto 0;line-height: 30px;font-size: 20px;font-weight: bold;color: #F44336;text-align: center;cursor: pointer;border: 1px solid #D0D0D0;border-radius: 3px;}.handle:hover {color: mediumseagreen;}#custom {width: 400px;height: 100px;margin-top: 20px;border-radius: 3px;padding: 2px;outline: none;border: 1px solid #D0D0D0;}</style>
</head>
<body>
<div class="base"><div class="wrap"><canvas id="cv" width="400px" height="400px"></canvas><div class="pointer"><i class="pointer-center"></i><i class="pointer-line"></i></div></div><span class="handle" id="start">start</span><textarea type="text" id="custom"></textarea><div class="handle" id="setting">设置词条</div><div style="font-size: 14px;text-align: center">设置转盘选项，不输入则添加默认值</div><div class="handle" id="see" style="height:auto">查看词条</div>
</div>
<script>var defaultStr = '选项1，选项2，选项3，选项4，选项5';var colors = ['#92dfff', '#ffb884', '#b5ff80', '#f7ff45'];var setting = document.getElementById('setting'),custom = document.getElementById('custom'),see = document.getElementById('see');setting.addEventListener('click', function () {render(custom.value)});see.addEventListener('click',function(){this.innerHTML=defaultStr.split(/，|,/).join('<br>');});function render(str) {var itemStr = str || defaultStr;var items = itemStr.split(/，|,/).map(function (item) {return {label: item}});var len_items = items.length, len_colors = colors.length;//len_items % len_colors < len_colors 多出的items 部分从颜色盘的顺位取色避免相邻重色//计算开始顺位索引var ondex = len_items - len_items % len_colors;//匹配颜色var i;for (i = 0; i < ondex; i++) {items[i].color = colors[i % len_colors];}for (; i < items.length; i++) {items[i].color = colors[i % len_colors + 1];}var drawing, start, context, cx, cy;//创建画布document.querySelector('.wrap').innerHTML = document.querySelector('.wrap').innerHTML;drawing = document.getElementById('cv');start = document.getElementById('start');context = drawing.getContext("2d");cx = drawing.width / 2;cy = drawing.height / 2;//绘制var per = 2 * Math.PI / items.length;//各扇区角度var startAngle = 0.5 * Math.PI, endAngle = startAngle + per;//初始角度//重置中心点context.translate(cx, cy);items.forEach(function (item) {context.beginPath();context.moveTo(0, 0);//中心点context.lineTo(0, cy);//正方向context.arc(0, 0, cy, startAngle, endAngle);context.lineTo(0, 0);context.fillStyle = item.color;context.fill();context.closePath();//绘制文字context.rotate(0.5 * per);context.font = '400 12px Arial';context.textAlign = 'center';context.fillStyle = '#000';context.fillText(item.label, 0, cy * 0.8);//旋转画板context.rotate(0.5 * per);});start.addEventListener('click', function () {var angle, time;//随机旋转角度angle = parseInt(Math.random() * 8000);time = 4 + angle / 360 * 0.5;drawing.style = 'transform:rotate(0deg);transition:none';setTimeout(function () {drawing.style = 'transform:rotate(' + angle + 'deg);transition:transform ' + time + 's cubic-bezier(0.15, 0.72, 0.25, 1) 0s';//计算旋转角度相对于初始角度偏角占360度的比例setTimeout(function () {var anglePer, rollNum,result;anglePer = angle % 360 / 360;//旋转过的面板数(注意是逆向旋转)rollNum = Math.ceil(anglePer / (1 / len_items));result = items[len_items - rollNum].label;//输出结果console.log(result);alert(result);}, time * 1000)})})}</script>
</body>
</html>
