美文网首页小程序
JS 画转盘点名

JS 画转盘点名

作者: 北冥有鱼_425c | 来源:发表于2019-09-25 20:39 被阅读0次

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 400px;
height: 400px;
background: purple;
border-radius: 50%;
margin: 0 auto;
margin-top: 100px;
position: relative;
z-index: 0;
}
.pointer {
border-left: 150px solid red;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
z-index: 99;
/* 旋转中心 */
transform-origin: 0 10px;
transition: all 3s;
}
.start {
width: 100px;
height: 40px;
text-align: center;
display: block;
margin: 0 auto;
margin-top: 50px;
color: blueviolet;
font-size: 22px;
}

/* 画扇形 */
.rotary {
    width: 400px;
    height: 400px;
    background: purple;
    border-radius: 50%;
    margin: 0 auto;
    margin-top: 100px;
    position: relative;
    z-index: 0;
    box-sizing: border-box;
    overflow: hidden;
}
.list01 {
    list-style: none;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -40px;
    border-right: 250px solid yellow;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    text-align: right;
}
li::after {
    content: '孙强';
    position: absolute;
    right: -190px;
    top: -12px;
    z-index: 100;
    color: black;
    font-weight: 700;
    font-size: 20px;

}
.list02 {
    list-style: none;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -40px;
    border-right: 250px solid pink;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    transform-origin: 0 40px;
    transform: rotate(18deg);
}
.list03 {
    list-style: none;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -40px;
    border-right: 250px solid blue;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    transform-origin: 0 40px;
    transform: rotate(36deg);
}
.list04 {
    list-style: none;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -40px;
    border-right: 250px solid #F6E236;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    transform-origin: 0 40px;
    transform: rotate(54deg);
}
.list05 {
    list-style: none;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -40px;
    border-right: 250px solid #027FFF;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    transform-origin: 0 40px;
    transform: rotate(72deg);
}
.list06 {
    list-style: none;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -40px;
    border-right: 250px solid #F8931F;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    transform-origin: 0 40px;
    transform: rotate(90deg);
}
.list07 {
    list-style: none;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -40px;
    border-right: 250px solid #994789;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    transform-origin: 0 40px;
    transform: rotate(108deg);
}
.list08 {
    list-style: none;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -40px;
    border-right: 250px solid #45D24C;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    transform-origin: 0 40px;
    transform: rotate(126deg);
}
.list09 {
    list-style: none;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -40px;
    border-right: 250px solid #C0C0C0;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    transform-origin: 0 40px;
    transform: rotate(144deg);
}
.list10 {
    list-style: none;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -40px;
    border-right: 250px solid #02F7EB;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    transform-origin: 0 40px;
    transform: rotate(162deg);
}
.list11 {
    list-style: none;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -40px;
    border-right: 250px solid #82AB55;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    transform-origin: 0 40px;
    transform: rotate(180deg);
}
.list12 {
    list-style: none;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -40px;
    border-right: 250px solid #F15206;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    transform-origin: 0 40px;
    transform: rotate(198deg);
}
.list13 {
    list-style: none;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -40px;
    border-right: 250px solid #3A4DC4;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    transform-origin: 0 40px;
    transform: rotate(216deg);
}
.list14 {
    list-style: none;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -40px;
    border-right: 250px solid #43BABC;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    transform-origin: 0 40px;
    transform: rotate(234deg);
}
.list15 {
    list-style: none;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -40px;
    border-right: 250px solid #FCE800;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    transform-origin: 0 40px;
    transform: rotate(252deg);
}
.list16 {
    list-style: none;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -40px;
    border-right: 250px solid #FF81FF;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    transform-origin: 0 40px;
    transform: rotate(270deg);
}
.list17 {
    list-style: none;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -40px;
    border-right: 250px solid #00FB06;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    transform-origin: 0 40px;
    transform: rotate(288deg);
}
.list18 {
    list-style: none;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -40px;
    border-right: 250px solid #F206E6;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    transform-origin: 0 40px;
    transform: rotate(306deg);
}
.list19 {
    list-style: none;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -40px;
    border-right: 250px solid #20FF00;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    transform-origin: 0 40px;
    transform: rotate(324deg);
}
.list20 {
    list-style: none;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -40px;
    border-right: 250px solid #00FCCF;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    transform-origin: 0 40px;
    transform: rotate(342deg);
}
</style>

</head>
<body>
<div class="box">
<div class="pointer" id="point" style="transform: rotate(0);"></div>
<ul class="rotary">
<li class="list01">孙强</li>
<li class="list02"></li>
<li class="list03"></li>
<li class="list04"></li>
<li class="list05"></li>
<li class="list06"></li>
<li class="list07"></li>
<li class="list08"></li>
<li class="list09"></li>
<li class="list10"></li>
<li class="list11"></li>
<li class="list12"></li>
<li class="list13"></li>
<li class="list14"></li>
<li class="list15"></li>
<li class="list16"></li>
<li class="list17"></li>
<li class="list18"></li>
<li class="list19"></li>
<li class="list20"></li>
</ul>
</div>
<button class="start" id="btn" >开始</button>

<!-- 画扇形 -->
<!-- <ul class="rotary">
    <li class="list01">孙强</li>
    <li class="list02"></li>
    <li class="list03"></li>
    <li class="list04"></li>
    <li class="list05"></li>
    <li class="list06"></li>
    <li class="list07"></li>
    <li class="list08"></li>
    <li class="list09"></li>
    <li class="list10"></li>
    <li class="list11"></li>
    <li class="list12"></li>
    <li class="list13"></li>
    <li class="list14"></li>
    <li class="list15"></li>
    <li class="list16"></li>
    <li class="list17"></li>
    <li class="list18"></li>
    <li class="list19"></li>
    <li class="list20"></li>
</ul> -->
<script>
    // 获取按钮
    var btn = document.getElementById( 'btn' )
    console.log( btn )
    // 获取指针
    var point = document.querySelector( '#point' )
    console.log( point  )

    // 字符串截取方法一：
    btn.onclick = function(){
        var rand = Math.ceil( Math.random()*720 )
        console.log(  rand)
        var deg = point.style.transform

        // 字符串截取方法一：
        var deg1 = deg.slice( 7 )
        var temp = parseInt( deg1 ) + rand

        console.log( deg )
        console.log( deg1 )
        // deg = 'rotate(' + temp + 'deg)'
        point.style.transform = 'rotate(' + temp + 'deg)'
        // console.log( point.style.transform = 'rotate(' + temp + 'deg)' )
    }

    // 字符串截取方法二
    // btn.onclick = function(){
    //     var rand = Math.ceil( Math.random()*360 )
    //     var deg = point.style.transform
    //     console.log( rand )
    //     var deg1 = deg.slice( 7, deg.length - 4)        //从第7个截取到倒数第4个
    //     console.log( deg1 )
    //     var temp = rand + parseInt( deg1 )
    //     console.log( temp )
    //     point.style.transform = 'rotate(' + temp + 'deg)'
    // }



</script>

</body>
</html>

相关文章

网友评论

    本文标题：JS 画转盘点名

    本文链接：https://www.haomeiwen.com/subject/pfuzectx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    小程序

    关于我们|服务条款|联系我们|JS 画转盘点名|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！