Post

video태그 제어

[ javascript, jQuery ] 2018. 12. 5. 14:29
// 영상 재생/정지
var myAudio = $('#video');
function aud_play_pause() {
if (myAudio[0].paused) {
myAudio[0].play();
$('.btnPlay').css('background-position-y','-30px');
} else {
myAudio[0].pause();
$('.btnPlay').css('background-position-y','0');
}
}


// 영상 전체 시간
myAudio.on('loadedmetadata',function(){
videoTime = parseInt(myAudio[0].duration);
m = Math.floor(videoTime / 60) + ":" + (videoTime % 60);  // 남은 시간 계산
$('.duration').text(m);
});

// 현재 진행 시간
myAudio.on('timeupdate', function() {
var currentPos = myAudio[0].currentTime; //Get currenttime
var maxduration = myAudio[0].duration; //Get video duration
var percentage = 100 * currentPos / maxduration; //in %
$('.timeBar').css('width', percentage+'%');
});


'javascript, jQuery' 카테고리의 다른 글

INPUT TYPE FILE 파일명 추출  (0) 2019.04.09
JavaScript, jQuery 에서 높이, 너비 구하는 방법 정리  (0) 2019.01.31
타이머 스크립트  (0) 2018.08.21
select 제어  (0) 2018.08.05
숫자만 입력가능  (0) 2018.06.12

Post

타이머 스크립트

[ javascript, jQuery ] 2018. 8. 21. 16:21

<html>

<head>

<title>Timer</title>


<script language="JavaScript">

var SetTime = 5; // 최초 설정 시간(기본 : 초)


function msg_time() { // 1초씩 카운트

m = Math.floor(SetTime / 60) + "분 " + (SetTime % 60) + "초"; // 남은 시간 계산

var msg = "현재 남은 시간은 <font color='red'>" + m + "</font> 입니다.";

document.all.Timer.innerHTML = msg; // div 영역에 보여줌 

SetTime--; // 1초씩 감소

if (SetTime < 0) { // 시간이 종료 되었으면..

clearInterval(tid); // 타이머 해제

alert("종료");

}

}


window.onload = function TimerStart(){ tid=setInterval('msg_time()',1000) };

</script>


</head>


<body >

<div id="Timer"></div>


</body>

</html>



'javascript, jQuery' 카테고리의 다른 글

JavaScript, jQuery 에서 높이, 너비 구하는 방법 정리  (0) 2019.01.31
video태그 제어  (0) 2018.12.05
select 제어  (0) 2018.08.05
숫자만 입력가능  (0) 2018.06.12
자바스크립트 국내지도 svg 오버효과  (0) 2018.05.31

Post

select 제어

[ javascript, jQuery ] 2018. 8. 5. 18:24

jQuery로 선택된 값 읽기

$("#selectBox option:selected").val();

$("#select_box > option:selected").val()

$("select[name=name]").val();

 

jQuery로 선택된 내용 읽기

$("#selectBox option:selected").text();

 

선택된 위치

var index = $("#test option").index($("#test option:selected"));

 

-------------------------------------------------------------------

 

// 맨마지막에 option 추가

$("#selectBox").append("<option value='1'>Apples</option>");

$("#selectBox").append("<option value='2'>After Apples</option>");

 

// 맨 앞에 option 추가

$("#selectBox").prepend("<option value='0'>Before Apples</option>");

 

// select 옵션 전체 변경

$("#selectBox")

.html("<option value='1'>oranges</option><option value='2'>Oranges</option>");

 

// Replace items at a certain index

$("#selectBox option:eq(1)")

.replaceWith("<option value='2'>apples</option>");

$("#selectBox option:eq(2)")

.replaceWith("<option value='3'>bananas</option>");

 

// 지정된 index 값으로 select 하기

$("#selectBox option:eq(2)").attr("selected", "selected");

 

// text 값으로 select 하기

$("#selectBox").val("Some oranges").attr("selected", "selected");

 

// value 값으로 select 하기

$("#selectBox").val("2");

$("#selectBox > option[@value=지정값]").attr("selected", "true");

 

// 지정된 인덱스 값의 item 삭제

$("#selectBox option:eq(0)").remove();

 

// 첫번째 item 삭제

$("#selectBox option:first").remove();

 

// 마지막 item 삭제

$("#selectBox option:last").remove();

 

// 선택된 옵션의 text 구하기

alert($("#selectBox option:selected").text());

 

// 선택된 옵션의 value 구하기

alert($("#selectBox option:selected").val());

 

// 선택된 옵션 index 구하기

alert($("#selectBox option").index($("#selectBox option:selected")));

 

// SelecBox 아이템 갯수 구하기

alert($("#selectBox option").size());

 

// 선택된 옵션 앞의 아이템 갯수

alert($("#selectBox option:selected").prevAll().size());

 

// 선택된 옵션 후의 아이템 갯수

alert($("#selectBox option:selected").nextAll().size());

 

// 0번째 item 다음에 삽입

$("#selectBox option:eq(0)").after("<option value='4'>Some pears</option>");

 

// 3번째 item 전에 삽입

$("#selectBox option:eq(3)").before("<option value='5'>Some apricots</option>");

 

// select box 값이 변경될때 선택된 현재값

$("#selectBox").change(function() {

           alert($(this).val());

           alert($(this).children("option:selected").text());

});

'javascript, jQuery' 카테고리의 다른 글

video태그 제어  (0) 2018.12.05
타이머 스크립트  (0) 2018.08.21
숫자만 입력가능  (0) 2018.06.12
자바스크립트 국내지도 svg 오버효과  (0) 2018.05.31
자바스크립트 지역셀렉트 선택  (0) 2018.05.14
◀ 이전 1 2 3 4 5 6 ··· 13 다음 ▶
▲ top
▲ top

티스토리툴바