获取可见Div的ID，但在所有方法中均失败 [英] Get id of a visible Div, failed in all methods
本文介绍了获取可见Div的ID，但在所有方法中均失败的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
am试图获取我的第一个纺车的可见Div id，总是将值设为0.我想要可见部分的确切id.任何帮助将不胜感激
am trying to get the visible Div id of my first spinning wheel , Always am getting the value as 0. I want the exact id of visible part. Any help would be appreciated
$("div.slot").not(:hidden").prop("id");
$("div.slot").not(":hidden").prop("id");
使用上面的代码，但是得到了结果.
Used above code, But am getting the result.
//note parseInt
//note stop
var person = ['Mom','Dad','Friend','Teacher'];
var situation = ['Driving','Walking','chatting','Watching'];
var clicks = true;
var spinCount = 0;
var lifeCount = 4;
function go(){
addpersonSlots($("#slots_a .wrapper"));
moveSlots($("#slots_a .wrapper"),'a');
addSituationSlots($("#slots_b .wrapper"));
moveSlots($("#slots_b .wrapper"));
}
$(document).ready(
function(){
addpersonSlots($("#slots_a .wrapper"));
addSituationSlots($("#slots_b .wrapper"));
}
);
function addpersonSlots(jqo){
for(var i = 0; i < 15; i++){
var ctr = Math.floor(Math.random()*person.length);
jqo.append("<div class='slot' id="+i+">"+person[ctr]+"</div>");
}
}
function addSituationSlots(jqo){
for(var i = 0; i < 15; i++){
var ctr = Math.floor(Math.random()*situation.length);
jqo.append("<div class='slot' id="+i+">"+situation[ctr]+"</div>");
}
}
function moveSlots(jqo){
var time = 1000;
time += Math.round(Math.random()*1000);
jqo.stop(true,true);
var marginTop = parseInt(jqo.css("margin-top"), 10)
marginTop -= (7 * 100)
jqo.animate(
{"margin-top":marginTop+"px"},
{'duration' : time, 'easing' : "linear"}).promise().done(function ()
{
alert($("div.slot").not(":hidden").prop("id"));
});
}
.first-step-div{
background:#dddddd;
margin:0 auto;
text-align:center;
padding:80px 0px;
position:relative;
}
#back_link{
position: absolute;
left: 34px;
bottom: 28px;
}
.problem-count{
height:45px;
width:50px;
border-radius:10px;
margin-bottom:10px;
background:#e7e8e9;
}
.problem-count span{
position: relative;
top: 4px;
font-size:25px;
font-weight:700;
}
.label-text{
font-size:20px;
color:#444;
font-weight:600;
}
.earned-dibbs{
font-size:40px;
font-weight:600;
}
.problem-count.active{
height:50px;
width:50px;
border-radius:10px;
margin-bottom:10px;
background:#fff !important;
}
.sticky-notes{
padding:30px;
}
.round-1{
background:#fff;
margin:0 auto;
text-align:center;
border-radius:15px;
width:320px;
padding:50px 0px;
}
.problem-text{
background: #fff;
border-radius: 10px;
overflow: auto;
width: 376px;
font-size: 16px;
text-align: left;
padding: 15px;
color:#58585a;
min-height: 172px;
max-height:172px;
}
.problem-user-icon{
height:25px;
width:25px;
background:#18b1a0;
margin-bottom:10px;
}
.round-label{
font-size:30px;
color:#f05f9d;
font-weight:700;
}
.round-label-text{
font-size:24px;
color:#18b1a0;
cursor:pointer;
}
.count-knowls div{
display:inline;
}
.knowls-num, .dibbs-num{
font-size:25px;
font-weight:700;
}
.spin-title{
font-size:20px;
padding:8px 15px;
text-align:center;
background:#ddd;
border-radius:10px;
font-weight:700;
width:268px;
position: relative;
top: 8px;
}
.title-border{
border:5px dotted #999;
}
.page-header{
margin:0px;
}
#rcorners_parent {
position: relative;
background: #ddd;
padding: 20px;
border-radius: 15px 50px 50px 15px / 8% 80% 80% 8%;
overflow: hidden;
padding: 42px 0px 32px 0px;
}
#rcorners_parent::after {
content: "";
position: absolute;
top: 10%;
left: -15px;
width: 25px;
height: 80%;
background-color: #bdbec0;
border-radius: 100%;
}
#slots_a {
position: relative;
background: #fff;
padding: 20px;
width: 170px;
height: 100px;
border-radius: 10px 50px 50px 10px / 8% 80% 80% 8%;
overflow: hidden;
display:inline-block;
margin-right:15px;
}
#slots_a::after {
content: "";
position: absolute;
top: 10%;
left: -15px;
width: 25px;
height: 80%;
background-color: #109582;
border-radius: 100%;
display:inline-block;
margin-right:15px;
}
#slots_b {
position: relative;
background: #fff;
padding: 20px;
width: 225px;
height: 100px;
border-radius: 10px 50px 50px 10px / 8% 80% 80% 8%;
overflow: hidden;
display:inline-block;
margin-right:15px;
}
#slots_b::after {
content: "";
position: absolute;
top: 10%;
left: -15px;
width: 25px;
height: 80%;
background-color: #109582;
border-radius: 100%;
display:inline-block;
margin-right:15px;
}
#slots_c {
position: relative;
background: #18b1a0;
padding: 20px;
width: 225px;
height: 100px;
border-radius: 10px 50px 50px 10px / 8% 80% 80% 8%;
overflow: hidden;
display:inline-block;
}
#slots_c::after {
content: "";
position: absolute;
top: 10%;
left: -15px;
width: 25px;
height: 80%;
background-color: #109582;
border-radius: 100%;
display:inline-block;
}
.slot {
font-size:32px;
}
.slots .wrapper{
margin-top:6px;
width:100px;
}
.slots .slot{
width:100px;
height:117px;
text-align:center;
}
.spin-person{
font-size:16px;
}
.nob-img{
position: absolute;
top: 18px;
right: -26px;
}
.spin{
background:#18b1a0 !important;
border:1px solid #18b1a0 !important;
color:#fff !important;
font-weight:600 !important;
}
.spin:hover{
background:#18b1a0 !important;
border:1px solid #18b1a0 !important;
color:#fff !important;
font-weight:600 !important;
}
.spin-button{
padding:10px 34px;
border-radius:14px;
font-weight:600;
font-size:20px;
}
.pink{
background:#f05f9d;
border:1px solid #f05f9d;
color:#fff;
font-weight:600;
}
.pink:hover{
background:#f05f9d;
border:1px solid #f05f9d;
color:#fff;
font-weight:600;
}
.pink-button{
padding: 10px 11px;
border-radius: 14px;
font-weight: 600;
font-size: 16px;
}
.step-one, .step-two{
background:#e1e65d !important;
border-radius:25px;
font-size:20px;
color:#fff;
border-color:#e1e65d !important;
font-weight:600;
padding:10px 15px;
cursor:pointer;
}
.step-three{
background:#f05e9d !important;
border-radius:25px;
font-size:20px;
color:#fff;
border-color:#f05e9d !important;
font-weight:600;
padding:10px 15px;
cursor:pointer;
}
.step-four{
background:#54cbec !important;
border-radius:25px;
font-size:20px;
color:#fff;
border-color:#54cbec !important;
font-weight:600;
padding:10px 15px;
cursor:pointer;
}
.glyphicon-triangle-bottom{
position:relative;
top:4px;
}
.gif-title{
color:#f074a9;
font-size:18px;
font-weight:600;
text-align:center;
margin-top:10px;
}
.col-centered{
float: none;
margin: 0 auto;
}
.gif-box{
text-decoration:none;
cursor:pointer;
}
.gif-box:hover{
text-decoration:none;
cursor:pointer;
}
.orange-button{
padding:10px 34px;
border-radius:14px;
font-weight:600;
font-size:20px;
}
.btn-container{
margin:18px 0px;
}
.draw-steps{
border:2px dashed #666;
border-radius:10px;
margin-bottom:30px;
}
.step-num{
color:#666;
font-size:50px;
font-weight:600;
position:relative;
top:10px;
}
.idea-steps-label{
font-size:18px;
text-align:left;
}
.draw-title{
color:#54cbec;
font-size:20px;
text-align:left;
font-weight:600;
margin-bottom:10px;
}
a:hover{
text-decoration:none !important;
}
.btn.grey {
background: grey none repeat scroll 0 0;
border-color: grey;
color: #fff;
cursor:not-allowed !important;
pointer-events:auto !important;
}
.glyphicon-circle-arrow-left{
left: -10px;
}
#back_link .glyphicon{
font-size:48px !important;
color:#818285 !important;
}
#back_link .glyphicon:hover{
color:#2abbb5 !important;
}
@media screen and (max-width: 600px){
#back_link {
position:absolute;
bottom:5px;
left:5px;
}
#back_link .glyphicon{
font-size:35px !important;
}
.step-one, .step-two, .step-three, .step-four{
font-size:18px;
}
}
.sticky {
margin: 0;
padding: 8px 10px;
width:205px;
height:200px;
font-size: 1.4em;
border:1px #E8Ds47 solid;
background:#f2f4ce;
box-shadow: 3px 3px 5px #666;
-moz-box-shadow: 3px 3px 5px #666;
-webkit-box-shadow: 3px 3px 5px #666;
}
.sticky p {
text-align: center;
}
.sticky textarea {
width:184px;
height:180px;
background:#f2f4ce;
border-bottom:none !important;
}
.sticky ol {
margin: 12px;
}
.r-index{
z-index: 0;
}
.a-index{
z-index: 99;
}
.sticky-container {
position: relative;
}
.sticky {
position: absolute;
}
/*time container*/
button[data-setter] {
outline: none;
background: transparent;
border: none;
font-family: 'Roboto';
font-weight: 300;
font-size: 18px;
width: 25px;
height: 30px;
color: #F7958E;
cursor: pointer;
}
button[data-setter]:hover { opacity: 0.5; }
.time-container {
position: relative;
top: 130px;
width: 300px;
margin: 0 auto;
text-align: center;
}
.setters {
position: absolute;
left: 85px;
top: 75px;
}
.minutes-set {
float: left;
margin-right: 28px;
}
.seconds-set { float: right; }
.controlls {
position: absolute;
left: 37%;
top: 52px;
text-align: center;
}
.display-remain-time {
font-weight: 700;
font-size: 32px;
color: #fff;
}
#pause {
outline: none;
background: transparent;
border: none;
margin-top: 10px;
width: 50px;
height: 50px;
position: relative;
}
.play::before {
display: block;
content: "";
position: absolute;
top: 8px;
left: 16px;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 22px solid #F7958E;
}
.pause::after {
content: "";
position: absolute;
top: 8px;
left: 12px;
width: 15px;
height: 30px;
background-color: transparent;
border-radius: 1px;
border: 5px solid #F7958E;
border-top: none;
border-bottom: none;
}
#pause:hover { opacity: 0.8; }
.e-c-base {
fill: none;
stroke: #fff;
stroke-width: 4px
}
.e-c-progress {
fill: none;
stroke: #18b1a0;
stroke-width: 10px;
transition: stroke-dashoffset 0.7s;
-webkit-transition: stroke-dashoffset 0.7s;
}
.e-c-pointer {
fill: #FFF;
stroke: #F7958E;
stroke-width: 2px;
}
#e-pointer { transition: transform 0.7s; -webkit-transition: -webkit-transform: 0.7s; }
.sticky-note-div{
background:#f2f4ce;
box-shadow: 5px 5px 5px #666;
-moz-box-shadow: 5px 5px 5px #666;
-webkit-box-shadow: 5px 5px 5px #666;
height:215px;
width:22%;
display:inline-block;
margin-right:2%;
margin-bottom:10px;
position:relative;
cursor:pointer;
}
.sticky-note-div img{
position: absolute;
right: 5px;
top: 5px;
}
.sticky-note-div:last-child{
margin-right:0px;
}
@media only screen and (max-width: 768px) {
.nob-img {
position: absolute;
top: 41px;
right: -26px;
}
#slots_a {
width:160px;
margin-right:15px;
}
#slots_b {
width:205px;
margin-right:15px;
}
#slots_c {
width:205px;
margin-right:0px;
}
.time-container {
position: relative;
top: 35px;
}
}
@media only screen and (max-width: 540px) {
.nob-img {
position: absolute;
top: 262px;
right: -22px;
}
#slots_a, #slots_b, #slots_c {
width:210px;
margin-right:0px;
margin-bottom:10px;
}
.problem-text{
visibility:hidden;
}
}
.card{
background:#fff;
margin-bottom:40px;
}
.card .tab-content{
max-width:100% !important;
font-size:18px !important;
min-height: 300px;
max-height:514px;
overflow: auto;
}
.card .nav-tabs { border-bottom: 2px solid #DDD; }
.card .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
.card .nav-tabs > li > a { border: none; color: #ffffff;background: #58585a; font-size:16px;font-weight:600;}
.card .nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; color: #58585a !important; background: #fff; }
.card .nav-tabs > li > a::after { content: ""; background: #58585a; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; -webkit-transition: all 250ms ease 0s; transform: scale(0);-webkit-transform: scale(0); }
.card .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1);-webkit-transform: scale(1); }
.card .tab-nav > li > a::after { background: #58585a none repeat scroll 0% 0%; color: #fff; }
.card .tab-pane { padding: 15px 0; }
.card .tab-content{padding:20px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:relative;">
<div id="rcorners_parent">
<div class="slots" id="slots_a">
<div class="wrapper" ></div>
</div>
<div class="slots" id="slots_b">
<div class="wrapper" ></div>
</div>
<div id="spin_btn_div">
<div class="btn-container" style="margin-bottom:0px;">
<button id="proceed_btn" style="display:none;font-size:20px;" class="btn pink pink-button shooter-btn" onClick="go();">Proceed</button>
<button id="spin_btn" style="margin-left:10px;margin-right:10px;" class="btn spin spin-button shooter-btn" onClick="go();">Spin</button>
</div>
</div></div>
</div>
推荐答案
请检出添加的函数intersectRect，该函数测试两个边界框是否相交，并获取可见的插槽getVisibleSlot.
Please check out the added function intersectRect, which tests if two bounding boxes intersect, and the function to get the visible slots getVisibleSlot.
我还修改了go函数的逻辑，以便在那里定义promise处理程序，因为我需要一个范围变量.
I also modified the logic of your go function, to define the promise handler there because I needed a scope variable.
我在评论中添加了我所考虑的逻辑.
I added in the comments the logic I thought out.
//note parseInt
//note stop
function intersectRect(r1, r2) {
return !(r2.left > r1.right ||
r2.right < r1.left ||
r2.top > r1.bottom ||
r2.bottom < r1.top);
}
function getVisibleSlot($parent) {
var boundingRect = $parent.get(0).getBoundingClientRect();
$found = null;
/** last one to pass te test is the one.
this is because the element above the visible one will have a tiny portion
visible.
but the .each parses from "top to bottom" so the last match is the right one,
because the element under the "visible" element will not test as visible.
**/
$parent.find('div.slot').each(function(index, element) {
// get the bounding boxes.
var newRect = element.getBoundingClientRect();
// check for overlap(if it's visible)
if(intersectRect(boundingRect, newRect)) {
$found = $(element);
}
});
return $found;
}
var person = ['Mom','Dad','Friend','Teacher'];
var situation = ['Driving','Walking','chatting','Watching'];
var clicks = true;
var spinCount = 0;
var lifeCount = 4;
function go(){
var run = 0;
var done = function ()
{
/**
only run when the second wheel is done spinning.
defined here so we can make use of a scoped variable run to count the number
of completed animations.
Needed to define here, because they use a random time to spin.
*/
if(run >= 1) {
var $person = getVisibleSlot($('#slots_a'));
var $situation = getVisibleSlot($('#slots_b'));
console.log($person.text(),'is',$situation.text());
}
else {
run++;
}
};
addpersonSlots($("#slots_a .wrapper"));
moveSlots($("#slots_a .wrapper"),done);
addSituationSlots($("#slots_b .wrapper"));
moveSlots($("#slots_b .wrapper"),done);
}
$(document).ready(
function(){
addpersonSlots($("#slots_a .wrapper"));
addSituationSlots($("#slots_b .wrapper"));
}
);
function addpersonSlots(jqo){
for(var i = 0; i < 15; i++){
var ctr = Math.floor(Math.random()*person.length);
jqo.append("<div class='slot' id="+i+">"+person[ctr]+"</div>");
}
}
function addSituationSlots(jqo){
for(var i = 0; i < 15; i++){
var ctr = Math.floor(Math.random()*situation.length);
jqo.append("<div class='slot' id="+i+">"+situation[ctr]+"</div>");
}
}
function moveSlots(jqo, complete){
var time = 1000;
time += Math.round(Math.random()*1000);
jqo.stop(true,true);
var marginTop = parseInt(jqo.css("margin-top"), 10)
marginTop -= (7 * 100)
jqo.animate(
{"margin-top":marginTop+"px"},
{'duration' : time, 'easing' : "linear"}).promise().done(complete);
}
.first-step-div{
background:#dddddd;
margin:0 auto;
text-align:center;
padding:80px 0px;
position:relative;
}
#back_link{
position: absolute;
left: 34px;
bottom: 28px;
}
.problem-count{
height:45px;
width:50px;
border-radius:10px;
margin-bottom:10px;
background:#e7e8e9;
}
.problem-count span{
position: relative;
top: 4px;
font-size:25px;
font-weight:700;
}
.label-text{
font-size:20px;
color:#444;
font-weight:600;
}
.earned-dibbs{
font-size:40px;
font-weight:600;
}
.problem-count.active{
height:50px;
width:50px;
border-radius:10px;
margin-bottom:10px;
background:#fff !important;
}
.sticky-notes{
padding:30px;
}
.round-1{
background:#fff;
margin:0 auto;
text-align:center;
border-radius:15px;
width:320px;
padding:50px 0px;
}
.problem-text{
background: #fff;
border-radius: 10px;
overflow: auto;
width: 376px;
font-size: 16px;
text-align: left;
padding: 15px;
color:#58585a;
min-height: 172px;
max-height:172px;
}
.problem-user-icon{
height:25px;
width:25px;
background:#18b1a0;
margin-bottom:10px;
}
.round-label{
font-size:30px;
color:#f05f9d;
font-weight:700;
}
.round-label-text{
font-size:24px;
color:#18b1a0;
cursor:pointer;
}
.count-knowls div{
display:inline;
}
.knowls-num, .dibbs-num{
font-size:25px;
font-weight:700;
}
.spin-title{
font-size:20px;
padding:8px 15px;
text-align:center;
background:#ddd;
border-radius:10px;
font-weight:700;
width:268px;
position: relative;
top: 8px;
}
.title-border{
border:5px dotted #999;
}
.page-header{
margin:0px;
}
#rcorners_parent {
position: relative;
background: #ddd;
padding: 20px;
border-radius: 15px 50px 50px 15px / 8% 80% 80% 8%;
overflow: hidden;
padding: 42px 0px 32px 0px;
}
#rcorners_parent::after {
content: "";
position: absolute;
top: 10%;
left: -15px;
width: 25px;
height: 80%;
background-color: #bdbec0;
border-radius: 100%;
}
#slots_a {
position: relative;
background: #fff;
padding: 20px;
width: 170px;
height: 100px;
border-radius: 10px 50px 50px 10px / 8% 80% 80% 8%;
overflow: hidden;
display:inline-block;
margin-right:15px;
}
#slots_a::after {
content: "";
position: absolute;
top: 10%;
left: -15px;
width: 25px;
height: 80%;
background-color: #109582;
border-radius: 100%;
display:inline-block;
margin-right:15px;
}
#slots_b {
position: relative;
background: #fff;
padding: 20px;
width: 225px;
height: 100px;
border-radius: 10px 50px 50px 10px / 8% 80% 80% 8%;
overflow: hidden;
display:inline-block;
margin-right:15px;
}
#slots_b::after {
content: "";
position: absolute;
top: 10%;
left: -15px;
width: 25px;
height: 80%;
background-color: #109582;
border-radius: 100%;
display:inline-block;
margin-right:15px;
}
#slots_c {
position: relative;
background: #18b1a0;
padding: 20px;
width: 225px;
height: 100px;
border-radius: 10px 50px 50px 10px / 8% 80% 80% 8%;
overflow: hidden;
display:inline-block;
}
#slots_c::after {
content: "";
position: absolute;
top: 10%;
left: -15px;
width: 25px;
height: 80%;
background-color: #109582;
border-radius: 100%;
display:inline-block;
}
.slot {
font-size:32px;
}
.slots .wrapper{
margin-top:6px;
width:100px;
}
.slots .slot{
width:100px;
height:117px;
text-align:center;
}
.spin-person{
font-size:16px;
}
.nob-img{
position: absolute;
top: 18px;
right: -26px;
}
.spin{
background:#18b1a0 !important;
border:1px solid #18b1a0 !important;
color:#fff !important;
font-weight:600 !important;
}
.spin:hover{
background:#18b1a0 !important;
border:1px solid #18b1a0 !important;
color:#fff !important;
font-weight:600 !important;
}
.spin-button{
padding:10px 34px;
border-radius:14px;
font-weight:600;
font-size:20px;
}
.pink{
background:#f05f9d;
border:1px solid #f05f9d;
color:#fff;
font-weight:600;
}
.pink:hover{
background:#f05f9d;
border:1px solid #f05f9d;
color:#fff;
font-weight:600;
}
.pink-button{
padding: 10px 11px;
border-radius: 14px;
font-weight: 600;
font-size: 16px;
}
.step-one, .step-two{
background:#e1e65d !important;
border-radius:25px;
font-size:20px;
color:#fff;
border-color:#e1e65d !important;
font-weight:600;
padding:10px 15px;
cursor:pointer;
}
.step-three{
background:#f05e9d !important;
border-radius:25px;
font-size:20px;
color:#fff;
border-color:#f05e9d !important;
font-weight:600;
padding:10px 15px;
cursor:pointer;
}
.step-four{
background:#54cbec !important;
border-radius:25px;
font-size:20px;
color:#fff;
border-color:#54cbec !important;
font-weight:600;
padding:10px 15px;
cursor:pointer;
}
.glyphicon-triangle-bottom{
position:relative;
top:4px;
}
.gif-title{
color:#f074a9;
font-size:18px;
font-weight:600;
text-align:center;
margin-top:10px;
}
.col-centered{
float: none;
margin: 0 auto;
}
.gif-box{
text-decoration:none;
cursor:pointer;
}
.gif-box:hover{
text-decoration:none;
cursor:pointer;
}
.orange-button{
padding:10px 34px;
border-radius:14px;
font-weight:600;
font-size:20px;
}
.btn-container{
margin:18px 0px;
}
.draw-steps{
border:2px dashed #666;
border-radius:10px;
margin-bottom:30px;
}
.step-num{
color:#666;
font-size:50px;
font-weight:600;
position:relative;
top:10px;
}
.idea-steps-label{
font-size:18px;
text-align:left;
}
.draw-title{
color:#54cbec;
font-size:20px;
text-align:left;
font-weight:600;
margin-bottom:10px;
}
a:hover{
text-decoration:none !important;
}
.btn.grey {
background: grey none repeat scroll 0 0;
border-color: grey;
color: #fff;
cursor:not-allowed !important;
pointer-events:auto !important;
}
.glyphicon-circle-arrow-left{
left: -10px;
}
#back_link .glyphicon{
font-size:48px !important;
color:#818285 !important;
}
#back_link .glyphicon:hover{
color:#2abbb5 !important;
}
@media screen and (max-width: 600px){
#back_link {
position:absolute;
bottom:5px;
left:5px;
}
#back_link .glyphicon{
font-size:35px !important;
}
.step-one, .step-two, .step-three, .step-four{
font-size:18px;
}
}
.sticky {
margin: 0;
padding: 8px 10px;
width:205px;
height:200px;
font-size: 1.4em;
border:1px #E8Ds47 solid;
background:#f2f4ce;
box-shadow: 3px 3px 5px #666;
-moz-box-shadow: 3px 3px 5px #666;
-webkit-box-shadow: 3px 3px 5px #666;
}
.sticky p {
text-align: center;
}
.sticky textarea {
width:184px;
height:180px;
background:#f2f4ce;
border-bottom:none !important;
}
.sticky ol {
margin: 12px;
}
.r-index{
z-index: 0;
}
.a-index{
z-index: 99;
}
.sticky-container {
position: relative;
}
.sticky {
position: absolute;
}
/*time container*/
button[data-setter] {
outline: none;
background: transparent;
border: none;
font-family: 'Roboto';
font-weight: 300;
font-size: 18px;
width: 25px;
height: 30px;
color: #F7958E;
cursor: pointer;
}
button[data-setter]:hover { opacity: 0.5; }
.time-container {
position: relative;
top: 130px;
width: 300px;
margin: 0 auto;
text-align: center;
}
.setters {
position: absolute;
left: 85px;
top: 75px;
}
.minutes-set {
float: left;
margin-right: 28px;
}
.seconds-set { float: right; }
.controlls {
position: absolute;
left: 37%;
top: 52px;
text-align: center;
}
.display-remain-time {
font-weight: 700;
font-size: 32px;
color: #fff;
}
#pause {
outline: none;
background: transparent;
border: none;
margin-top: 10px;
width: 50px;
height: 50px;
position: relative;
}
.play::before {
display: block;
content: "";
position: absolute;
top: 8px;
left: 16px;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 22px solid #F7958E;
}
.pause::after {
content: "";
position: absolute;
top: 8px;
left: 12px;
width: 15px;
height: 30px;
background-color: transparent;
border-radius: 1px;
border: 5px solid #F7958E;
border-top: none;
border-bottom: none;
}
#pause:hover { opacity: 0.8; }
.e-c-base {
fill: none;
stroke: #fff;
stroke-width: 4px
}
.e-c-progress {
fill: none;
stroke: #18b1a0;
stroke-width: 10px;
transition: stroke-dashoffset 0.7s;
-webkit-transition: stroke-dashoffset 0.7s;
}
.e-c-pointer {
fill: #FFF;
stroke: #F7958E;
stroke-width: 2px;
}
#e-pointer { transition: transform 0.7s; -webkit-transition: -webkit-transform: 0.7s; }
.sticky-note-div{
background:#f2f4ce;
box-shadow: 5px 5px 5px #666;
-moz-box-shadow: 5px 5px 5px #666;
-webkit-box-shadow: 5px 5px 5px #666;
height:215px;
width:22%;
display:inline-block;
margin-right:2%;
margin-bottom:10px;
position:relative;
cursor:pointer;
}
.sticky-note-div img{
position: absolute;
right: 5px;
top: 5px;
}
.sticky-note-div:last-child{
margin-right:0px;
}
@media only screen and (max-width: 768px) {
.nob-img {
position: absolute;
top: 41px;
right: -26px;
}
#slots_a {
width:160px;
margin-right:15px;
}
#slots_b {
width:205px;
margin-right:15px;
}
#slots_c {
width:205px;
margin-right:0px;
}
.time-container {
position: relative;
top: 35px;
}
}
@media only screen and (max-width: 540px) {
.nob-img {
position: absolute;
top: 262px;
right: -22px;
}
#slots_a, #slots_b, #slots_c {
width:210px;
margin-right:0px;
margin-bottom:10px;
}
.problem-text{
visibility:hidden;
}
}
.card{
background:#fff;
margin-bottom:40px;
}
.card .tab-content{
max-width:100% !important;
font-size:18px !important;
min-height: 300px;
max-height:514px;
overflow: auto;
}
.card .nav-tabs { border-bottom: 2px solid #DDD; }
.card .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
.card .nav-tabs > li > a { border: none; color: #ffffff;background: #58585a; font-size:16px;font-weight:600;}
.card .nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; color: #58585a !important; background: #fff; }
.card .nav-tabs > li > a::after { content: ""; background: #58585a; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; -webkit-transition: all 250ms ease 0s; transform: scale(0);-webkit-transform: scale(0); }
.card .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1);-webkit-transform: scale(1); }
.card .tab-nav > li > a::after { background: #58585a none repeat scroll 0% 0%; color: #fff; }
.card .tab-pane { padding: 15px 0; }
.card .tab-content{padding:20px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:relative;">
<div id="rcorners_parent">
<div class="slots" id="slots_a">
<div class="wrapper" ></div>
</div>
<div class="slots" id="slots_b">
<div class="wrapper" ></div>
</div>
<div id="spin_btn_div">
<div class="btn-container" style="margin-bottom:0px;">
<button id="proceed_btn" style="display:none;font-size:20px;" class="btn pink pink-button shooter-btn" onClick="go();">Proceed</button>
<button id="spin_btn" style="margin-left:10px;margin-right:10px;" class="btn spin spin-button shooter-btn" onClick="go();">Spin</button>
</div>
</div></div>
</div>
这篇关于获取可见Div的ID，但在所有方法中均失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
