每天学个jquery插件- 做时间选择2
做时间选择2
就着昨天的想法来，算是实现关键动作的功能了，因为没自己计算中间的算数，完全是按照现有规则试了几次把中间的计算混过去了，啊哈，最有意思的还是又搞懂几个css的妙用，啊哈
效果如下
代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>做时间选择</title>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/zsjxz.js"></script>
<link href="css/zsjxz.css" type="text/css" rel="stylesheet" />
<style>
*{
margin: 0px;
padding: 0px;
user-select: none;
}
.box{
border: 1px solid lightgray;
width: 200px;
height: 200px;
margin: 20px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.container{
position: absolute;
width: 100%;
height: 25px;
pointer-events: none;
}
.item{
position: absolute;
height: 100%;
right: 0px;
width: 25px;
border-radius: 50%;
background-color: lightgray;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
position: absolute;
pointer-events: all;
}
.container.small{
width:70%;
}
#main{
margin: 100px;
}
#head{
position: absolute;
border: 1px solid lightgray;
width: 100%;
height: 50px;
top: -50px;
display: flex;
}
.bold{
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
#theh,#them{
flex: 2;
}
#theh:hover,#them:hover{
background-color:lightgray;
cursor: pointer;
}
#thepoint{
flex: 1;
}
.item{
cursor: pointer;
z-index: 999;
}
.item:hover{
background-color: gray;
color: white;
}
.stopclick{
pointer-events: none;
}
</style>
</head>
<body>
<!-- 一个画小时圆盘一个画分钟的 -->
<div class="box" id="hh"></div>
<div class="box" id="mm"></div>
<div class="box" id="main">
<div id="head">
<div id="theh" class="bold">00</div>
<div id="thepoint" class="bold">:</div>
<div id="them" class="bold">00</div>
</div>
</div>
</body>
</html>
<script>
$(function(){
var $theh = $("#theh");
var $them = $("#them");
var $main = $("#main")
//点击那个盘就往对应dom里面渲染啥盘
$theh.click(function(){
$main.attr("data-type",'hh')
drawh($main)
})
$them.click(function(){
$main.attr("data-type",'mm')
drawm($main)
})
//时钟盘点了那个按钮就把对应时间改了
$main.on('click','.item',function(){
var tt = $(this).text();
var type = $main.attr("data-type")
if(type=="hh"){
$theh.text(tt)
}else{
$them.text(tt)
}
})
//时钟盘同样，但是分为点击和拖动,点击的直接在上面实现了，这里实现拖拽
$main.mousedown(function(){
this.flag = true;
}).mouseup(function(){
this.flag=false;
$main.find(".item").removeClass('stopclick');
}).mousemove(function(e){
var type = $main.attr("data-type");
if(this.flag&&type=="mm"){
//假如符合条件就开始获取鼠标的移动的offset，但是在此之前屏蔽掉item的干扰
$main.find(".item").addClass('stopclick');
var x = e.offsetY;
var y = e.offsetX;
//因为一开始就知道这个容器的高宽各200不是嘛，所以中心点自然就是100,100
//然后开始计算角度，校对一个比例，就能算出当前是哪个刻度了，以00为零度，顺时针给转起来，tan计算起来只有±180，所以这里要做一个判断的
var temp = Math.atan2((y-100),(x-100))/0.017453292;
temp = temp<0?360-Math.abs(temp):temp;
temp = (360-temp+180)%360;
temp = parseInt(temp.toFixed(0));
var result = parseInt((60/360)*temp)
$them.text(result);
}else{
$main.find(".item").removeClass('stopclick');
}
})
var $hh = $("#hh");
var $mm = $("#mm");
//画时钟盘
const c1 = 360/12;
const c2 = 360/13
drawh($hh)
function drawh($dom){
$dom.find(".container").remove();
for(var i = 0;i<25;i++){
if(i<12){
var $container = $("<div class='container small'></div>");
var $item = $("<div class='item'>"+i+"</div>");
$item.appendTo($container)
$container.appendTo($dom)
$container.css("transform","rotate("+(c1*(i-3))+"deg)")
$item.css("transform","rotate("+(-c1*(i-3))+"deg)")
}else{
var $container = $("<div class='container'></div>");
var $item = $("<div class='item'>"+i+"</div>");
$item.appendTo($container)
$container.appendTo($dom)
$container.css("transform","rotate("+(c2*(i-3))+"deg)")
$item.css("transform","rotate("+(-c2*(i-3))+"deg)")
}
}
}
drawm($mm)
//画分钟盘，秒盘同理
function drawm($dom){
$dom.find(".container").remove();
for(var i = 0;i<60;i++){
if(i%5==0){
var index= i.toString().length<=1?"0"+i.toString():i.toString();
var $container = $("<div class='container'></div>");
$container.appendTo($dom)
var $item = $("<div class='item'>"+index+"</div>");
$item.appendTo($container);
$container.css("transform","rotate("+(c1*((i/5)-3))+"deg)")
$item.css("transform","rotate("+(-c1*((i/5)-3))+"deg)")
}
}
}
})
</script>
思路如下
- 就着昨天渲染表盘的动作继续，这里面有几个点昨天没想清楚，今天又弄明白一点，因为我需要点击的item是放在辅助容器的container里面的，因为是用了旋转，并且会覆盖住，让items无法被点击
- 这就很烦，我之前倒是通过确定旋转的起点，把一根柱子中心旋转变成一条边的中心旋转甩一圈，这样子就不会覆盖住前面一个的容器了，但是我的内容只转了一个周期还好，但是假如像这个表中的小时选择，我转了两圈，那咋办，总会被盖住
- 所以后面想到了pointer-event：none这个属性，直接让这个容器不能触发任何事件，把它变成一个无情的布局工具就行了，然后给里面的item又给回all,这样子就能点击了！
- 然后就是在做分钟的拖拽根据角度的变化这里，两个点是可以计算出一个正切值的，所以我用上次记下来的公式直接计算了结果，然后东拼西凑，把一开始的±180变成了输出结果为0-360的角度，并且把角度和表盘的对上了，这样子就可以直接计算出对应角度下的分钟的刻度值了，具体看代码
- 完事，碎觉~