jquery 진행 상태 표시
위의 그림 에서 보 듯 이 프로젝트 가 필요 하기 때문에 상태 전 시 를 해 야 합 니 다.클릭 할 때 전체 길 이 를 채 울 때 jquery 를 다운로드 해 야 합 니 다.코드 는 다음 과 같 습 니 다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.title-bar {
width: 300px;
height: 20px;
margin: 0 auto;
text-align: center;
}
.title-bar span {
display: inline-block;
width: 69px;
font-size: 12px;
cursor: pointer;
}
.title-bar span i {
display: inline-block;
border-radius: 10px;
width: 5px;
height: 5px;
margin-bottom: 2px;
margin-right: 4px;
}
.color-yellow {
background-color: #FFCA25;
}
.color-blue {
background-color: #3960FB;
}
.color-azury {
background-color: #00D5FF;
}
.color-red {
background-color: #FD1E60;
}
.total-bar {
width: 900px;
height: 15px;
background-color: #ccc;
margin: 20px auto;
border-radius: 20px;
}
span {
padding: 0;
margin: 0;
float: left;
}
.on-work {
display: inline-block;
width: 40%;
height: 100%;
background: #FFCA25;
border-radius: 20px 0px 0px 20px;
}
.on-waite {
display: inline-block;
width: 20%;
height: 100%;
background: #3960FB;
}
.on-close {
display: inline-block;
width: 20%;
height: 100%;
background: #00D5FF;
}
.on-waring {
display: inline-block;
width: 20%;
height: 100%;
background: #FF2563;
border-radius: 0px 20px 20px 0px;
}
.left,
.right {
float: left;
margin-top: 20px;
}
.left {
padding-left: 5px;
}
.right {
float: right;
padding-right: 5px;
}
</style>
</head>
<body>
<div class="title-bar">
<span class="work"><i class="color-yellow"></i> </span>
<span class="waite"><i class="color-blue"></i> </span>
<span class="close"><i class="color-azury"></i> </span>
<span class="waring"><i class="color-red"></i> </span>
</div>
<div class="total-bar">
<span class="on-work">
<span class="left">8:00</span>
<span class="right">9:00</span>
</span>
<span class="on-waite">
<span class="left">9:00</span>
<span class="right">12:00</span>
</span>
<span class="on-close">
<span class="left">13:00</span>
<span class="right">16:00</span>
</span>
<span class="on-waring">
<span class="left">13:00</span>
<span class="right">16:00</span>
</span>
</div>
</body>
<script src="./jquery.min.js"></script>
<script>
$(function () {
$('.title-bar').on('click', 'span', function () {
var i = $(this).index();
console.log(i);
if (i == 0) {
$('.on-work').show().css({ "width": "100%", "border-radius": "20px", "background-color": "#FFCA25", "z-index": "10" }).siblings().hide()
} else if (i == 1) {
$('.on-waite').show().css({ "width": "100%", "border-radius": "20px", "background-color": "#3960FB", "z-index": "10" }).siblings().hide()
} else if (i == 2) {
$('.on-close').show().css({ "width": "100%", "border-radius": "20px", "background-color": "#00D5FF", "z-index": "10" }).siblings().hide()
} else if (i == 3) {
$('.on-waring').show().css({ "width": "100%", "border-radius": "20px", "background-color": "#FD1E60", "z-index": "10" }).siblings().hide()
}
})
})
</script>
</html>
필요 한 사람 에 게 아 이 디 어 를 제공 할 수 있 기 를 바 랍 니 다.이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.