danimal141 · October 17, 2013 01:32
diff --git a/stopGage.html b/stopGage.html
 <!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>
	<!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>