js实现一个金属密码旋钮锁效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js实现一个金属密码旋钮锁效果代码，在手机端预览后可在规定时间内旋转密码锁解锁

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<title></title>
<style>
    body{
	background: #15191f;
}
.number{
	width: 200px;height: 60px;
	position: fixed;top:10px;left: 50%;
	margin-left: -80px;
}
.number .num{
	height: 60px;text-align: center;color: #fff;
	font-size: 68px;line-height: 60px;
}
.light{
	text-align: center;
}
.light i{
	width: 20px;height: 20px;background: #ccc;
	display: inline-block; border-radius: 50%;
	margin-left: 10px;z-index: 999999;
}
.light i.on{
	background: #090;
}
.button{
	width: 360px;height: 360px;
	background:url(//repo.bfw.wiki/bfwrepo/image/60eb7375786a9.png) no-repeat;background-size: 100%;
	position: fixed;top: 50%;left: 50%;
	margin-left:-180px;margin-top: -160px;
}

.button .btn_a{
	width: 280px;height: 280px;
	background: url(//repo.bfw.wiki/bfwrepo/image/60eb7389e0b8d.png) no-repeat;background-size: 100%;
	border-radius: 50%;position: absolute;left: 50%;
	top: 50%;margin: -125px 0 0 -140px;color: #fff;
	line-height:280px; 
}
.button .btn_b{
	width: 200px;height: 200px;
	background: url(//repo.bfw.wiki/bfwrepo/image/60eb7389e0b8d.png) no-repeat;background-size: 100%;
	border-radius: 50%;position: absolute;left: 50%;
	top: 50%;margin: -85px 0 0 -100px;color: #000;
	line-height:140px;
}
.button .btn_c{
	width: 120px;height: 120px;
	background: url(//repo.bfw.wiki/bfwrepo/image/60eb7389e0b8d.png) no-repeat;background-size: 100%;
	border-radius: 50%;position: absolute;left: 50%;
	top: 50%;margin: -45px 0 0 -60px;color: #000;
	line-height:120px; 
}


.timer{
	width: 200px;height: 60px;color:#fff;
	position: fixed;bottom: 10px;left: 50%;margin-left: -100px;
	font-size: 46px;text-align: center;
}

.debug{
	width: 40%;height: 30px;background: #ccc;border-radius: 10px;
	text-align: center;line-height: 30px;color: #fff;
}
</style>
	<style>
		h3{padding-left: 20px;color: #FFFFFF}
	</style>
</head>
<body>
	<h3>请在移动端查看效果PC端无法两个手指旋转的角度</h3>
	<div class="number">
		<div class="num" id="num"></div>
		<div class="light" id="light">
			<i></i><i></i><i></i>
		</div>
	</div>
	<div class="button">
		<div class="btn_a" id="btn_a"></div>
		<div class="btn_b" id="btn_b"></div>
		<div class="btn_c" id="btn_c"></div>

	</div>
	<div class="timer" id="timer"></div>

	<div class="debug" id="debug"></div>

	

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zepto.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/alloy_finger.js"></script>
	<script>
	    
	    function random(a,b){
	return parseInt(Math.random()*(b+1-a)+a);
}

function d(txt){
	$('#debug').html(txt);
	//document.getElementById('debug').innerHTML =txt;//原生js写法
}

var g =new Object();
g.setting =function(){//初始化参数的函数
	g.config ={
		maxAngle:180,//做大旋转角度
		maxGe:9,//最大刻度
	};
	g.angles ={//记录了按钮们现在旋转角度,包括手指松开的时候的角度
		btn1:0,
		btn2:0,
		btn3:0
	};
	g.light ={//标记灯的点亮情况
		a:false,b:false,c:false,
	};
	var n1 =random(1,9)*100;
	var n2 =random(1,9)*10;
	var n3 =random(1,9)*1;
	g.num= n1+n2+n3;
}
g.init =function(){//初始化
	
	g.setting();//设置初始化参数

	var btn1 = document.getElementById('btn_a');//原生js需要旋转的对象
	var btn2 = document.getElementById('btn_b');//原生js需要旋转的对象
	var btn3 = document.getElementById('btn_c');//原生js需要旋转的对象
	
	new AlloyFinger(btn1,{
		rotate:function(evt){
			//evt.angle代表两个手指旋转的角度
			g.angles.btn1 += evt.angle;//累加角度
			if(g.angles.btn1<0){ //必须是是判断传递过来的ang,此时它等于g.angles.btn1或2,3,
				g.angles.btn1 =0;//必须让ang等于0,因为它现在等于g.angles.btn1或者2,3
			}
			if(g.angles.btn1 > g.config.maxAngle){
				g.angles.btn1= g.config.maxAngle;
			}
			//d(g.angles.btn1);

			g.rotate(btn1,g.angles.btn1);//调用旋转方法,把需要旋转的对象传递过去给他转
			g.judge(g.angles.btn1,'a');//执行判断
		},
	});

	new AlloyFinger(btn2,{
		rotate:function(evt){
			//evt.angle代表两个手指旋转的角度
			g.angles.btn2 += evt.angle;//累加角度
			if(g.angles.btn2<0){ //必须是是判断传递过来的ang,此时它等于g.angles.btn1或2,3,
				g.angles.btn2 =0;//必须让ang等于0,因为它现在等于g.angles.btn1或者2,3
			}
			if(g.angles.btn2 > g.config.maxAngle){
				g.angles.btn2= g.config.maxAngle;
			}

			g.rotate(btn2,g.angles.btn2);//调用旋转方法,把需要旋转的对象传递过去给他转
			g.judge(g.angles.btn2,'b');//执行判断
		},
	});

	new AlloyFinger(btn3,{
		rotate:function(evt){
			//evt.angle代表两个手指旋转的角度
			g.angles.btn3 += evt.angle;//.........完整代码请登录后点击上方下载按钮下载查看