Skip to content

Instantly share code, notes, and snippets.

@danimal141
Created October 17, 2013 01:32
Show Gist options
  • Save danimal141/7017926 to your computer and use it in GitHub Desktop.
Save danimal141/7017926 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telephone=no">
<meta name="keywords" content="">
<meta name="description" content="">
<title>progress_sample</title>
<style>
#progress{
width: 300px;
height: 30px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: -150px;
background-color: #f7f7f7;
/* border-radius: 3px;*/
-webkit-box-shadow: 0 2px 0 rgba(247,247,247,0.3) inset;
box-shadow: 0 2px 0 rgba(247,247,247,0.3) inset;
}
#bar{
height:inherit;
/* border-radius:3px 0 0 3px;*/
background-color: #ffffaa;
-webkit-box-shadow: 0 -1px 0 rgba(4,0,0,0.1) inset;
box-shadow: 0 -1px 0 rgba(4,0,0,0.1) inset;
}
#center{
width: 0;
height: 0;
position: absolute;
top:30px;
left:50%;
margin-left: -10px;
border-right: 10px solid transparent;
border-bottom : 20px solid #ccc;
border-left: 10px solid transparent;
}
#stop{
float: right;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="progress">
<div id="bar"></div>
<div id="center"></div>
<button id="stop">すとっぷ</button>
</div>
<script>
(function(){
var progress = progress || {},
dom_bar = document.getElementById("bar"),
dom_center = document.getElementById("center"),
dom_stop = document.getElementById("stop"),
per = 0,
up_repeat,
down_repeat;
progress.up_gage = function(){
up_repeat = setTimeout(function(){
per += 1;
dom_bar.style.width = per + "%";
setTimeout(progress.up_gage, 10);
}, 1);
if(per === 100){
clearTimeout(up_repeat);
up_repeat = null;
progress.down_gage();
return;
}
};
progress.down_gage = function(){
down_repeat = setTimeout(function(){
per -= 1;
bar.style.width = per + "%";
setTimeout(progress.down_gage, 10);
}, 1);
if(per === 0){
clearTimeout(down_repeat);
down_repeat = null;
progress.up_gage();
return;
}
};
progress.stop_gage_event = (function(){
dom_stop.addEventListener("click", function(e){
var _per = parseInt(bar.style.width.slice(0, -1), 10),
_barPosition = 300 * _per / 100;
console.log(dom_center.offsetLeft);
console.log(_barPosition);
if(Math.abs(_barPosition - dom_center.offsetLeft) <= 30){
alert("OKっす");
}else{
alert("ずれてるっす");
}
if(up_repeat){
clearTimeout(up_repeat);
delete progress.up_gage;
}else if(down_repeat){
clearTimeout(down_repeat);
delete progress.down_gage;
}
}, false);
})();
progress.up_gage();
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment