转盘"/>
吃啥大转盘
经常跟朋友出去吃饭，选择太困难了所以写了个简单的转盘，直接copy到txt文本然后把文件后缀改成html即可。
需要换食物直接在文件中找到 list 值按照格式替换一下即可。
效果：
代码块：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>吃啥？</title><style type="text/css">body {text-align: center;}button {cursor: pointer;}.box {width: 500px;height: 500px;margin: 10px auto;position: relative;overflow: hidden;display: flex;justify-content: center;align-items: center;}.main {width: 100%;height: 100%;box-sizing: border-box;border: 5px solid black;border-radius: 50%;background: rgba(128, 128, 128, 0.49);overflow: hidden;position: relative;transition: all 3s cubic-bezier(0.46, 0.03, 0.52, 0.96);}.pointer {width: 50px;height: 50px;background: white;border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 9;}.pointer-bar {width: 60px;height: 25px;background: white;position: absolute;left: 50%;top: 50%;transform: translate(0, -50%);}.pointer-cursor {width: 25px;height: 25px;position: absolute;left: 85px;top: 50%;transform: translate(-50%, -50%) rotateZ(45deg);background: white;}.part {height: 100%;width: 50%;position: absolute;top: 0;left: 50%;transform-origin: left center;z-index: 1;}.bg {width: 100%;height: 100%;}.title {transform: translate(0, -50%);transform-origin: left top;width: 100%;height: auto;text-align: center;font-size: 30px;color: white;position: absolute;top: 50%;left: 0;padding-left: 85px;box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.winner {font-size: 30px;color: red;font-weight: bold;}</style></head><body><div class="box"><div class="main" ontransitionend="end()"><div id="temp" class="part" style="display: none;"><div class="bg"></div><div class="title"></div></div></div><div class="pointer"><div class="pointer-bar"></div><div class="pointer-cursor"></div></div></div><button onclick="start()">开始</button><div class="winner"></div><script type="text/javascript">var rotate = 0;var random = function(num) {return Math.random() * num;};var randomColor = function() {return 'rgb(' + random(250) + ', ' + random(250) + ', ' + random(250) + ')';};var list = [{ title: '华莱士', color: randomColor() },{ title: '荣记', color: randomColor() },{ title: '猪脚饭', color: randomColor() },{ title: '螺蛳粉', color: randomColor() },{ title: '麻辣烫', color: randomColor() },{ title: '糖水', color: randomColor() },{ title: '麦当劳', color: randomColor() },{ title: '兰州拉面', color: randomColor() },{ title: '木桶饭', color: randomColor() },{ title: '再抽一次', color: randomColor() }];var perAngle = 360 / list.length;var main = document.querySelector('.main');var temp = document.querySelector('#temp');for (var i in list) {var item = list[i];var newNode = temp.cloneNode(true);newNode.style.display = 'block';newNode.style.transform = 'rotateZ(' + (perAngle * i + perAngle / 2) + 'deg)';newNode.querySelector('.bg').style.background = item.color;if (list.length > 2) {var p = this.perAngle / 2; // 每份的角度两等分var d = Math.tan(p * Math.PI / 180) * 100; // 对边的长度var x = (100 - d) / 2; // 每份对边实际百分比newNode.style.clipPath = `polygon(0% 50%, 100% ${x}%, 100% ${100 - x}%)`;}newNode.querySelector('.title').innerHTML = item.title;main.appendChild(newNode);}var isRunning = false;function start() {if (isRunning) {console.warn('isRunning');return;}isRunning = true;document.querySelector('.winner').innerHTML = '';rotate += random(360) + 360 * 5; // 多转5圈main.style.transform = 'rotateZ(-' + rotate + 'deg)';}function end() {isRunning = false;console.log(rotate);var index = Math.floor(rotate / perAngle) % list.length;var winner = list[index];document.querySelector('.winner').innerHTML = '去吃：' + winner.title;}</script></body>
</html>更多推荐
吃啥大转盘
发布评论