白学的小知识[概率转盘]

最新推荐文章于 2024-06-14 11:01:38 发布

Chen-HaHa

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量31

点赞数 2

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/c_made_c/article/details/134203391

版权

HTML代码：

		<style type="text/css">
			.boss {
				width: 400px;
				height: 400px;
				border: 5px solid #000;
				margin: 0 auto;
				border-radius: 50%;
				position: relative;
			}
			.box1 {
				width: 2px;
				height: 200px;
				position: absolute;
				background-color: #000;
				top: 0;
				left: 50%;
				margin-left: -1px;
				transform-origin: bottom;
			}
			.box2 {
				width: 1px;
				height: 200px;
				background-color: red;
				position: absolute;
				top: 0;
				left: 50%;
				transform-origin: bottom;
				z-index: 99;
				transition: 2s;
			}
		</style>
	</head>
	<body>
		<div class="boss">
			<div class="box2"></div>
		</div>
		
		份数：<input type="number" id="inputs" placeholder="请输入份数"/>
		<button type="button" onclick="func()">确定份数</button>
		<button type="button" onclick="myFunc()">点击旋转</button>
		<div class="boss1"></div>
	</body>

JS代码：

<script type="text/javascript">
		var inputs = document.getElementById("inputs");
		var boss = document.querySelector(".boss");
		var boss1 = document.querySelector(".boss1");
		// 点击确定分成多少等份
		var num = 0;
		function func(){
			boss.innerHTML = "<div class='box2'></div>";
			boss1.innerHTML = "";
			num = inputs.value;
			if(num<=1){
				return;
			}
			for(var i=0;i<num;i++){
				var divs = document.createElement("div");
				var inp = document.createElement("input");
				divs.className = "box1";
				divs.style.transform = `rotate(${360/num*i}deg)`
				boss.appendChild(divs);
				boss1.appendChild(inp);
			}
		}
		var sum = 0;
		function myFunc(){
			var arrs = [];
			var nums = 0;
			var box2 = document.querySelector(".box2");
			var boss1_inp = document.querySelectorAll(".boss1 input");
			for(var j=0;j<boss1_inp.length;j++){
				nums+= Number(boss1_inp[j].value);
				for(var i=0;i<boss1_inp[j].value;i++){
					arrs.push(j+1)
				}
			}
			if(nums>100){
				console.log("总和值不能大于100");
				alert("总和值不能大于100");
			}else{
				var aa = arrs[Math.floor(Math.random()*arrs.length)];
				var bb = Math.floor(Math.random()*360/boss1_inp.length);
				sum += 1;
				box2.style.transform = `rotate(${aa*360/boss1_inp.length+1080*sum-bb}deg)`;
			}
		}
	</script>

结果如下：