大转盘效果

最新推荐文章于 2024-05-02 18:12:22 发布

catherinawwww

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量102

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_38747509/article/details/118607912

版权

//html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>大转盘</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
    />
    <script src="./js/lib/flexible.min.js?_=1526889405610"></script>
    <link href="./css/index.css?_=1526889405610" rel="stylesheet">
</head>

<body>
    <div id="content">
        <!-- 转盘 -->
        <div class="home">
            <div class="luckyDraw" id="turntable" :style="rotateDeg"></div>
            <div class="start" @click="start"></div>
        </div> 
    </div>
    <script type="text/javascript" src="./js/lib/vue.js?_=1526563504633"></script>
    <script type="text/javascript" src="./js/lib/axios.min.js?_=1526563504633"></script>
    <script src="./js/index.min.js?_=1526889405610"></script>
</body>

</html>

```javascript
//js
const prizeNum = {
	"chongdianxian": "0",
	"danji": "1",
	"bijiben": "2",
	"Thanks": "3",
	"xiaofeiji": "4",
};

var app = new Vue({
	el: "#content",
	data: {
		rotateDeg: {},
	},
	methods: {
		start: function () {
			this.rotate(2, "bijiben")
		},
		rotate: function (num, prizeCode) {
			const q = num,
				d = 36;
			this.rotateDeg = {
				webkitTransform: "rotate(" + (2880 + d - (72 * q) + 72) + "deg)",
				transform: "rotate(" + (2880 + d - (72 * q) + 72) + "deg)",
				transition: "6s",
				webkitTransition: "6s"
			}
			window.setTimeout(() => {
				alert("您抽中了笔记本")
			}, 6000)
		}
	}
});

//css
*{
	margin:0;
	padding:0;
}
html,body{
  width:750px;
	height: 100%;

}

.home{

}
.luckyDraw{
  margin: 0 auto;
  background: url("../images/lucky.png") no-repeat;
  height: 686px;
  width: 686px;
  background-size:100% 100%;
  margin-bottom: 39px;
}
.start{
  width: 173px;
  height: 225px;
  background-image: url(../images/go.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 289px;
  top:206px;
}

在这里插入图片描述

catherinawwww

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
大转盘效果

//html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>大转盘</title> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="viewport" co
复制链接

扫一扫