我试图得到我的第一个旋转轮的可见Div ID，总是得到0的值。我想要可见部分的确切ID。任何帮助将不胜感激
$（＆＃34; div.slot＆＃34）不（＆＃34;：隐藏＆＃34）。丙（＆＃34; ID＆＃34）;
在上面的代码中使用，但我得到了结果。
//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>
答案 0 :(得分：3)
请查看添加的函数intersectRect，它测试两个边界框是否相交，以及获取可见插槽getVisibleSlot的函数。
我还修改了go函数的逻辑，在那里定义了promise处理程序，因为我需要一个范围变量。
我在评论中添加了我想到的逻辑。
//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>
答案 1 :(得分：0)