网站设置访问密码,百度指数api,泸州市往建局建设银行网站名称,app拉新转盘-拯救选择困难效果图简介代码效果图 简介
每到饭点就纠结吃什么#xff0c;不如直接roll点。
在词条框中输入选项#xff0c;选项用逗号#xff08;中英都可#xff09;隔开。点击设置词条#xff0c;会根据词条#xff08;没有输入则获取代码中的默认词条#xf…
转盘-拯救选择困难效果图简介代码效果图 简介
每到饭点就纠结吃什么不如直接roll点。
在词条框中输入选项选项用逗号中英都可隔开。点击设置词条会根据词条没有输入则获取代码中的默认词条绘制等比例扇形图。点击start 开始旋转根据旋转角度计算结果旋转角度以及旋转时间是完全随机的有时会很快有时会很慢。
注意选项不宜过多虽然对功能没影响不过文本会显示不开。另外可以将文件传到手机随身携带没有过多的脚本大部分浏览器兼容
代码
!DOCTYPE html
html langen
headmeta charsetUTF-8title转盘/titlestyle.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 classbasediv classwrapcanvas idcv width400px height400px/canvasdiv classpointeri classpointer-center/ii classpointer-line/i/div/divspan classhandle idstartstart/spantextarea typetext idcustom/textareadiv classhandle idsetting设置词条/divdiv stylefont-size: 14px;text-align: center设置转盘选项不输入则添加默认值/divdiv classhandle idsee styleheight:auto查看词条/div
/div
scriptvar 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.innerHTMLdefaultStr.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
